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>

Bord uden kant

Tilføj .table-borderlesstil et bord uden rammer.

# Først Sidst Håndtere
1 Mærke Otto @mdo
2 Jacob Thornton @fed
3 Fuglen Larry @twitter 
<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-borderlesskan også bruges på mørke borde.

# Først Sidst Håndtere
1 Mærke Otto @mdo
2 Jacob Thornton @fed
3 Fuglen Larry @twitter 
<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-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.

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>