Tabeller

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

På den här sidan

Ö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

Mark

Otto

@mdo

Rubrik	Rubrik	Rubrik
A	Först	Sista
B	Först	Sista
C	Först	Sista

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.