Bienvenid@s, si estás aquí probablemente es porque has estado intentando agregarle bordes con css a las filas de una tabla y ves que no da resultado, pero existe una solución a través de la propiedad CSS border-collapse y su valor collapse, esto consigue compactar la tabla y se ignorarán celdas vacías, márgenes de espaciamiento y propiedades. A partir de aquí, ya puedes empezar a aplicar estilos CSS a las filas y celdas.
A continuación se muestra como añadir bordes solamente a las filas de una tabla ...
| ID | NOMBRE | EDAD |
|---|---|---|
| 1 | Pepe | 30 |
| 2 | Alberto | 28 |
Y en este otro ejemplo se le añaden bordes a las filas y celdas ...
| ID | NOMBRE | EDAD |
|---|---|---|
| 1 | Pepe | 30 |
| 2 | Alberto | 28 |
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<title>Como incluir bordes a las filas (tr) de una tabla con css</title>
<style>
#table-1
{
border-collapse: collapse;
border: 1px solid blue;
}
#table-1 tr
{
border-bottom: 1px solid blue;
}
#table-1 tr td, #table-1 tr th
{
padding: 10px;
}
#table-2
{
border-collapse: collapse;
border: 1px solid blue;
}
#table-2 tr
{
border-bottom: 1px solid blue;
}
#table-2 tr td, #table-2 tr th
{
padding: 10px;
border-right: 1px solid blue;
}
</style>
</head>
<body>
<p>DEMO 1</p>
<table id="table-1">
<tr><th>ID</th><th>NOMBRE</th><th>EDAD</th></tr>
<tr><td>1</td><td>Pepe</td><td>30</td></tr>
<tr><td>2</td><td>Alberto</td><td>28</td></tr>
</table>
<p>DEMO 2</p>
<table id="table-2">
<tr><th>ID</th><th>NOMBRE</th><th>EDAD</th></tr>
<tr><td>1</td><td>Pepe</td><td>30</td></tr>
<tr><td>2</td><td>Alberto</td><td>28</td></tr>
</table>
</body>
</html>
No hay comentarios:
Publicar un comentario