Source

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.

Dæmi

Vegna mikillar notkunar á töflum í búnaði þriðja aðila eins og dagatöl og dagsetningarval, höfum við hannað töflurnar okkar þannig að þær séu opt-in . Bættu bara grunnflokknum við hvaða tegund .tablesem er <table>, stækkaðu síðan með sérsniðnum stílum eða ýmsum breytingaflokkum sem fylgja með.

Með því að nota einföldustu töflumerkingar, hér er hvernig .table-undirstaða töflur líta út í Bootstrap. Allir töflustílar eru arfir í Bootstrap 4 , sem þýðir að allar hreiður töflur verða stílaðar á sama hátt og foreldri.

# 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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Þú getur líka snúið við litunum—með ljósum texta á dökkum bakgrunni—með .table-dark.

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

Valkostir fyrir borðhaus

Svipað og í töflum og dökkum töflum, notaðu breytingarflokkana .thead-lighteða .thead-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
# Fyrst Síðast Handfang
1 Mark Ottó @mdo
2 Jakob Thornton @feiti
3 Larry fuglinn @twitter 
<table class="table">
  <thead class="thead-dark">
    <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>

<table class="table">
  <thead class="thead-light">
    <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>

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

Borðið borð

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

Borðalaust borð

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

.table-borderlesseinnig hægt að nota á dökk borð.

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

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

Lítið borð

Bættu við .table-smtil að gera borðin þéttari með því að klippa klefafyllingu í tvennt.

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

Samhengisnámskeið

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

bekk Fyrirsögn Fyrirsögn
Virkur Cell Cell
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 rows -->
<tr class="table-active">...</tr>

<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-active">...</td>

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

Venjuleg töflubakgrunnsafbrigði eru ekki fáanleg með dökku töflunni, hins vegar geturðu notað texta- eða bakgrunnsforrit til að ná svipuðum stílum.

# Fyrirsögn Fyrirsögn
1 Cell Cell
2 Cell Cell
3 Cell Cell
4 Cell Cell
5 Cell Cell
6 Cell Cell
7 Cell Cell
8 Cell Cell
9 Cell Cell 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</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 í .sr-onlybekknum.

Búðu til móttækilegar töflur með því að vefja hvaða töflu sem er .tablemeð , láttu .table-responsive{-sm|-md|-lg|-xl}töfluna fletta lárétt við hvern max-widthbrotpunkt upp að (en ekki með) 576px, 768px, 992px og 1120px, í sömu röð.

Athugaðu að þar sem vafrar styðja ekki sviðssamhengisfyrirspurnir eins og er , þá vinnum við í kringum takmarkanir á min-og max-forskeytum og útsýnisgluggum með brotabreiddum (sem getur átt sér stað við ákveðnar aðstæður á tækjum með háum dpi, til dæmis) með því að nota gildi með meiri nákvæmni fyrir þennan samanburð .

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">
  <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}.

Lóðrétt klipping/stýring

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}eftir þörfum til að búa til móttækilegar töflur upp að tilteknu brotpunkti. Frá þeim tímapunkti 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 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# 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-md">
  <table class="table">
    ...
  </table>
</div>
# 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-lg">
  <table class="table">
    ...
  </table>
</div>
# 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-xl">
  <table class="table">
    ...
  </table>
</div>