Documentación sobre estilos en la Plataforma UNJuVirtual

Tablas

Estilos predeterminados

Para un estilo básico (tabla sin bordes exteriores - sólo con divisores horizontales) añada la clase principal .table a cualquier etiqueta <table>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  ...
</table>

Filas Rayadas (estilo cebra)

Utilice .table-striped para agregar un estilo cebra a las filas de una tabla dentro de <tbody>.

Compatibilidad entre navegadores:

El estilo de Filas Rayadas se realiza a través de la utilización del selector :nth-child, que no está disponible en Internet Explorer 8.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped">
  ...
</table>

Tabla con Borde

Añada .table-bordered por establecer bordes en todos los lados de la tabla y las celdas.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered">
  ...
</table>

Filas destacadas al pasar el mouse encima

Añada .table-hover para permitir destacar una fila al pasar el mouse encima.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover">
  ...
</table>

Tablas Compactas

Añada .table-condensed para hacer tablas más compactas quitando relleno de las celdas.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-condensed">
  ...
</table>

Clases contextuales

Utilice clases contextuales para colorear filas de la tabla o celdas individuales.

Clase Descripción
.active Aplica el color a una fila o celda particular
.success Indica una acción exitosa o positiva
.info Indica un cambio informativo neutral o una acción
.warning Indica una advertencia de que podría necesitar su atención
.danger Indica una acción peligrosa o potencialmente negativa
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content 
<!-- En filas -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- En celdas (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

 

VER TAMBIÉN: