twitter-bootstrap => Mesas

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

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

twitter-bootstrap
Mesas

Buscar..