9 - table : con borde en cada celda.


Por defecto una tabla en Bootstrap solo las filas tienen una línea separadora, si queremos que todas las celdas aparezcan recuadradas debemos añadir la clase "table-bordered".

Un ejemplo para mostrar una tabla con bordes en todas las celdas:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Prueba de Bootstrap</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head> 
<body> 
  <div class="container">
     <table class="table table-bordered">
       <thead> 
         <tr> 
           <th>Titulo 1</th> 
           <th>Titulo 2</th>
           <th>Titulo 3</th>
         </tr> 
       </thead>
       <tbody>
         <tr> 
           <td>Elemento 1,1</td>
           <td>Elemento 1,2</td> 
           <td>Elemento 1,3</td> 
         </tr>
         <tr> 
           <td>Elemento 2,1</td>
           <td>Elemento 2,2</td> 
           <td>Elemento 2,3</td> 
         </tr>
         <tr> 
           <td>Elemento 3,1</td>
           <td>Elemento 3,2</td> 
           <td>Elemento 3,3</td> 
         </tr>
         <tr> 
           <td>Elemento 4,1</td>
           <td>Elemento 4,2</td> 
           <td>Elemento 4,3</td> 
         </tr>
         <tr> 
           <td>Elemento 5,1</td>
           <td>Elemento 5,2</td> 
           <td>Elemento 5,3</td> 
         </tr>
       </tbody>
     </table>
  </div> 
</body> 
</html>

El resultado en pantalla luego será:

bootstrap table table-bordered

Esto lo logramos solo con agregar la clase "table-bordered":

     <table class="table table-bordered">

Ejecutar Ejemplo

Retornar