Spring til hovedindhold Spring til dokumentnavigation
in English

Tabeller

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

Oversigt

På grund af den udbredte brug af <table>elementer på tværs af tredjeparts widgets som kalendere og datovælgere, er Bootstraps tabeller tilvalgte . 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 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 .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

Borde 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 typografier og tabelvarianter nedarves ikke af indlejrede tabeller.

# Først Sidst Håndtere
1 Mærke Otto @mdo
Header Header Header
EN Først Sidst
B Først Sidst
C Først Sidst
3 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.