Bootstrap 4 Mesas
Tabla básica Bootstrap 4
Una mesa Bootstrap 4 básica tiene un acolchado ligero y divisores horizontales.
La .tableclase agrega un estilo básico a una tabla:
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
filas de rayas
La .table-stripedclase agrega rayas de cebra a una tabla:
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tabla Bordeada
La .table-borderedclase agrega bordes en todos los lados de la tabla y las celdas:
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Filas flotantes
La .table-hoverclase agrega un efecto de desplazamiento (color de fondo gris) en las filas de la tabla:
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Mesa negra/oscura
La .table-darkclase agrega un fondo negro a la tabla:
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Mesa de rayas oscuras
Combine .table-darky .table-stripedpara crear una mesa oscura a rayas:
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Mesa oscura flotante
La .table-hoverclase agrega un efecto de desplazamiento (color de fondo gris) en las filas de la tabla:
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tabla sin bordes
La .table-borderlessclase elimina los bordes de la tabla:
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Clases Contextuales
Las clases contextuales se pueden utilizar para colorear toda la tabla ( <table>), las filas de la tabla ( <tr>) o las celdas de la tabla ( <td>).
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | [email protected] |
| Primary | Joe | [email protected] |
| Success | Doe | [email protected] |
| Danger | Moe | [email protected] |
| Info | Dooley | [email protected] |
| Warning | Refs | [email protected] |
| Active | Activeson | [email protected] |
| Secondary | Secondson | [email protected] |
| Light | Angie | [email protected] |
| Dark | Bo | [email protected] |
Las clases contextuales que se pueden utilizar son:
| Clase | Descripción |
|---|---|
.table-primary |
Azul: indica una acción importante |
.table-success |
Verde: Indica una acción exitosa o positiva |
.table-danger |
Rojo: indica una acción peligrosa o potencialmente negativa |
.table-info |
Azul claro: Indica un cambio o acción informativa neutra |
.table-warning |
Naranja: indica una advertencia que podría necesitar atención |
.table-active |
Gris: aplica el color flotante a la fila o celda de la tabla |
.table-secondary |
Gris: indica una acción un poco menos importante |
.table-light |
Fondo gris claro de la tabla o de la fila de la tabla |
.table-dark |
Fondo gris oscuro de la tabla o de la fila de la tabla |
Colores de la cabecera de la mesa
La .thead-darkclase agrega un fondo negro a los encabezados de las tablas y la .thead-lightclase agrega un fondo gris a los encabezados de las tablas:
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Mesa pequeña
La .table-smclase hace que la mesa sea más pequeña cortando el relleno de la celda por la mitad:
Ejemplo
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tablas receptivas
La .table-responsiveclase agrega una barra de desplazamiento a la tabla cuando es necesario (cuando es demasiado grande horizontalmente):
Ejemplo
<div class="table-responsive">
<table class="table">
...
</table>
</div>
También puede decidir cuándo la tabla debe tener una barra de desplazamiento, según el ancho de la pantalla:
| Clase | ancho de pantalla |
|---|---|
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992 píxeles |
.table-responsive-xl |
< 1200px |
Ejemplo
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>