- ¿Cómo agregar el borde inferior a la fila de la tabla
? - Establezca el borde inferior en el elemento
de la fila de la tabla - Elemento de tabla de estilo
- Estilo “td” Elemento
- Estilo “tr” Elemento
¿Cómo agregar el borde inferior a la fila de la tabla
? Agregar el borde inferior a la fila de la tabla agregará el borde a toda la fila para mejorar la experiencia visual y atraer la atención del usuario.
A continuación se muestra un ejemplo detallado de cómo agregar borde inferior a la fila de la tabla
:
Establezca el borde inferior en la fila de la tabla
Cree una tabla simple que contenga 3 filas y 3 columnas en nuestro archivo HTML que se crean usando los elementos
, y :
< mesa >
< tr clase = 'fila' >
< el > Nombre < / el >
< el > Estado < / el >
< el > Habitación no < / el >
< / tr >
< tr clase = 'fila' >
< td > Fajar < / td >
< td > Alumno < / td >
< td > 05 < / td >
< / tr >
< tr clase = 'fila' >
< td > Omar < / td >
< td > Alumno < / td >
< td > 05 < / td >
< / tr >
< / mesa >En el fragmento de código anterior, hemos asignado una clase de 'fila' a las filas de la tabla
, para que se pueda acceder a ellas más adelante en el CSS.
La página web se verá así:
Elemento de tabla de estilo
En la parte de CSS, seleccione el elemento de la tabla y alinee el texto al centro. Después de eso, use el ' borde-colapso ” propiedad para establecer su valor para colapsar:
mesa
{
borde-colapso: colapso;
alineación de texto: centro;
}Estilo “td” Elemento
Para una mejor representación visual, proporcionemos un relleno de 20 px a los elementos de datos de tabla '
' y encabezado de tabla ' ': td
{
relleno: 20px;
}
el
{
relleno: 20px;
}La salida se ve así:
El resultado anterior ha mostrado el relleno de 20 px y ha alineado el texto al centro.
Estilo “tr” Elemento
En el archivo CSS, agregue la propiedad de borde inferior debajo del selector 'tr'. Se asigna a cada fila de la tabla, incluida la fila de encabezado. Por ejemplo, establezca su valor en 2px cian oscuro sólido:
tr {
borde inferior: 2px cian oscuro sólido;
}Después de ejecutar el fragmento de código anterior, la página web se ve así:
Se trata de cómo agregar un borde en la parte inferior de cada fila de la tabla '
”. Conclusión
Para agregar un borde en la parte inferior del elemento
, configure la propiedad CSS border-collapse para colapsar y use la propiedad border-bottom en el elemento ' '. Permite que la propiedad CSS aplique bordes en la tabla. Así es como puede agregar fácilmente un borde inferior a cada etiqueta '
'. - Establezca el borde inferior en el elemento