Referentie voor Bootstrap CSS-tabellen
<tabel> Klassen
Gebruik de onderstaande klassen om een tabel op te maken:
| 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 | ||
<tr>, <th> en <td> klassen
Gebruik de onderstaande klassen om tabelrijen of cellen te kleuren:
| 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 |
Responsieve tabellen
De klasse .table-responsive maakt een responsieve tabel. De tabel zal dan horizontaal scrollen op kleine apparaten (onder 768px). Bij het bekijken op iets dat groter is dan 768px breed, is er geen verschil:
Voorbeeld
<div class="table-responsive">
<table class="table">
...
</table>
</div>