in English

Tabeller

Dokumentasjon og eksempler for opt-in styling av tabeller (gitt deres utbredte bruk i JavaScript-plugins) med Bootstrap.

På denne siden

Oversikt

På grunn av den utbredte bruken av <table>elementer på tvers av tredjeparts widgets som kalendere og datovelgere, er Bootstraps tabeller opt-in . Legg til basisklassen .tabletil en hvilken som helst <table>, og utvid deretter med våre valgfrie modifikasjonsklasser eller egendefinerte stiler. Alle tabellstiler arves ikke i Bootstrap, noe som betyr at alle nestede tabeller kan styles uavhengig av overordnet.

Ved å bruke den mest grunnleggende tabellmarkeringen, ser du hvordan .table-baserte tabeller ser ut i Bootstrap.

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
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

Bruk kontekstuelle klasser til å fargelegge tabeller, tabellrader eller individuelle celler.

Klasse	Overskrift	Overskrift
Misligholde	Celle	Celle
Hoved	Celle	Celle
Sekundær	Celle	Celle
Suksess	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 hjelpeteknologier

Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .visually-hiddenklassen.

Aksentbord

Stripete rader

Bruk .table-stripedfor å legge til sebrastriper til en hvilken som helst tabellrad i <tbody>.

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

Stripete søyler

Bruk .table-striped-columnsfor å legge til sebrastriper til en hvilken som helst tabellkolonne.

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

Disse klassene kan også legges til tabellvarianter:

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

Sveverbare rader

Legg .table-hovertil for å aktivere en svevetilstand på tabellrader i en <tbody>.

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

Disse svevebare radene kan også kombineres med varianten med stripete rader:

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

Aktive bord

Uthev en tabellrad eller celle ved å legge til en .table-activeklasse.

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
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	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
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 variantene og tabellene med aksent?

For tabellene med aksent ( stripede rader , stripede kolonner , svevende rader og aktive tabeller ) brukte vi noen teknikker for å få disse effektene til å fungere for alle tabellvariantene våre :

Vi starter med å sette bakgrunnen til en tabellcelle med den --bs-table-bgegendefinerte egenskapen. Alle tabellvarianter angir deretter den egendefinerte egenskapen for å fargelegge tabellcellene. På denne måten får vi ikke problemer hvis halvtransparente farger brukes som tabellbakgrunn.
Deretter legger vi til en innfelt boksskygge på tabellcellene med et box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);lag på toppen av en spesifisert background-color. Fordi vi bruker en stor spredning og ingen uskarphet, vil fargen være monoton. Siden --bs-table-accent-bger deaktivert som standard, har vi ikke en standard boksskygge.
Når enten .table-striped, .table-striped-columns, .table-hovereller .table-activeklasser legges til, --bs-table-accent-bgsettes den til en semitransparent farge for å fargelegge bakgrunnen.
For hver bordvariant genererer vi en --bs-table-accent-bgfarge med høyest kontrast avhengig av den fargen. For eksempel er aksentfargen for .table-primarymørkere mens .table-darkden har en lysere aksentfarge.
Tekst- og kantfarger genereres på samme måte, og fargene deres arves som standard.

Bak kulissene ser det slik ut:

@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));
    $border-color: mix($color, $background, percentage($table-border-factor));

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

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Bordkanter

Border med kantlinjer

Legg .table-borderedtil kantlinjer på alle sider av tabellen og cellene.

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

Kantfargeverktøy kan legges til for å endre farger:

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

Bord uten grenser

Legg .table-borderlesstil for et bord uten rammer.

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

Små bord

Legg .table-smtil for å gjøre noe .tablemer kompakt ved å kutte alle cellene paddingi to.

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

Tabellgruppeinndelere

Legg til en tykkere kant, mørkere mellom tabellgrupper— <thead>, <tbody>, og <tfoot>—med .table-group-divider. Tilpass fargen ved å endre border-top-color(som vi for øyeblikket ikke tilbyr en verktøyklasse for for øyeblikket).

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

html

<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 class="table-group-divider">
    <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>

Vertikal justering

Tabellceller av <thead>er alltid vertikalt justert til bunnen. Tabellceller i <tbody>arver justeringen fra <table>og er justert til toppen som standard. Bruk vertikaljusteringsklassene for å justere på nytt der det er nødvendig.

Overskrift 1	Overskrift 2	Overskrift 3	Overskrift 4
Denne cellen arver `vertical-align: middle;`fra tabellen	Denne cellen arver `vertical-align: middle;`fra tabellen	Denne cellen arver `vertical-align: middle;`fra tabellen	Dette her er litt plassholdertekst, ment å ta opp ganske mye vertikal plass, for å demonstrere hvordan den vertikale justeringen fungerer i de foregående cellene.
Denne cellen arver `vertical-align: bottom;`fra tabellraden	Denne cellen arver `vertical-align: bottom;`fra tabellraden	Denne cellen arver `vertical-align: bottom;`fra tabellraden	Dette her er litt plassholdertekst, ment å ta opp ganske mye vertikal plass, for å demonstrere hvordan den vertikale justeringen fungerer i de foregående cellene.
Denne cellen arver `vertical-align: middle;`fra tabellen	Denne cellen arver `vertical-align: middle;`fra tabellen	Denne cellen er justert til toppen.	Dette her er litt plassholdertekst, ment å ta opp ganske mye vertikal plass, for å demonstrere hvordan den vertikale justeringen fungerer i de foregående cellene.

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

Hekking

Kantstiler, aktive stiler og tabellvarianter arves ikke av nestede tabeller.

Først

Siste

Håndtak

merke

Otto

@mdo

Overskrift	Overskrift	Overskrift
EN	Først	Siste
B	Først	Siste
C	Først	Siste

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

For å forhindre at stiler lekker til nestede tabeller, bruker vi underordnede kombinator- >velgeren ( ) i vår CSS. Siden vi må målrette alle tds og ths i thead, tbody, og tfoot, ville velgeren vår sett ganske lang ut uten den. Som sådan bruker vi den ganske merkelige .table > :not(caption) > * > *velgeren til å målrette alle tds og ths av .table, men ingen av noen potensielle nestede tabeller.

Vær oppmerksom på at hvis du legger til <tr>s som direkte underordnede av en tabell, vil disse <tr>bli pakket inn i en <tbody>som standard, og dermed får velgerne våre til å fungere etter hensikten.

Anatomi

Bordhode

I likhet med tabeller og mørke tabeller, bruk modifikasjonsklassene .table-lighteller .table-darkfor å få <thead>s til å virke lys eller mørkegrå.

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fuglen	@twitter

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

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fuglen	@twitter

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

Bordfot

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fuglen	@twitter
Bunntekst	Bunntekst	Bunntekst	Bunntekst

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

Bildetekster

A <caption>fungerer som en overskrift til en tabell. Den hjelper brukere med skjermlesere til å finne en tabell og forstå hva den handler om og bestemme om de vil lese den.

Liste over brukere
#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

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

Du kan også sette den <caption>på toppen av bordet med .caption-top.

Liste over brukere
#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fuglen	@twitter

html

<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 gjør det enkelt å rulle tabeller horisontalt. Gjør et hvilket som helst bord responsivt på tvers av alle visningsporter ved å pakke inn en .tablemed .table-responsive. Eller velg et maksimalt bruddpunkt som du vil ha en responsiv tabell med ved å bruke .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertikal klipping/trunkering

Responsive tabeller bruker overflow-y: hidden, som klipper av alt innhold som går utover bunn- eller toppkanten av tabellen. Spesielt kan dette klippe av rullegardinmenyer og andre tredjeparts widgets.

Alltid responsiv

På tvers av hvert bruddpunkt, bruk .table-responsivefor horisontalt rulling av 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>

Spesifikk bruddpunkt

Bruk .table-responsive{-sm|-md|-lg|-xl|-xxl}etter behov for å lage responsive tabeller opp til et bestemt bruddpunkt. Fra det bruddpunktet og oppover vil tabellen oppføre seg normalt og ikke rulle horisontalt.

Disse tabellene kan virke ødelagte inntil deres responsive stiler gjelder for bestemte visningsportbredder.

#	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:                 var(--#{$prefix}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:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$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

Faktorvariablene ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) brukes til å bestemme kontrasten i tabellvarianter.
Bortsett fra de lyse og mørke bordvariantene, lysnes temafargene av $table-bg-scalevariabelen.