Colapso del borde de CSS
En este tutorial, utilizaremos esta propiedad de colapso de borde en la tabla para que aprenda cómo se usa esta propiedad en CSS para colapsar el borde de la tabla y para separar el borde de la tabla y las celdas. Comencemos a explorar los ejemplos dados en este tutorial para aprender este concepto de colapso de border.
Sintaxis:
- Colapso de borde: colapso;
- colapso de borde: separado;
Ejemplo 1
Abra el archivo en el código de Visual Studio y seleccione el idioma para esto, que es el idioma HTML a medida que creamos una tabla en HTML. Después de esto, vinculamos el archivo HTML al archivo CSS para el estilo adicional de la tabla. Puede realizar estos ejemplos en el software diferente de su elección, pero el código para esto es el mismo. Aquí, usamos el código Visual Studio. Este archivo HTML se guarda. Usamos el ".Extensión del archivo HTML "para este archivo.
El código anterior es el código HTML en el que creamos una tabla que tiene cuatro filas y dos columnas. Primero, escribimos un encabezado y luego usamos el "
| "Es definir el encabezado de la mesa. El " | |
|---|---|
| ". El " | "Es definir la" célula "de la tabla. Después de crear la tabla y poner datos en esta tabla, nos movemos al archivo CSS para dar estilo a esta tabla. Utilizamos la propiedad de colapso fronterizo en el código CSS. Código CSS: Producción: Ejemplo #2 Código CSS: Editamos la "Fuente-Familia" del encabezado. Esta vez, usamos "Calibri" como la "familia de fuentes" del encabezado. El "color" que usamos aquí para el encabezado es "rojo". Ahora, aplique nuevamente la propiedad "fronteriza" para la mesa, la celda y el encabezado de la mesa. El borde de todas estas propiedades se establece en "2px", con un tipo "sólido" y color "verde". La propiedad de "colapso del borde" se establece en "colapso". Luego usamos el "espacio fronterizo" para dar espacio entre el borde de la tabla y las celdas de la tabla. Lo establecemos en "20px". Producción: Aquí, la salida no muestra diferencia en el borde de las tablas y celdas. Parece igual que en la ilustración anterior. Esto significa que la propiedad de "espacios fronterizos" no cambia el espacio de borde de la tabla porque utilizamos la propiedad de "colapso del borde" en esta tabla junto con la propiedad de "espacio-espacio fronterizo". Ejemplo #3 Código CSS: Producción: Ejemplo #4 Esta vez, la "familia de fuentes" del encabezado es "argelina" y el color es "granate". El borde de la mesa tiene un color "magenta". La tabla uno usa el "colapso" con el "colapso del borde" con un "espacio fronterizo" de "10px". Para la Tabla dos, usamos un borde "separado" y el "espacio libre" también es "10px". La salida mostrará la diferencia. Producción: Ejemplo #5 No hay cambios en la Tabla 1. No hay espaciado entre el borde de la tabla y las células. El color de la mesa es el mismo. La propiedad del "color de la frontera" no afecta la tabla ya que usamos el borde del "colapso" en la Tabla 1. Pero en la Tabla 2, puede ver que el color del borde de la mesa y el borde de la celda son diferentes. Además, hay una separación de "10px" entre el borde de la célula y el borde de la mesa. Conclusión En este tutorial, utilizamos la propiedad de "colapso del borde" y aprendimos la diferencia cuando usamos "separado" y "colapso" con la propiedad "border-colapso". También se nos muestra la salida en la que se visible la diferencia en "separado" como en "colapso". Puede obtener fácilmente este concepto sobre cómo ambas propiedades son diferentes entre sí. Aprendiste lo que sucede cuando usamos el "separado" y el "colapso" con la propiedad "border-colapso" en CSS. |