Fara í aðalefni Farðu í skjalaleiðsögn
in English

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

Þ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-success table-striped">
  ...
</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 afbrigð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 töflurnar með áherslum ( röndóttar raðir , 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-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));

    --#{$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));
  }
}

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>

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ð stillt við toppinn. 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
1 Mark Ottó @mdo
Fyrirsögn Fyrirsögn Fyrirsögn
A Fyrst Síðast
B Fyrst Síðast
C Fyrst Síðast
3 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 undarlega .table > :not(caption) > * > *útlitsvalann 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 
<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:                 $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%;

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