Töflur

Skjöl og dæmi um val á stíl töflur (miðað við algenga notkun þeirra í JavaScript viðbætur) með Bootstrap.

Á þessari síðu

Yfirlit

Vegna víðtækrar notkunar á <table>þáttum í búnaði þriðja aðila eins og dagatöl og dagsetningarval, eru töflur Bootstrap opt-in . Bættu grunnflokknum .tablevið hvaða tegund sem er <table>, stækkaðu síðan með valfrjálsum breytingaflokkum okkar eða sérsniðnum stílum. Allir töflustílar eru ekki erfir í Bootstrap, sem þýðir að hægt er að stíla hvaða hreiður töflur sem er óháð foreldri.

Með því að nota einföldustu töflumerkingar, hér er hvernig .table-undirstaða töflur líta út í Bootstrap.

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@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>

Afbrigði

Notaðu samhengisflokka til að lita töflur, töflulínur eða einstakar frumur.

bekk	Fyrirsögn	Fyrirsögn
Sjálfgefið	Cell	Cell
Aðal	Cell	Cell
Secondary	Cell	Cell
Árangur	Cell	Cell
Hætta	Cell	Cell
Viðvörun	Cell	Cell
Upplýsingar	Cell	Cell
Ljós	Cell	Cell
Myrkur	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>

Að miðla merkingu til hjálpartækja

Notkun lita til að bæta við merkingu gefur aðeins sjónræna vísbendingu, sem verður ekki miðlað til notenda hjálpartækni - eins og skjálesara. Gakktu úr skugga um að upplýsingar sem merktar eru með litnum séu annaðhvort augljósar af innihaldinu sjálfu (td sýnilegum texta), eða séu innifaldar með öðrum hætti, svo sem viðbótartexta sem er falinn í .visually-hiddenbekknum.

Hreimandi borð

Röndóttar raðir

Notaðu .table-stripedtil að bæta sebra-rönd við hvaða töflulínu sem er innan <tbody>.

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

Röndóttar súlur

Notaðu .table-striped-columnstil að bæta sebra-rönd við hvaða töfludálka sem er.

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

Þessum flokkum er einnig hægt að bæta við töfluafbrigði:

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

Hreyfanlegar raðir

Bæta við .table-hovertil að virkja sveimastöðu á töflulínum innan <tbody>.

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

Þessar sveigjanlegu raðir er einnig hægt að sameina með röndóttu raðirafbrigðinu:

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

Virkar töflur

Auðkenndu töflulínu eða reit með því að bæta við .table-activeflokki.

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@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>

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@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>

Hvernig virka afbrigðin og töflurnar með áherslum?

Fyrir áherslutöflurnar ( röndóttar raðir , röndóttar dálkar , sveigjanlegar línur og virkar töflur ), notuðum við nokkrar aðferðir til að láta þessi áhrif virka fyrir öll töfluafbrigði okkar :

Við byrjum á því að stilla bakgrunn töfluhólfs með --bs-table-bgsérsniðnum eiginleikum. Öll töfluafbrigði stilla síðan þann sérsniðna eiginleika til að lita töflufrumur. Þannig lendum við ekki í vandræðum ef hálfgagnsæir litir eru notaðir sem töflubakgrunnur.
Síðan bætum við innfelldum kassaskugga á töflufrumurnar með box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to layer ofan á hvaða tilgreindu background-color. Þar sem við notum mikla útbreiðslu og enga óskýrleika verður liturinn eintónn. Þar --bs-table-accent-bgsem sjálfgefið er óstillt höfum við ekki sjálfgefinn kassaskugga.
Þegar annað hvort .table-striped, .table-striped-columns, .table-hovereða .table-activeflokkum er bætt við --bs-table-accent-bger stillt á hálfgagnsæjan lit til að lita bakgrunninn.
Fyrir hvert borðafbrigði búum við til --bs-table-accent-bglit með hæstu birtuskilum eftir þeim lit. Til dæmis, hreim liturinn fyrir .table-primaryer dekkri en .table-darkhefur ljósari hreim lit.
Texti og rammalitir eru búnir til á sama hátt og litir þeirra erfast sjálfgefið.

Á bak við tjöldin lítur þetta svona ú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);
  }
}

Bordamörk

Borðar borðar

Bættu við .table-borderedfyrir ramma á öllum hliðum töflunnar og hólfa.

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

Hægt er að bæta við rammalitabúnaði til að breyta litum:

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

Borð án landamæra

Bættu við .table-borderlessfyrir borð án ramma.

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

Lítil borð

Bættu við .table-smtil að gera .tablemeira þétt með því að skera alla klefana paddingí tvennt.

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

Skiptir töfluhópa

Bættu við þykkari ramma, dekkri á milli töfluhópa— <thead>, <tbody>, og <tfoot>—með .table-group-divider. Sérsníddu litinn með því að breyta border-top-color(sem við bjóðum ekki upp á búnaðarflokk fyrir eins og er).

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@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>

Lóðrétt jöfnun

Tafla frumur af <thead>eru alltaf lóðrétt í takt við botninn. Töflufrumur í <tbody>erfa röðun sína frá <table>og eru sjálfgefið stilltar efst. Notaðu lóðrétta jöfnunarflokka til að endurstilla þar sem þörf krefur.

Fyrirsögn 1	Fyrirsögn 2	Fyrirsögn 3	Fyrirsögn 4
Þessi klefi erfir `vertical-align: middle;`frá töflunni	Þessi klefi erfir `vertical-align: middle;`frá töflunni	Þessi klefi erfir `vertical-align: middle;`frá töflunni	Þetta hér er nokkur staðsetningartexti, ætlaður til að taka töluvert af lóðréttu plássi, til að sýna fram á hvernig lóðrétt röðun virkar í hólfum á undan.
Þessi klefi erfir `vertical-align: bottom;`frá töflulínunni	Þessi klefi erfir `vertical-align: bottom;`frá töflulínunni	Þessi klefi erfir `vertical-align: bottom;`frá töflulínunni	Þetta hér er nokkur staðsetningartexti, ætlaður til að taka töluvert af lóðréttu plássi, til að sýna fram á hvernig lóðrétt röðun virkar í hólfum á undan.
Þessi klefi erfir `vertical-align: middle;`frá töflunni	Þessi klefi erfir `vertical-align: middle;`frá töflunni	Þessi klefi er í takt við toppinn.	Þetta hér er nokkur staðsetningartexti, ætlaður til að taka töluvert af lóðréttu plássi, til að sýna fram á hvernig lóðrétt röðun virkar í hólfum á undan.

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

Hreiður

Rammastílar, virkir stílar og töfluafbrigði erfast ekki af hreiðri töflum.

Fyrst

Síðast

Handfang

Mark

Ottó

@mdo

Fyrirsögn	Fyrirsögn	Fyrirsögn
A	Fyrst	Síðast
B	Fyrst	Síðast
C	Fyrst	Síðast

Larry

fuglinn

@twitter

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Hvernig varp virkar

Til að koma í veg fyrir að einhver stíll leki í hreiður töflur notum við barnasamsetningarvalann ( >) í CSS okkar. Þar sem við þurfum að miða á öll tds og ths í thead, tbody, og tfoot, myndi veljarinn okkar líta frekar lengi út án hans. Sem slík notum við frekar skrítið útlit .table > :not(caption) > * > *val til að miða á öll tds og ths .table, en ekkert af hugsanlegum hreiðri töflum.

Athugaðu að ef þú bætir við <tr>s sem beinum undirstöðum töflu, þá <tr>verður þeim <tbody>sjálfgefið pakkað inn í a, þannig að valarnir okkar virka eins og til er ætlast.

Líffærafræði

Borðhaus

Svipað og í töflum og dökkum töflum, notaðu breytingarflokkana .table-lighteða .table-darktil að láta <thead>s birtast ljós eða dökkgrátt.

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry	fuglinn	@twitter

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

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry	fuglinn	@twitter

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

Borðfótur

#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry	fuglinn	@twitter
Fótur	Fótur	Fótur	Fótur

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

Skýringartextar

A <caption>virkar eins og fyrirsögn fyrir töflu. Það hjálpar notendum með skjálesara að finna töflu og skilja hvað hún snýst um og ákveða hvort þeir vilji lesa hana.

Listi yfir notendur
#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry fuglinn		@twitter

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

Þú getur líka sett <caption>efst á borðið með .caption-top.

Listi yfir notendur
#	Fyrst	Síðast	Handfang
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry	fuglinn	@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>

Móttækilegar töflur

Móttækilegar töflur gera það kleift að fletta töflum lárétt á auðveldan hátt. Gerðu hvaða borð sem er móttækilegt í öllum útsýnisgáttum með því að vefja inn .tablemeð .table-responsive. Eða veldu hámarks viðmiðunarpunkt til að hafa móttækilega töflu upp í með því að nota .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Lóðrétt klipping/stýnun

Móttækilegar töflur nota overflow-y: hidden, sem klippir af allt efni sem fer út fyrir neðri eða efstu brúnir töflunnar. Sérstaklega getur þetta klippt af fellivalmyndum og öðrum búnaði þriðja aðila.

Alltaf móttækilegur

Notaðu fyrir hvern brotpunkt .table-responsivetil að fletta töflum lárétt.

#	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn
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>

Brotpunktur ákveðinn

Notaðu .table-responsive{-sm|-md|-lg|-xl|-xxl}eftir þörfum til að búa til móttækilegar töflur upp að tilteknu brotpunkti. Frá þeim brotpunkti og upp, mun taflan hegða sér eðlilega og fletta ekki lárétt.

Þessar töflur kunna að virðast bilaðar þar til móttækilegur stíll þeirra á við á tiltekinni breidd útsýnisgáttar.

#	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn
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

#	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn
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

#	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn
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

#	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn
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

#	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn
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

#	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn	Fyrirsögn
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

Breytur

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

Lykkju

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

Sérsníða

Stuðlabreyturnar ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) eru notaðar til að ákvarða andstæðan í töfluafbrigðum.
Burtséð frá ljósum og dökkum borðafbrigðum, eru þemalitir léttari af $table-bg-scalebreytunni.