Tabeller
Dokumentation og eksempler på opt-in-stiling af tabeller (i betragtning af deres udbredte brug i JavaScript-plugins) med Bootstrap.
Eksempler
På grund af den udbredte brug af tabeller på tværs af tredjepartswidgets som kalendere og datovælgere, har vi designet vores tabeller til at være tilvalgte . Du skal blot tilføje basisklassen .table
til en hvilken som helst <table>
, og derefter udvide med brugerdefinerede stilarter eller vores forskellige inkluderede modifikatorklasser.
Ved at bruge den mest grundlæggende tabelmarkering kan du se her, hvordan .table
-baserede tabeller ser ud i Bootstrap. Alle tabelstile er nedarvet i Bootstrap 4 , hvilket betyder, at alle indlejrede tabeller vil blive stilet på samme måde som den overordnede.
# | Først | Sidst | Håndtere |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Larry | fuglen |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Du kan også invertere farverne – med lys tekst på mørk baggrund – med .table-dark
.
# | Først | Sidst | Håndtere |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Larry | fuglen |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Bordhoved muligheder
I lighed med tabeller og mørke tabeller, brug modifikatorklasserne .thead-light
eller .thead-dark
for at få <thead>
s til at se lys eller mørkegrå ud.
# | Først | Sidst | Håndtere |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Larry | fuglen |
# | Først | Sidst | Håndtere |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Larry | fuglen |
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Stribede rækker
Bruges .table-striped
til at tilføje zebrastriber til enhver tabelrække i <tbody>
.
# | Først | Sidst | Håndtere |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Larry | fuglen |
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | Først | Sidst | Håndtere |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Larry | fuglen |
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Border med kant
Tilføj .table-bordered
for rammer på alle sider af tabellen og cellerne.
# | Først | Sidst | Håndtere |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Fuglen Larry |
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | Først | Sidst | Håndtere |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Fuglen Larry |
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Bord uden kant
Tilføj .table-borderless
til et bord uden rammer.
# | Først | Sidst | Håndtere |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Fuglen Larry |
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
.table-borderless
kan også bruges på mørke borde.
# | Først | Sidst | Håndtere |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Fuglen Larry |
<table class="table table-borderless table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Svævebare rækker
Tilføj .table-hover
for at aktivere en svævetilstand på tabelrækker i en <tbody>
.
# | Først | Sidst | Håndtere |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Fuglen Larry |
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | Først | Sidst | Håndtere |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Fuglen Larry |
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Lille bord
Tilføj .table-sm
for at gøre borde mere kompakte ved at skære cellepolstring i to.
# | Først | Sidst | Håndtere |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Fuglen Larry |
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | Først | Sidst | Håndtere |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Fuglen Larry |
<table class="table table-sm table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Kontekstuelle klasser
Brug kontekstuelle klasser til at farve tabelrækker eller individuelle celler.
klasse | Overskrift | Overskrift |
---|---|---|
Aktiv | Celle | Celle |
Standard | Celle | Celle |
Primær | Celle | Celle |
Sekundær | Celle | Celle |
Succes | Celle | Celle |
Fare | Celle | Celle |
Advarsel | Celle | Celle |
Info | Celle | Celle |
Lys | Celle | Celle |
Mørk | Celle | Celle |
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
Almindelige bordbaggrundsvarianter er ikke tilgængelige med det mørke bord, men du kan bruge tekst- eller baggrundsværktøjer til at opnå lignende stilarter.
# | Overskrift | Overskrift |
---|---|---|
1 | Celle | Celle |
2 | Celle | Celle |
3 | Celle | Celle |
4 | Celle | Celle |
5 | Celle | Celle |
6 | Celle | Celle |
7 | Celle | Celle |
8 | Celle | Celle |
9 | Celle | Celle |
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="bg-primary">...</td>
<td class="bg-success">...</td>
<td class="bg-warning">...</td>
<td class="bg-danger">...</td>
<td class="bg-info">...</td>
</tr>
Formidle mening til hjælpeteknologier
Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at oplysninger, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom ekstra tekst skjult i .sr-only
klassen.
Opret responsive tabeller ved at ombryde alle .table
med .table-responsive{-sm|-md|-lg|-xl}
, hvilket får tabellen til at rulle vandret ved hvert max-width
brudpunkt på op til (men ikke inklusive) henholdsvis 576px, 768px, 992px og 1120px.
Bemærk, at da browsere i øjeblikket ikke understøtter områdekontekstforespørgsler , omgår vi begrænsningerne for min-
og max-
præfikser og visningsporte med brøkbredder (som kan forekomme under visse forhold på f.eks. højdpi-enheder) ved at bruge værdier med højere præcision til disse sammenligninger .
Billedtekster
A <caption>
fungerer som en overskrift til en tabel. Det hjælper brugere med skærmlæsere med at finde en tabel og forstå, hvad den handler om, og beslutte, om de vil læse den.
# | Først | Sidst | Håndtere |
---|---|---|---|
1 | Mærke | Otto | @mdo |
2 | Jacob | Thornton | @fed |
3 | Larry | fuglen |
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Responsive tabeller
Responsive tabeller gør det nemt at rulle tabeller vandret. Gør ethvert bord responsivt på tværs af alle visningsporte ved at indpakke en .table
med .table-responsive
. Eller vælg et maksimalt breakpoint, som du vil have en responsiv tabel med ved at bruge .table-responsive{-sm|-md|-lg|-xl}
.
Lodret klipning/trunkering
Responsive tabeller gør brug af overflow-y: hidden
, som klipper alt indhold af, der går ud over bordets nederste eller øverste kant. Dette kan især klippe dropdown-menuer og andre tredjeparts-widgets af.
Altid lydhør
På tværs af hvert brudpunkt, brug .table-responsive
til vandret rulning af tabeller.
# | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift |
---|---|---|---|---|---|---|---|---|---|
1 | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle |
2 | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle |
3 | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Breakpoint specifik
Brug .table-responsive{-sm|-md|-lg|-xl}
efter behov til at oprette responsive tabeller op til et bestemt breakpoint. Fra dette brudpunkt og opefter vil tabellen opføre sig normalt og ikke rulle vandret.
Disse tabeller kan forekomme ødelagte, indtil deres responsive stilarter gælder ved bestemte visningsportebredder.
# | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift |
---|---|---|---|---|---|---|---|---|
1 | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle |
2 | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle |
3 | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle |
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
# | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift |
---|---|---|---|---|---|---|---|---|
1 | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle |
2 | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle |
3 | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle |
<div class="table-responsive-md">
<table class="table">
...
</table>
</div>
# | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift |
---|---|---|---|---|---|---|---|---|
1 | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle |
2 | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle |
3 | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle |
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
# | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift | Overskrift |
---|---|---|---|---|---|---|---|---|
1 | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle |
2 | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle |
3 | Celle | Celle | Celle | Celle | Celle | Celle | Celle | Celle |
<div class="table-responsive-xl">
<table class="table">
...
</table>
</div>