twitter-bootstrap
Mesas
Buscar..
Observaciones
Orden de contenido y tablas complejas Tenga en cuenta que el estilo de reflujo de tabla cambia el orden visual del contenido. Asegúrese de que solo aplique este estilo a tablas de datos simples y bien formadas (y en particular, no use esto para tablas de diseño) con celdas de encabezado de tabla adecuadas para cada fila y columna.
Además, esta clase no funcionará correctamente para tablas con celdas que abarcan varias filas o columnas (utilizando los atributos rowpan o colspan).
Tabla basica
Bootstrap define un estilo personalizado para la tabla utilizando la clase .table . Simplemente agregue la clase .table a cualquier <table> para ver los separadores horizontales y el relleno:
<table class="table">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
Mesa con estilo avanzado.
Bootstrap proporciona un par de clases para el estilo avanzado de tablas.
Filas de rayas
Tendrá una tabla con filas de rayas, si agrega la clase .table-striped :
<table class="table table-striped">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
Tenga en cuenta que:
Las tablas con rayas se diseñan a través del selector de CSS
:nth-child, que no está disponible en Internet Explorer 8.
Mesa bordeada
Tendrá una tabla con bordes en todos los lados de la tabla y las celdas, si agrega la clase .table-bordered :
<table class="table table-bordered">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
Flotar en las filas
Si agrega la clase .table-hover , tendrá una tabla con filas resaltadas cuando el usuario se desplace sobre una fila:
<table class="table table-hover">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
Mesa condensada
Si agrega .table-condensed clase .table-condensed , el relleno de celda predeterminado se reducirá a la mitad, por lo que tendrá una tabla más compacta:
<table class="table table-hover">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
Clases contextuales
Las tablas bootstrap soportan colores contextuales. Para cambiar el color de fondo de una fila o celda de una tabla, solo tiene que agregar una de las siguientes clases .active : .active , .success , .info , .warning , .danger
<table class="table">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr class="success"><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td class="info">Bloggs</td></tr>
</tbody>
</table>
Tablas responsivas
Tiene que envolver cualquier .table en el contenedor html con la clase .table-responsive para crear tablas responsivas:
<div class="table-responsive">
<table class="table">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
</div>
Las tablas receptivas se desplazarán horizontalmente en dispositivos pequeños (<768px). No habrá diferencias para pantallas de más de 768px de ancho.
Mesa de reflujo - encabezados verticales
Conseguir una mesa con encabezados verticales.
El bootstrap de Twitter ahora admite el encabezado vertical en una tabla normal bien formateada. Para lograr esto solo usa la clase .table-reflow
Use la clase bootstrap .table-reflow twitter en una tabla bien formada para lograr una tabla con encabezados verticales. Además, puede combinar con el uso de .table-striped y .table-hover para .table-hover en las columnas esta vez.
<table class="table table-striped table-hover table-reflow">
<thead>
<tr>
<th ><strong> First Name: </strong></th>
<th ><strong> Last Name: </strong></th>
<th ><strong> Email: </strong></th>
</tr>
</thead>
<tbody>
<tr>
<td> John </td>
<td> Doe </td>
<td> [email protected] </td>
</tr>
<tr>
<td> Joane </td>
<td> Donald </td>
<td> [email protected] </td>
</tr>
</tbody>
</table>
Debes revisar los documentos alfa de v4 aquí: twitter-bootstrap .table-reflow
