10 - table : iluminar la fila donde se encuentra el mouse (hover)


Si queremos que se muestre la fila donde se encuentra el mouse con un color distinto debemos agregar la clase "table-hover".

Un ejemplo para probar esta clase:

<!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-hover">
       <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 cuando ejecutemos este código en el navegador es:

bootstrap table table-hover

Ejecutar Ejemplo

Retornar