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

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