Hoppa till huvudinnehållet Hoppa till dokumentnavigering
in English

Tabeller

Dokumentation och exempel för opt-in-stil av tabeller (med tanke på deras vanliga användning i JavaScript-plugins) med Bootstrap.

Översikt

På grund av den utbredda användningen av <table>element i tredjepartswidgets som kalendrar och datumväljare, är Bootstraps tabeller opt-in . Lägg till basklassen .tabletill valfri <table>och utöka sedan med våra valfria modifieringsklasser eller anpassade stilar. Alla tabellstilar ärvs inte i Bootstrap, vilket innebär att alla kapslade tabeller kan formateras oberoende av den överordnade.

Med den mest grundläggande tabelluppmärkningen, så här .tableser -baserade tabeller ut i Bootstrap.

# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln 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

Använd kontextuella klasser för att färglägga tabeller, tabellrader eller enskilda celler.

Klass Rubrik Rubrik
Standard Cell Cell
Primär Cell Cell
Sekundär Cell Cell
Framgång Cell Cell
Fara Cell Cell
Varning Cell Cell
Info Cell Cell
Ljus Cell Cell
Mörk Cell Cell
<!-- 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>
Förmedla mening till hjälpmedel

Att använda färg för att lägga till mening ger bara en visuell indikation som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (t.ex. den synliga texten), eller är inkluderad på andra sätt, såsom ytterligare text gömd med .visually-hiddenklassen.

Bord med accent

Randiga rader

Använd .table-stripedför att lägga till zebrastrimningar till valfri tabellrad inom <tbody>.

# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter
<table class="table table-striped">
  ...
</table>

Dessa klasser kan också läggas till i tabellvarianter:

# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter
<table class="table table-dark table-striped">
  ...
</table>
# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter
<table class="table table-success table-striped">
  ...
</table>

Svävbara rader

Lägg .table-hovertill för att aktivera ett hovringsläge på tabellrader inom en <tbody>.

# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter
<table class="table table-hover">
  ...
</table>
# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter
<table class="table table-dark table-hover">
  ...
</table>

Dessa svävbara rader kan också kombineras med den randiga varianten:

# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter
<table class="table table-striped table-hover">
  ...
</table>

Aktiva bord

Markera en tabellrad eller cell genom att lägga till en .table-activeklass.

# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln 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 Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln 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>

Hur fungerar varianterna och tabellerna med accent?

För tabellerna med accent ( randiga rader , svävbara rader och aktiva tabeller ) använde vi några tekniker för att få dessa effekter att fungera för alla våra tabellvarianter :

  • Vi börjar med att ställa in bakgrunden för en tabellcell med den --bs-table-bganpassade egenskapen. Alla tabellvarianter ställer sedan in den anpassade egenskapen för att färglägga tabellcellerna. På så sätt hamnar vi inte i problem om halvtransparenta färger används som bordsbakgrunder.
  • Sedan lägger vi till en infälld boxskugga på tabellcellerna med ett box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);lager ovanpå en angiven background-color. Eftersom vi använder en enorm spridning och ingen oskärpa blir färgen monoton. Eftersom --bs-table-accent-bgdet inte är inställt som standard har vi ingen standardboxskugga.
  • När antingen .table-striped, .table-hovereller .table-activeklasser läggs till, --bs-table-accent-bgställs den in på en halvtransparent färg för att färglägga bakgrunden.
  • För varje bordsvariant genererar vi en --bs-table-accent-bgfärg med högsta kontrast beroende på den färgen. Till exempel är accentfärgen för .table-primarymörkare medan den .table-darkhar en ljusare accentfärg.
  • Text- och kantfärger genereras på samma sätt och deras färger ärvs som standard.

Bakom kulisserna ser det ut så här:

@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));
  }
}

Bordskanter

Kantade bord

Lägg .table-borderedtill kanter på alla sidor av tabellen och cellerna.

# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter
<table class="table table-bordered">
  ...
</table>

Kantfärgsverktyg kan läggas till för att ändra färger:

# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter
<table class="table table-bordered border-primary">
  ...
</table>

Bord utan gränser

Lägg .table-borderlesstill för ett bord utan ramar.

# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter
<table class="table table-borderless">
  ...
</table>
# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter
<table class="table table-dark table-borderless">
  ...
</table>

Små bord

Lägg .table-smtill för att göra den .tablemer kompakt genom att halvera alla celler padding.

# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter
<table class="table table-sm">
  ...
</table>
# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter
<table class="table table-dark table-sm">
  ...
</table>

Vertikal inriktning

Tabellcellerna <thead>är alltid vertikalt inriktade mot botten. Tabellceller i <tbody>ärver sin justering från <table>och är justerade till toppen som standard. Använd klasserna för vertikal justering för att justera om det behövs.

Rubrik 1 Rubrik 2 Rubrik 3 Rubrik 4
Denna cell ärver vertical-align: middle;från tabellen Denna cell ärver vertical-align: middle;från tabellen Denna cell ärver vertical-align: middle;från tabellen Det här är lite platshållartext, avsedd att ta upp en hel del vertikalt utrymme, för att visa hur den vertikala justeringen fungerar i de föregående cellerna.
Denna cell ärver vertical-align: bottom;från tabellraden Denna cell ärver vertical-align: bottom;från tabellraden Denna cell ärver vertical-align: bottom;från tabellraden Det här är lite platshållartext, avsedd att ta upp en hel del vertikalt utrymme, för att visa hur den vertikala justeringen fungerar i de föregående cellerna.
Denna cell ärver vertical-align: middle;från tabellen Denna cell ärver vertical-align: middle;från tabellen Denna cell är inriktad mot toppen. Det här är lite platshållartext, avsedd att ta upp en hel del vertikalt utrymme, för att visa hur den vertikala justeringen fungerar i de föregående cellerna.
<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>

Häckande

Kantstilar, aktiva stilar och tabellvarianter ärvs inte av kapslade tabeller.

# Först Sista Hantera
1 Mark Otto @mdo
Rubrik Rubrik Rubrik
A Först Sista
B Först Sista
C Först Sista
3 Larry fågeln @Twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Hur häckning fungerar

För att förhindra att några stilar läcker till kapslade tabeller använder vi >väljaren underordnad kombinator ( ) i vår CSS. Eftersom vi måste rikta in oss på alla tds och ths i thead, tbody, och tfoot, skulle vår väljare se ganska lång ut utan den. Som sådan använder vi den ganska udda .table > :not(caption) > * > *väljaren för att rikta in alla tds och ths i .table, men ingen av några potentiella kapslade tabeller.

Observera att om du lägger till <tr>s som direkta underordnade av en tabell, kommer de <tr>att vara inslagna i en som <tbody>standard, vilket gör att våra väljare fungerar som avsett.

Anatomi

Bordshuvud

I likhet med tabeller och mörka tabeller, använd modifieringsklasserna .table-lighteller .table-darkför att få <thead>s att se ljust eller mörkgrå ut.

# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Larry fågeln @Twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Larry fågeln @Twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Bordsfot

# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Larry fågeln @Twitter
Sidfot Sidfot Sidfot Sidfot
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Bildtexter

A <caption>fungerar som en rubrik till en tabell. Det hjälper användare med skärmläsare att hitta en tabell och förstå vad den handlar om och bestämma om de vill läsa den.

Lista över användare
# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Du kan också lägga den <caption>på toppen av bordet med .caption-top.

Lista över användare
# Först Sista Hantera
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Larry fågeln @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>

Responsiva tabeller

Responsiva tabeller gör att tabeller enkelt kan rullas horisontellt. Gör vilket bord som helst responsivt i alla visningsportar genom att slå in en .tablemed .table-responsive. Eller välj en maximal brytpunkt som du vill ha en responsiv tabell med genom att använda .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertikal klippning/trunkering

Responsiva tabeller använder overflow-y: hidden, som klipper bort allt innehåll som går utanför bordets nedre eller övre kanter. I synnerhet kan detta klippa bort rullgardinsmenyer och andra widgets från tredje part.

Alltid lyhörd

Över varje brytpunkt, använd .table-responsiveför horisontell rullning av tabeller.

# Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Brytpunktsspecifik

Använd .table-responsive{-sm|-md|-lg|-xl|-xxl}efter behov för att skapa responsiva tabeller upp till en viss brytpunkt. Från den brytpunkten och uppåt kommer tabellen att bete sig normalt och inte rulla horisontellt.

Dessa tabeller kan verka trasiga tills deras responsiva stilar tillämpas på specifika visningsportbredder.

# Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
# Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
# Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
# Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
# Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
# Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik Rubrik
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
<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%;

Slinga

$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,
);

Anpassa

  • Faktorvariablerna ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) används för att bestämma kontrasten i tabellvarianter.
  • Förutom de ljusa och mörka bordsvarianterna ljusnar temafärgerna upp av $table-bg-levelvariabeln.