Source

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 .tabletil 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	@twitter

<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	@twitter

<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-lighteller .thead-darkfor 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	@twitter

#	Først	Sidst	Håndtere
1	Mærke	Otto	@mdo
2	Jacob	Thornton	@fed
3	Larry	fuglen	@twitter

<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-stripedtil 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	@twitter

<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	@twitter

<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-borderedfor 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		@twitter

<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		@twitter

<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>

Svævebare rækker

Tilføj .table-hoverfor 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		@twitter

<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		@twitter

<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-smfor 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		@twitter

<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		@twitter

<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-onlyklassen.

Opret responsive tabeller ved at ombryde alle .tablemed .table-responsive{-sm|-md|-lg|-xl}, hvilket får tabellen til at rulle vandret ved hvert max-widthbrudpunkt 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.

Liste over brugere
#	Først	Sidst	Håndtere
1	Mærke	Otto	@mdo
2	Jacob	Thornton	@fed
3	Larry	fuglen	@twitter

<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 .tablemed .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-responsivetil 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.

#	Overskrift	Overskrift	Overskrift	Overskrift	Overskrift
1	Celle	Celle	Celle	Celle	Celle
2	Celle	Celle	Celle	Celle	Celle
3	Celle	Celle	Celle	Celle	Celle

#	Overskrift	Overskrift	Overskrift	Overskrift	Overskrift
1	Celle	Celle	Celle	Celle	Celle
2	Celle	Celle	Celle	Celle	Celle
3	Celle	Celle	Celle	Celle	Celle

#	Overskrift	Overskrift	Overskrift	Overskrift	Overskrift
1	Celle	Celle	Celle	Celle	Celle
2	Celle	Celle	Celle	Celle	Celle
3	Celle	Celle	Celle	Celle	Celle

#	Overskrift	Overskrift	Overskrift	Overskrift	Overskrift
1	Celle	Celle	Celle	Celle	Celle
2	Celle	Celle	Celle	Celle	Celle
3	Celle	Celle	Celle	Celle	Celle

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>