Source

Tabellen

Dokumintaasje en foarbylden foar opt-in styling fan tabellen (jûn har foarkommende gebrûk yn JavaScript-plugins) mei Bootstrap.

Foarbylden

Fanwegen it wiidferspraat gebrûk fan tabellen oer widgets fan tredden lykas kalinders en datumkiezers, hawwe wy ús tabellen ûntworpen om oan te melden . Foegje gewoan de basisklasse .tableta oan elke <table>, wreidzje dan út mei oanpaste stilen as ús ferskate ynbegrepen modifierklassen.

Mei help fan de meast basale tabelmarkearring, hjir is hoe .table-basearre tabellen der útsjen yn Bootstrap. Alle tabelstilen binne erfd yn Bootstrap 4 , wat betsjut dat alle nestede tabellen op deselde manier wurde stylearre as de âlder.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @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>

Jo kinne de kleuren ek omkeare - mei ljochte tekst op donkere eftergrûnen - mei .table-dark.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @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>

Tafelkop opsjes

Similar to tabellen en tsjustere tabellen, brûk de modifier klassen .thead-lightof .thead-darkte meitsje <thead>s ferskine ljocht of tsjuster griis.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @twitter
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @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>

Striped rigen

Brûk .table-stripedom sebra-striping ta te foegjen oan elke tabelrige binnen de <tbody>.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @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>
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @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>

Bordered tafel

Foegje .table-borderedfoar grinzen oan alle kanten fan 'e tafel en sellen.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @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>
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @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>

Borderless tafel

Add .table-borderlessfoar in tafel sûnder grinzen.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @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-borderlesskin ek brûkt wurde op tsjustere tafels.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @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>

Hoverable rigen

Foegje .table-hoverta om in hoverstatus yn te skeakeljen op tabelrijen binnen in <tbody>.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @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>
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @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>

Lytse tafel

Foegje .table-smta om tabellen kompakter te meitsjen troch selpadding yn 'e helte te snijen.

# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @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>
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @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>

Kontekstuele klassen

Brûk kontekstuele klassen om tabelrijen of yndividuele sellen te kleurjen.

Klasse Heading Heading
Aktyf Sel Sel
Standert Sel Sel
Primêr Sel Sel
Sekundêr Sel Sel
Sukses Sel Sel
Gefaar Sel Sel
Warskôging Sel Sel
Info Sel Sel
Ljocht Sel Sel
Tsjuster Sel Sel 
<!-- 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>

Gewoane tabel eftergrûn farianten binne net beskikber mei de tsjustere tafel, lykwols, jo meie gebrûk meitsje fan tekst of eftergrûn nutsbedriuwen te berikken ferlykbere stilen.

# Heading Heading
1 Sel Sel
2 Sel Sel
3 Sel Sel
4 Sel Sel
5 Sel Sel
6 Sel Sel
7 Sel Sel
8 Sel Sel
9 Sel Sel 
<!-- 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>
Betsjutting oerbringe oan assistinte technologyen

It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .sr-onlyklasse.

Meitsje responsive tabellen troch elk .tablemei te wikkeljen .table-responsive{-sm|-md|-lg|-xl}, wêrtroch't de tabel horizontaal rôlje by elk max-widthbrekpunt fan oant (mar net ynklusyf) respektivelik 576px, 768px, 992px en 1120px.

Tink derom dat, om't browsers op it stuit gjin berikkontekstfragen stypje , wurkje wy om de beheiningen fan min-en max-foarheaksels en viewports mei fraksjonele breedtes (wat kinne foarkomme ûnder bepaalde betingsten op apparaten mei hege dpi, bygelyks) troch wearden mei hegere presyzje te brûken foar dizze fergelikingen .

Captions

A <caption>funksjonearret as in kop foar in tabel. It helpt brûkers mei skermlêzers om in tabel te finen en te begripen wêr't it oer giet en beslute as se it lêze wolle.

List fan brûkers
# Earste Lêst Handle
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @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>

Responsive tabellen

Responsive tabellen kinne tabellen mei gemak horizontaal rôlje. Meitsje eltse tafel responsyf oer alle viewports troch wrapping in .tablemei .table-responsive. Of kies in maksimale brekpunt wêrmei't jo in responsive tabel moatte hawwe mei .table-responsive{-sm|-md|-lg|-xl}.

Fertikale clipping / trunkaasje

Responsive tabellen meitsje gebrûk fan overflow-y: hidden, dy't elke ynhâld ôfknipt dy't boppe de ûnder- of bopperâne fan 'e tabel giet. Dit kin benammen dropdownmenu's en oare widgets fan tredden ôfknippe.

Altyd responsyf

Brûk elk brekpunt .table-responsivefoar horizontaal rôljen fan tabellen.

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

Breakpoint spesifyk

Brûk .table-responsive{-sm|-md|-lg|-xl}as nedich om responsive tabellen te meitsjen oant in bepaald brekpunt. Fan dat brekpunt en omheech, sil de tabel normaal gedrage en net horizontaal rôlje.

Dizze tabellen kinne brutsen ferskine oant har responsive stilen jilde op spesifike sichtportbreedtes.

# Heading Heading Heading Heading Heading Heading Heading Heading
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-sm">
  <table class="table">
    ...
  </table>
</div>
# Heading Heading Heading Heading Heading Heading Heading Heading
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-md">
  <table class="table">
    ...
  </table>
</div>
# Heading Heading Heading Heading Heading Heading Heading Heading
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-lg">
  <table class="table">
    ...
  </table>
</div>
# Heading Heading Heading Heading Heading Heading Heading Heading
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-xl">
  <table class="table">
    ...
  </table>
</div>