Una actividad común es mostrar una tabla HTML con colores que se van alternando para facilitar la lectura de sus dato, sobre todo cuando tenemos tablas con muchas columnas y filas.
Esta actividad se logra muy fácilmente con Bootstrap, solo debemos agregar la clase table-striped a la marca table de nuestra página:
<!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-striped">
<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>
Ahora como resultado tenemos en el navegador la tabla con colores distintos para las filas contiguas:
Comentarios.
Si queremos en alguna circunstancia cambiar el color por defecto para las filas de la tabla lo más conveniente no es modificar directamente el archivo del framework Bootstrap sino es redefinir otros valores para los elementos luego que se carga el framework:
<!DOCTYPE html>
<html>
<head>
<title>Prueba de Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
background-color: #ff0;
}
.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
background-color: #ccc;
}
.table-striped>thead>tr>th {
background-color: #eee;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<table class="table table-striped">
<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>
Como podemos analizar luego de importar el framework Bootstrap procedemos a definir nuevas reglas para los elementos de la tabla:
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
background-color: #ff0;
}
.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
background-color: #ccc;
}
.table-striped>thead>tr>th {
background-color: #eee;
}
</style>
El resultado visual de este cambio es:
