Gå til hovedinnhold Hopp til dokumentnavigering
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>

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-success table-striped">
  ...
</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 den stripete varianten:

# 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 , rader som kan beveges 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-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));

    --#{$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 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>

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
1 merke Otto @mdo
Overskrift Overskrift Overskrift
EN Først Siste
B Først Siste
C Først Siste
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 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 
<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:                 $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

  • 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-levelvariabelen.