Gean nei haadynhâld Gean nei dokumintnavigaasje
Check
in English

Tabellen

Dokumintaasje en foarbylden foar opt-in styling fan tabellen (jûn har foarkommende gebrûk yn JavaScript-plugins) mei Bootstrap.

Op dizze side

Oersicht

Fanwegen it wiidferspraat gebrûk fan <table>eleminten oer widgets fan tredden lykas kalinders en datumkiezers, binne Bootstrap's tabellen opt-in . Foegje de basisklasse .tableta oan elke <table>, wreidzje dan út mei ús opsjonele modifikaasjeklassen as oanpaste stilen. Alle tabelstilen wurde net erfd yn Bootstrap, wat betsjuttet dat alle nestede tabellen ûnôfhinklik kinne wurde styleare fan 'e âlder.

Mei help fan de meast basale tabelmarkearring, hjir is hoe .table-basearre tabellen der útsjen yn Bootstrap.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @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>

Farianten

Brûk kontekstuele klassen om tabellen, tabelrijen of yndividuele sellen te kleurjen.

Klasse Heading Heading
Standert Sel Sel
Primêr Sel Sel
Sekundêr Sel Sel
Sukses Sel Sel
Gefaar Sel Sel
Warskôging Sel Sel
Info Sel Sel
Ljocht Sel Sel
Tsjuster Sel Sel 
<!-- 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>
Betsjutting oerbringe oan assistinte technologyen

It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .visually-hiddenklasse.

Accented tabellen

Striped rigen

Brûk .table-stripedom sebra-striping ta te foegjen oan elke tabelrige binnen de <tbody>.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-striped">
  ...
</table>

Gestreepte kolommen

Brûk .table-striped-columnsom sebra-striping ta te foegjen oan elke tabelkolom.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-striped-columns">
  ...
</table>

Dizze klassen kinne ek tafoege wurde oan tabelfarianten:

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-dark table-striped">
  ...
</table>
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-dark table-striped-columns">
  ...
</table>
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-success table-striped">
  ...
</table>
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-success table-striped-columns">
  ...
</table>

Hoverable rigen

Foegje .table-hoverta om in hoverstatus yn te skeakeljen op tabelrijen binnen in <tbody>.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-hover">
  ...
</table>
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-dark table-hover">
  ...
</table>

Dizze sweefbere rigen kinne ek kombineare wurde mei de fariant fan gestreepte rigen:

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-striped table-hover">
  ...
</table>

Aktive tabellen

Markearje in tabelrige of sel troch in .table-activeklasse ta te foegjen.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @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>
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @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>

Hoe wurkje de farianten en aksinttabellen?

Foar de aksintearre tabellen ( gestreepte rigen , gestreepte kolommen , sweefbere rigen en aktive tabellen ), hawwe wy wat techniken brûkt om dizze effekten te meitsjen foar al ús tabelfarianten :

  • Wy begjinne mei it ynstellen fan de eftergrûn fan in tabelsel mei de --bs-table-bgoanpaste eigenskip. Alle tabelfarianten set dan dat oanpaste eigenskip yn om de tabelsellen te kleurjen. Op dizze manier komme wy net yn problemen as semy-transparante kleuren wurde brûkt as tafeleftergrûnen.
  • Dan foegje wy in ynsetfakskaad ta oan 'e tabelsellen mei box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);in laach boppe op elke opjûne background-color. Om't wy in enoarme sprieding brûke en gjin wazige, sil de kleur monoton wêze. Sûnt --bs-table-accent-bgis standert net ynsteld, hawwe wy gjin standert fakskaad.
  • As .table-striped, .table-striped-columns, .table-hoverof .table-activeklassen wurde tafoege, --bs-table-accent-bgwurdt de ynsteld op in semytransparante kleur om de eftergrûn te kleurjen.
  • Foar elke tabelfariant generearje wy in --bs-table-accent-bgkleur mei it heechste kontrast ôfhinklik fan dy kleur. Bygelyks, de aksintkleur foar .table-primaryis donkerder, wylst .table-darkin lichtere aksintkleur hat.
  • Tekst- en rânekleuren wurde op deselde manier generearre, en har kleuren wurde standert erfd.

Efter de skermen sjocht it der sa út:

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

Tabel grinzen

Bordered tabellen

Foegje .table-borderedfoar grinzen oan alle kanten fan 'e tafel en sellen.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-bordered">
  ...
</table>

Utilities foar rânekleur kinne wurde tafoege om kleuren te feroarjen:

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-bordered border-primary">
  ...
</table>

Tafels sûnder grinzen

Add .table-borderlessfoar in tafel sûnder grinzen.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-borderless">
  ...
</table>
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-dark table-borderless">
  ...
</table>

Lytse tafels

Foegje .table-smta om .tablekompakter te meitsjen troch alle sel paddingyn 'e helte te snijen.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-sm">
  ...
</table>
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-dark table-sm">
  ...
</table>

Tabel groep dividers

Foegje in dikkere râne ta, dûnkerder tusken tabelgroepen- <thead>, <tbody>, en <tfoot>-mei .table-group-divider. Pas de kleur oan troch de te feroarjen border-top-color(dêr't wy op dit stuit gjin nutklasse foar leverje).

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @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>

Fertikale ôfstimming

Tabel sellen fan <thead>binne altyd fertikaal ôfstimd nei de boaiem. Tabelsellen yn <tbody>ervje har ôfstimming fan <table>en wurde standert ôfstimd nei de top. Brûk de fertikale ôfstimmingsklassen om opnij ôfstimme wêr't it nedich is.

Koptekst 1 Koptekst 2 Opskrift 3 Opskrift 4
Dizze sel erft vertical-align: middle;fan 'e tabel Dizze sel erft vertical-align: middle;fan 'e tabel Dizze sel erft vertical-align: middle;fan 'e tabel Dit hjir is wat plakhâldertekst, bedoeld om nochal wat fertikale romte yn te nimmen, om te demonstrearjen hoe't de fertikale ôfstimming wurket yn 'e foargeande sellen.
Dizze sel erft vertical-align: bottom;fan 'e tabelrige Dizze sel erft vertical-align: bottom;fan 'e tabelrige Dizze sel erft vertical-align: bottom;fan 'e tabelrige Dit hjir is wat plakhâldertekst, bedoeld om nochal wat fertikale romte yn te nimmen, om te demonstrearjen hoe't de fertikale ôfstimming wurket yn 'e foargeande sellen.
Dizze sel erft vertical-align: middle;fan 'e tabel Dizze sel erft vertical-align: middle;fan 'e tabel Dizze sel is rjochte op 'e top. Dit hjir is wat plakhâldertekst, bedoeld om nochal wat fertikale romte yn te nimmen, om te demonstrearjen hoe't de fertikale ôfstimming wurket yn 'e foargeande sellen. 
<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>

Nesting

Rânestilen, aktive stilen en tabelfarianten wurde net erfd troch geneste tabellen.

# Earste Lêst Handle
1 Merk Otto @mdo
Koptekst Koptekst Koptekst
IN Earste Lêst
B Earste Lêst
C Earste Lêst
3 Larry de fûgel @twitter 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Hoe nesting wurket

Om foar te kommen dat stilen lekken nei nestede tabellen, brûke wy de >seleksje fan bernekombinator ( ) yn ús CSS. Sûnt wy moatte rjochtsje op alle tds en ths yn de thead, tbody, en tfoot, soe ús selector sjen moai lang sûnder it. As sadanich, wy brûke de nochal ûneven looking .table > :not(caption) > * > *selector te rjochtsjen op alle tds en ths fan de.table , mar net ien fan alle potinsjele nested tabellen.

Tink derom dat as jo tafoegje <tr>s as direkte bern fan in tabel, dy <tr>sille wurde ferpakt yn in <tbody>standert, sadat ús selectors wurkje as bedoeld.

Anatomy

Tafelkop

Similar to tabellen en tsjustere tabellen, brûk de modifier klassen .table-lightof .table-darkte meitsje <thead>s ferskine ljocht of tsjuster griis.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @twitter 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @twitter 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Tafelfoet

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @twitter
Fuottekst Fuottekst Fuottekst Fuottekst 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Captions

A <caption>funksjonearret as in kop foar in tabel. It helpt brûkers mei skermlêzers om in tabel te finen en te begripen wêr't it oer giet en beslute as se it lêze wolle.

List fan brûkers
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Jo kinne ek sette de <caption>boppe op 'e tafel mei .caption-top.

List fan brûkers
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @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 tabellen

Responsive tabellen kinne tabellen mei gemak horizontaal rôlje. Meitsje eltse tafel responsyf oer alle viewports troch wrapping in .tablemei .table-responsive. Of kies in maksimale brekpunt wêrmei't jo in responsive tabel moatte hawwe mei .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Fertikale clipping / trunkaasje

Responsive tabellen meitsje gebrûk fan overflow-y: hidden, dy't elke ynhâld ôfknipt dy't boppe de ûnder- of bopperâne fan 'e tabel giet. Dit kin benammen dropdownmenu's en oare widgets fan tredden ôfknippe.

Altyd responsyf

Brûk elk brekpunt .table-responsivefoar horizontaal rôljen fan tabellen.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Sel Sel Sel Sel Sel Sel Sel Sel Sel
2 Sel Sel Sel Sel Sel Sel Sel Sel Sel
3 Sel Sel Sel Sel Sel Sel Sel Sel Sel 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint spesifyk

Brûk .table-responsive{-sm|-md|-lg|-xl|-xxl}as nedich om responsive tabellen te meitsjen oant in bepaald brekpunt. Fan dat brekpunt en omheech, sil de tabel normaal gedrage en net horizontaal rôlje.

Dizze tabellen kinne brutsen ferskine oant har responsive stilen jilde op spesifike sichtportbreedtes.

# Heading Heading Heading Heading Heading Heading Heading Heading
1 Sel Sel Sel Sel Sel Sel Sel Sel
2 Sel Sel Sel Sel Sel Sel Sel Sel
3 Sel Sel Sel Sel Sel Sel Sel Sel
# Heading Heading Heading Heading Heading Heading Heading Heading
1 Sel Sel Sel Sel Sel Sel Sel Sel
2 Sel Sel Sel Sel Sel Sel Sel Sel
3 Sel Sel Sel Sel Sel Sel Sel Sel
# Heading Heading Heading Heading Heading Heading Heading Heading
1 Sel Sel Sel Sel Sel Sel Sel Sel
2 Sel Sel Sel Sel Sel Sel Sel Sel
3 Sel Sel Sel Sel Sel Sel Sel Sel
# Heading Heading Heading Heading Heading Heading Heading Heading
1 Sel Sel Sel Sel Sel Sel Sel Sel
2 Sel Sel Sel Sel Sel Sel Sel Sel
3 Sel Sel Sel Sel Sel Sel Sel Sel
# Heading Heading Heading Heading Heading Heading Heading Heading
1 Sel Sel Sel Sel Sel Sel Sel Sel
2 Sel Sel Sel Sel Sel Sel Sel Sel
3 Sel Sel Sel Sel Sel Sel Sel Sel
# Heading Heading Heading Heading Heading Heading Heading Heading
1 Sel Sel Sel Sel Sel Sel Sel Sel
2 Sel Sel Sel Sel Sel Sel Sel Sel
3 Sel Sel Sel Sel Sel Sel Sel Sel 
<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

Fariabelen

$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%;

Loop

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

Oanpasse

  • De faktorfariabelen ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) wurde brûkt om de kontrast yn tabelfarianten te bepalen.
  • Neist de ljochte en tsjustere tafelfarianten wurde temakleuren ferljochte troch de $table-bg-scalefariabele.