Référence des tables CSS Bootstrap
<tableau> Classes
Utilisez les classes ci-dessous pour styliser n'importe quel tableau :
Class | Description | Example |
---|---|---|
.table | Adds basic styling (light padding and only horizontal dividers) to any <table> | |
.table-striped | Adds zebra-striping to any table row within <tbody> (not available in IE8) | |
.table-bordered | Adds border on all sides of the table and cells | |
.table-hover | Enables a hover state on table rows within a <tbody> | |
.table-condensed | Makes table more compact by cutting cell padding in half | |
Combining all the table classes |
Classes <tr>, <th> et <td>
Utilisez les classes ci-dessous pour colorer les lignes ou les cellules du tableau :
Class | Description | Example |
---|---|---|
.active | Applies the hover color (light-grey) to a particular row or cell | |
.success | Indicates a successful or positive action | |
.info | Indicates a neutral informative change or action | |
.warning | Indicates a warning that might need attention | |
.danger | Indicates a dangerous or potentially negative action |
Tableaux réactifs
La classe .table-responsive crée une table réactive. Le tableau défilera alors horizontalement sur les petits appareils (moins de 768px). Lors de la visualisation sur quelque chose de plus grand que 768 pixels de large, il n'y a aucune différence :
Exemple
<div class="table-responsive">
<table class="table">
...
</table>
</div>