martes, 26 de noviembre de 2013

Como incluir bordes a las filas (tr) de una tabla con css



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 ...


IDNOMBREEDAD
1Pepe30
2Alberto28

Y en este otro ejemplo se le añaden bordes a las filas y celdas ...

IDNOMBREEDAD
1Pepe30
2Alberto28


<!-- 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>