Tabeller

Dokumentation og eksempler på opt-in-stiling af tabeller (i betragtning af deres udbredte brug i JavaScript-plugins) med Bootstrap.

På denne side

Oversigt

På grund af den udbredte brug af <table>elementer på tværs af tredjeparts widgets som kalendere og datovælgere, er Bootstraps tabeller opt-in . Tilføj basisklassen .tabletil enhver <table>, og udvid derefter med vores valgfri modifikatorklasser eller brugerdefinerede stilarter. Alle tabelstile nedarves ikke i Bootstrap, hvilket betyder, at alle indlejrede tabeller kan styles uafhængigt af overordnet.

Ved at bruge den mest grundlæggende tabelmarkering kan du se her, hvordan .table-baserede tabeller ser ud i Bootstrap.

#	Først	Sidst	Håndtere
1	Mærke	Otto	@mdo
2	Jacob	Thornton	@fed
3	Fuglen Larry		@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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Varianter

Brug kontekstuelle klasser til at farve tabeller, tabelrækker eller individuelle celler.

Klasse	Overskrift	Overskrift
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 tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>

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 informationer, 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 .visually-hiddenklassen.

Borde med accent

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

<table class="table table-striped">
  ...
</table>

Disse klasser kan også føjes til tabelvarianter:

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

<table class="table table-dark table-striped">
  ...
</table>

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

<table class="table table-success table-striped">
  ...
</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">
  ...
</table>

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

<table class="table table-dark table-hover">
  ...
</table>

Disse svæverækker kan også kombineres med den stribede variant:

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

<table class="table table-striped table-hover">
  ...
</table>

Aktive borde

Fremhæv en tabelrække eller celle ved at tilføje en .table-activeklasse.

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

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">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-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Hvordan fungerer varianterne og tabellerne med accent?

Til tabellerne med accent ( stribede rækker , rækker, der kan svæves og aktive tabeller ), brugte vi nogle teknikker til at få disse effekter til at fungere for alle vores tabelvarianter :

Vi starter med at indstille baggrunden for en tabelcelle med den --bs-table-bgtilpassede egenskab. Alle tabelvarianter indstiller derefter den brugerdefinerede egenskab til at farvelægge tabelcellerne. På denne måde kommer vi ikke i problemer, hvis der bruges semi-transparente farver som bordbaggrunde.
Derefter tilføjer vi en indsat boksskygge på tabelcellerne med box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);et lag oven på en hvilken som helst specificeret background-color. Fordi vi bruger en enorm spredning og ingen sløring, bliver farven monoton. Da --bs-table-accent-bgden er deaktiveret som standard, har vi ikke en standard boksskygge.
Når enten .table-striped, .table-hovereller .table-activeklasser tilføjes, --bs-table-accent-bgindstilles den til en semitransparent farve for at farvelægge baggrunden.
For hver bordvariant genererer vi en --bs-table-accent-bgfarve med den højeste kontrast afhængigt af den farve. For eksempel er accentfarven for .table-primarymørkere, mens .table-darkden har en lysere accentfarve.
Tekst- og kantfarver genereres på samme måde, og deres farver nedarves som standard.

Bag kulisserne ser det sådan ud:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Bordkanter

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">
  ...
</table>

Kantfarveværktøjer kan tilføjes for at ændre farver:

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

<table class="table table-bordered border-primary">
  ...
</table>

Borde uden grænser

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">
  ...
</table>

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

<table class="table table-dark table-borderless">
  ...
</table>

Små borde

Tilføj .table-smfor at gøre .tablemere kompakt ved at skære alle celler paddingi to.

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

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

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

<table class="table table-dark table-sm">
  ...
</table>

Lodret justering

Tabelceller af <thead>er altid lodret justeret til bunden. Tabelceller i <tbody>arver deres justering fra <table>og justeres til toppen som standard. Brug de vertikale align -klasser til at genjustere, hvor det er nødvendigt.

Overskrift 1	Overskrift 2	Overskrift 3	Overskrift 4
Denne celle arver `vertical-align: middle;`fra tabellen	Denne celle arver `vertical-align: middle;`fra tabellen	Denne celle arver `vertical-align: middle;`fra tabellen	Dette her er noget pladsholdertekst, beregnet til at optage en del lodret plads, for at demonstrere, hvordan den lodrette justering fungerer i de foregående celler.
Denne celle arver `vertical-align: bottom;`fra tabelrækken	Denne celle arver `vertical-align: bottom;`fra tabelrækken	Denne celle arver `vertical-align: bottom;`fra tabelrækken	Dette her er noget pladsholdertekst, beregnet til at optage en del lodret plads, for at demonstrere, hvordan den lodrette justering fungerer i de foregående celler.
Denne celle arver `vertical-align: middle;`fra tabellen	Denne celle arver `vertical-align: middle;`fra tabellen	Denne celle er justeret til toppen.	Dette her er noget pladsholdertekst, beregnet til at optage en del lodret plads, for at demonstrere, hvordan den lodrette justering fungerer i de foregående celler.

<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Indlejring

Kantstile, aktive stilarter og tabelvarianter nedarves ikke af indlejrede tabeller.

Først

Sidst

Håndtere

Mærke

Otto

@mdo

Header	Header	Header
EN	Først	Sidst
B	Først	Sidst
C	Først	Sidst

Larry

fuglen

@twitter

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Hvordan nesting fungerer

For at forhindre , at stilarter lækker til indlejrede tabeller, bruger vi underordnet kombinator ( >)-vælgeren i vores CSS. Da vi skal målrette mod alle tds og ths i thead, tbody, og tfoot, ville vores vælger se ret lang ud uden den. Som sådan bruger vi den ret mærkelige .table > :not(caption) > * > *udvælger til at målrette mod alle tds og ths i .table, men ingen af nogen potentielle indlejrede tabeller.

Bemærk, at hvis du tilføjer <tr>s som direkte underordnede af en tabel, vil disse <tr>blive pakket ind i en <tbody>som standard, hvilket får vores vælgere til at fungere efter hensigten.

Anatomi

Bordhoved

I lighed med tabeller og mørke tabeller, brug modifikatorklasserne .table-lighteller .table-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

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

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

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Bordfod

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

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

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

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Du kan også sætte den <caption>på toppen af bordet med .caption-top.

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-top">
  <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|-xxl}.

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

#	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

#	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

#	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

#	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

#	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">
  <table class="table">
    ...
  </table>
</div>

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

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

Sass

Variabler

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Løkke

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Tilpasning

Faktorvariablerne ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) bruges til at bestemme kontrasten i tabelvarianter.
Bortset fra de lyse og mørke bordvarianter lysnes temafarverne af $table-bg-levelvariablen.