twitter-bootstrap
tabellen
Zoeken…
Opmerkingen
Inhoudsvolgorde en complexe tabellen Let op dat de stijl voor het opnieuw plaatsen van de tabel de visuele volgorde van inhoud wijzigt. Zorg ervoor dat u deze stijl alleen toepast op goed gevormde en eenvoudige gegevenstabellen (en deze in het bijzonder niet gebruiken voor lay-outtabellen) met de juiste tabelkopcellen voor elke rij en kolom.
Bovendien werkt deze klasse niet correct voor tabellen met cellen die meerdere rijen of kolommen beslaan (met behulp van attributen voor rowspan of colspan).
Basistabel
Bootstrap definieert een aangepaste stijl voor de tabel met behulp van de klasse .table
. Voeg de klasse .table
aan elke <table>
om horizontale scheidingslijnen en opvulling te zien:
<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>
Tafel met geavanceerde styling
Bootstrap biedt een aantal klassen voor geavanceerde tafelstijlen.
Gestreepte rijen
Je hebt een tabel met gestreepte rijen, als je klasse .table-striped
toevoegt:
<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>
Let daar op:
Gestreepte tabellen worden gestileerd via de
:nth-child
CSS-selector, die niet beschikbaar is in Internet Explorer 8.
Grenzen tafel
Je hebt een tabel met randen aan alle kanten van de tabel en cellen, als je klasse met .table-bordered
toevoegt:
<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>
Beweeg over rijen
Als u de klasse .table-hover
toevoegt, krijgt u een tabel met gemarkeerde rijen wanneer de gebruiker over een rij zweeft:
<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>
Gecondenseerde tafel
Als u .table-condensed
class toevoegt, wordt de standaard .table-condensed
in tweeën gesneden, zodat u een compactere tabel hebt:
<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>
Contextuele klassen
Bootstrap-tabellen ondersteunen contextuele kleuren. Om de achtergrondkleur van een tabelrij of cel te wijzigen, hoeft u alleen maar een van de volgende contexuele klassen toe te voegen: .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>
Responsieve tabellen
U moet elke .table
in html-container met .table-responsive
class .table-responsive
om responsieve tabellen te maken:
<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>
Responsieve tabellen worden horizontaal weergegeven op kleine apparaten (<768 px). Er zijn geen verschillen voor schermen groter dan 768px breed.
Tabel opnieuw plaatsen - verticale kopteksten
Een tafel krijgen met verticale headers.
Twitter-bootstrap ondersteunt nu verticale koptekst op een goed opgemaakte normale tabel. Gebruik hiervoor gewoon de klasse .table-reflow
Gebruik de klasse Twitter bootstrap .table-reflow
op een goed gevormde tafel om een tafel met verticale kopteksten te maken. Bovendien kunt u combineren met het gebruik van .table-striped
en .table-hover
om deze keer op kolommen te zweven.
<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>
Bekijk hier de v4 -alfadocumenten : twitter-bootstrap .table-reflow