Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
Check
in English

Tabelle

Dokumentasie en voorbeelde vir intekening-stilering van tabelle (gegewe hul algemene gebruik in JavaScript-inproppe) met Bootstrap.

Op hierdie bladsy

Oorsig

As gevolg van die wydverspreide gebruik van <table>elemente oor derdeparty-legstukke soos kalenders en datumkiesers, kan Bootstrap se tabelle ingeskryf word . Voeg die basisklas .tableby enige <table>, en brei dan uit met ons opsionele wysigerklasse of pasgemaakte style. Alle tabelstyle word nie in Bootstrap geërf nie, wat beteken dat enige geneste tabelle onafhanklik van die ouer gestileer kan word.

Deur die mees basiese tabelopmaak te gebruik, is hier hoe .tablegebaseerde tabelle in Bootstrap lyk.

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @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>

Variante

Gebruik kontekstuele klasse om tabelle, tabelrye of individuele selle in te kleur.

Klas Opskrif Opskrif
Verstek Sel Sel
Primêr Sel Sel
Sekondêr Sel Sel
Sukses Sel Sel
Gevaar Sel Sel
Waarskuwing Sel Sel
Inligting Sel Sel
Lig Sel Sel
Donker 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>
Dra betekenis aan ondersteunende tegnologieë oor

Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .visually-hiddenklas versteek is.

Geaksenteerde tafels

Gestreepte rye

Gebruik .table-stripedom sebrastrepe by enige tabelry binne die <tbody>.

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-striped">
  ...
</table>

Gestreepte kolomme

Gebruik .table-striped-columnsom sebrastrepe by enige tabelkolom te voeg.

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-striped-columns">
  ...
</table>

Hierdie klasse kan ook by tabelvariante gevoeg word:

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-dark table-striped">
  ...
</table>
# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-dark table-striped-columns">
  ...
</table>
# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-success table-striped">
  ...
</table>
# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-success table-striped-columns">
  ...
</table>

Beweegbare rye

Voeg .table-hoverby om 'n sweeftoestand op tabelrye binne 'n <tbody>.

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-hover">
  ...
</table>
# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-dark table-hover">
  ...
</table>

Hierdie sweefbare rye kan ook gekombineer word met die gestreepte rye-variant:

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-striped table-hover">
  ...
</table>

Aktiewe tafels

Merk 'n tabelry of sel deur 'n .table-activeklas by te voeg.

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @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>
# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @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 werk die variante en aksenttabelle?

Vir die aksenttabelle ( gestreepte rye , gestreepte kolomme , beweegbare rye en aktiewe tabelle ), het ons 'n paar tegnieke gebruik om hierdie effekte vir al ons tabelvariante te laat werk :

  • Ons begin deur die agtergrond van 'n tabelsel met die --bs-table-bgpasgemaakte eienskap te stel. Alle tabelvariante stel dan daardie pasgemaakte eienskap om die tabelselle in te kleur. Op hierdie manier kom ons nie in die moeilikheid as semi-deursigtige kleure as tafelagtergronde gebruik word nie.
  • Dan voeg ons 'n insetkasskaduwee op die tabelselle by box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);met 'n laag bo-op enige gespesifiseerde background-color. Omdat ons 'n groot verspreiding gebruik en geen vervaag nie, sal die kleur eentonig wees. Aangesien --bs-table-accent-bgdit by verstek gedeaktiveer is, het ons nie 'n verstekkasskadu nie.
  • Wanneer óf .table-striped, .table-striped-columns, .table-hoverof .table-activeklasse bygevoeg word, word die --bs-table-accent-bgop 'n semi-deursigtige kleur gestel om die agtergrond in te kleur.
  • Vir elke tabelvariant genereer ons 'n --bs-table-accent-bgkleur met die hoogste kontras, afhangende van daardie kleur. Byvoorbeeld, die aksentkleur vir .table-primaryis donkerder terwyl .table-darkdit 'n ligter aksentkleur het.
  • Teks- en randkleure word op dieselfde manier gegenereer, en hul kleure word by verstek geërf.

Agter die skerms lyk dit so:

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

Tafelrande

Borde met omranding

Voeg by .table-borderedvir grense aan alle kante van die tabel en selle.

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-bordered">
  ...
</table>

Randkleurhulpmiddels kan bygevoeg word om kleure te verander:

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-bordered border-primary">
  ...
</table>

Tafels sonder grense

Voeg by .table-borderlessvir 'n tafel sonder grense.

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-borderless">
  ...
</table>
# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-dark table-borderless">
  ...
</table>

Klein tafeltjies

Voeg .table-smby om .tablemeer kompak te maak deur al die sel paddingin die helfte te sny.

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-sm">
  ...
</table>
# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-dark table-sm">
  ...
</table>

Tabelgroepverdelers

Voeg 'n dikker rand by, donkerder tussen tabelgroepe— <thead>, <tbody>, en <tfoot>—met .table-group-divider. Pas die kleur aan deur die te verander border-top-color(waarvoor ons tans nie 'n nutsklas voorsien nie).

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @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>

Vertikale belyning

Tabel selle van <thead>is altyd vertikaal in lyn met die onderkant. Tabelselle in <tbody>erf hul belyning van <table>en word by verstek na bo belyn. Gebruik die vertikale belyningsklasse om te herbelyn waar nodig.

Opskrif 1 Opskrif 2 Opskrif 3 Opskrif 4
Hierdie sel erf vertical-align: middle;van die tabel Hierdie sel erf vertical-align: middle;van die tabel Hierdie sel erf vertical-align: middle;van die tabel Hierdie hier is 'n paar plekhouer-teks wat bedoel is om nogal 'n bietjie vertikale spasie op te neem, om te demonstreer hoe die vertikale belyning in die voorafgaande selle werk.
Hierdie sel erf vertical-align: bottom;van die tabelry Hierdie sel erf vertical-align: bottom;van die tabelry Hierdie sel erf vertical-align: bottom;van die tabelry Hierdie hier is 'n paar plekhouer-teks wat bedoel is om nogal 'n bietjie vertikale spasie op te neem, om te demonstreer hoe die vertikale belyning in die voorafgaande selle werk.
Hierdie sel erf vertical-align: middle;van die tabel Hierdie sel erf vertical-align: middle;van die tabel Hierdie sel is na bo in lyn. Hierdie hier is 'n paar plekhouer-teks wat bedoel is om nogal 'n bietjie vertikale spasie op te neem, om te demonstreer hoe die vertikale belyning in die voorafgaande selle werk. 
<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>

Nestel

Randstyle, aktiewe style en tabelvariante word nie deur geneste tabelle geërf nie.

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
Opskrif Opskrif Opskrif
A Eerstens Laaste
B Eerstens Laaste
C Eerstens Laaste
3 Larry die voël @twitter 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Hoe nes werk

Om te verhoed dat enige style na geneste tabelle lek, gebruik ons ​​die kinderkombineerder ( >)-kieser in ons CSS. Aangesien ons al die tds en ths in die thead, tbody, en tfoot, moet teiken, sal ons kieser redelik lank daarsonder lyk. As sodanig gebruik ons ​​die .table > :not(caption) > * > *keurder wat nogal vreemd lyk om alle tds en ths van die te teiken .table, maar geen van enige potensiële geneste tabelle nie.

Let daarop dat as jy <tr>s as direkte kinders van 'n tabel byvoeg, dit by verstek <tr>in 'n toegedraai sal word <tbody>, wat ons keurders sal laat werk soos bedoel.

Anatomie

Tafelkop

Soortgelyk aan tabelle en donker tabelle, gebruik die wysigerklasse .table-lightof .table-darkom <thead>s lig of donkergrys te laat lyk.

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Tafelvoet

# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter
Voetskrif Voetskrif Voetskrif Voetskrif 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Onderskrifte

A <caption>funksioneer soos 'n opskrif vir 'n tabel. Dit help gebruikers met skermlesers om 'n tabel te vind en te verstaan ​​waaroor dit gaan en te besluit of hulle dit wil lees.

Lys van gebruikers
# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Jy kan ook <caption>die bo-op die tafel sit met .caption-top.

Lys van gebruikers
# Eerstens Laaste Hanteer
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @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>

Responsiewe tabelle

Responsiewe tabelle laat tabelle toe om met gemak horisontaal te blaai. Maak enige tabel responsief oor alle kykpoorte deur 'n .tablemet .table-responsive. Of kies 'n maksimum breekpunt waarmee jy 'n responsiewe tabel moet hê deur .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertikale knip/afkapping

Responsiewe tabelle maak gebruik van overflow-y: hidden, wat enige inhoud afknip wat verder gaan as die onderste of boonste rande van die tabel. Dit kan veral aftrekkieslyste en ander derdeparty-legstukke afknip.

Altyd responsief

Oor elke breekpunt, gebruik .table-responsiveom tabelle horisontaal te blaai.

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

Breekpunt spesifiek

Gebruik .table-responsive{-sm|-md|-lg|-xl|-xxl}soos nodig om responsiewe tabelle tot by 'n spesifieke breekpunt te skep. Vanaf daardie breekpunt en hoër sal die tabel normaal optree en nie horisontaal blaai nie.

Hierdie tabelle kan dalk gebroke lyk totdat hul responsiewe style op spesifieke kykpoortwydtes van toepassing is.

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

Veranderlikes

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

Lus

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

Pasmaak

  • Die faktorveranderlikes ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) word gebruik om die kontras in tabelvariante te bepaal.
  • Afgesien van die ligte en donker tafelvariante, word temakleure verlig deur die $table-bg-scaleveranderlike.