Tabeller
Dokumentasjon og eksempler for opt-in styling av tabeller (gitt deres utbredte bruk i JavaScript-plugins) med Bootstrap.
På grunn av den utbredte bruken av tabeller på tvers av tredjeparts widgets som kalendere og datovelgere, har vi designet våre tabeller for å være opt-in . Bare legg til grunnklassen .table
til en hvilken som helst <table>
, og utvid deretter med egendefinerte stiler eller de forskjellige inkluderte modifikasjonsklassene.
Ved å bruke den mest grunnleggende tabellmarkeringen, ser du hvordan .table
-baserte tabeller ser ut i Bootstrap. Alle tabellstiler er arvet i Bootstrap 4 , noe som betyr at alle nestede tabeller vil bli stilt på samme måte som den overordnede.
# | Først | Siste | Håndtak |
---|---|---|---|
1 | merke | Otto | @mdo |
2 | Jacob | Thornton | @fett |
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 fargene – med lys tekst på mørk bakgrunn – med .table-dark
.
# | Først | Siste | Håndtak |
---|---|---|---|
1 | merke | Otto | @mdo |
2 | Jacob | Thornton | @fett |
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>
I likhet med tabeller og mørke tabeller, bruk modifikasjonsklassene .thead-light
eller .thead-dark
for å få <thead>
s til å virke lys eller mørkegrå.
# | Først | Siste | Håndtak |
---|---|---|---|
1 | merke | Otto | @mdo |
2 | Jacob | Thornton | @fett |
3 | Larry | fuglen |
# | Først | Siste | Håndtak |
---|---|---|---|
1 | merke | Otto | @mdo |
2 | Jacob | Thornton | @fett |
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>
Bruk .table-striped
for å legge til sebrastriper til en hvilken som helst tabellrad i <tbody>
.
# | Først | Siste | Håndtak |
---|---|---|---|
1 | merke | Otto | @mdo |
2 | Jacob | Thornton | @fett |
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 | Siste | Håndtak |
---|---|---|---|
1 | merke | Otto | @mdo |
2 | Jacob | Thornton | @fett |
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>
Legg .table-bordered
til kantlinjer på alle sider av tabellen og cellene.
# | Først | Siste | Håndtak |
---|---|---|---|
1 | merke | Otto | @mdo |
2 | Jacob | Thornton | @fett |
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 | Siste | Håndtak |
---|---|---|---|
1 | merke | Otto | @mdo |
2 | Jacob | Thornton | @fett |
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>
Legg .table-borderless
til for et bord uten rammer.
# | Først | Siste | Håndtak |
---|---|---|---|
1 | merke | Otto | @mdo |
2 | Jacob | Thornton | @fett |
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å brukes på mørke bord.
# | Først | Siste | Håndtak |
---|---|---|---|
1 | merke | Otto | @mdo |
2 | Jacob | Thornton | @fett |
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>
Legg .table-hover
til for å aktivere en svevetilstand på tabellrader i en <tbody>
.
# | Først | Siste | Håndtak |
---|---|---|---|
1 | merke | Otto | @mdo |
2 | Jacob | Thornton | @fett |
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 | Siste | Håndtak |
---|---|---|---|
1 | merke | Otto | @mdo |
2 | Jacob | Thornton | @fett |
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>
Legg .table-sm
til for å gjøre bordene mer kompakte ved å kutte cellepolstring i to.
# | Først | Siste | Håndtak |
---|---|---|---|
1 | merke | Otto | @mdo |
2 | Jacob | Thornton | @fett |
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 | Siste | Håndtak |
---|---|---|---|
1 | merke | Otto | @mdo |
2 | Jacob | Thornton | @fett |
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>
Bruk kontekstuelle klasser til å fargelegge tabellrader eller individuelle celler.
Klasse | Overskrift | Overskrift |
---|---|---|
Aktiv | Celle | Celle |
Misligholde | Celle | Celle |
Hoved | Celle | Celle |
Sekundær | Celle | Celle |
Suksess | 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>
Vanlige bordbakgrunnsvarianter er ikke tilgjengelige med det mørke bordet, men du kan bruke tekst- eller bakgrunnsverktøy for å oppnå lignende stiler.
# | 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 hjelpeteknologier
Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .sr-only
klassen.
Lag responsive tabeller ved å pakke noen .table
med .table-responsive{-sm|-md|-lg|-xl}
, slik at tabellen ruller horisontalt ved hvert max-width
bruddpunkt på opp til (men ikke inkludert) henholdsvis 576px, 768px, 992px og 1120px.
Merk at siden nettlesere for øyeblikket ikke støtter områdekontekstspørringer , omgår vi begrensningene for min-
og max-
prefikser og visningsporter med brøkbredder (som kan forekomme under visse forhold på enheter med høy dpi, for eksempel) ved å bruke verdier med høyere presisjon for disse sammenligningene .
A <caption>
fungerer som en overskrift til en tabell. Den hjelper brukere med skjermlesere til å finne en tabell og forstå hva den handler om og bestemme om de vil lese den.
# | Først | Siste | Håndtak |
---|---|---|---|
1 | merke | Otto | @mdo |
2 | Jacob | Thornton | @fett |
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 gjør det enkelt å rulle tabeller horisontalt. Gjør et hvilket som helst bord responsivt på tvers av alle visningsporter ved å pakke inn en .table
med .table-responsive
. Eller velg et maksimalt bruddpunkt som du vil ha en responsiv tabell med ved å bruke .table-responsive{-sm|-md|-lg|-xl}
.
Vertikal klipping/trunkering
Responsive tabeller bruker overflow-y: hidden
, som klipper av alt innhold som går utover bunn- eller toppkanten av tabellen. Spesielt kan dette klippe av rullegardinmenyer og andre tredjeparts widgets.
På tvers av hvert bruddpunkt, bruk .table-responsive
for horisontalt rulling av 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>
Bruk .table-responsive{-sm|-md|-lg|-xl}
etter behov for å lage responsive tabeller opp til et bestemt bruddpunkt. Fra det bruddpunktet og oppover vil tabellen oppføre seg normalt og ikke rulle horisontalt.
Disse tabellene kan virke ødelagte inntil deres responsive stiler gjelder for bestemte visningsportbredder.
# | 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>