Source

Táblázatok

Dokumentáció és példák a táblázatok választható stílusához (a JavaScript beépülő modulokban való elterjedt használatuk miatt) a Bootstrap segítségével.

Példák

Mivel a táblázatok széles körben elterjedtek a harmadik felek moduljaiban, például a naptárak és a dátumválasztók között, táblázatainkat úgy alakítottuk ki, hogy azok feliratkozásra alkalmasak legyenek . Csak adja hozzá az alaposztályt .tablebármelyikhez <table>, majd bővítse ki egyéni stílusokkal vagy különféle módosító osztályainkkal.

A legalapvetőbb táblajelölést használva a következőképpen .tablenéznek ki a -alapú táblák a Bootstrapben. A Bootstrap 4 minden táblázatstílust örököl , ami azt jelenti, hogy minden beágyazott tábla stílusa megegyezik a szülővel.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @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>

A színeket meg is fordíthatja – világos szöveggel sötét háttéren – a gombbal .table-dark.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @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>

Asztalfej opciók

A táblázatokhoz és a sötét táblázatokhoz hasonlóan használja a vagy módosító osztályokat .thead-light, .thead-darkhogy <thead>világos- vagy sötétszürkének tűnjön.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @twitter
# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @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>

Csíkos sorok

Használja .table-stripeda zebracsíkok hozzáadásához a táblázat bármely sorához a <tbody>.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @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>
# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @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>

Szegélyezett asztal

Adja hozzá .table-bordereda szegélyekhez a táblázat és a cellák minden oldalán.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @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>
# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @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>

Szegély nélküli asztal

Adja hozzá .table-borderlessa szegély nélküli táblázathoz.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @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-borderlesssötét asztalokon is használható.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @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>

Lebegő sorok

Hozzáadás .table-hovera lebegtetési állapot engedélyezéséhez a táblázaton belüli sorokon <tbody>.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @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>
# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @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>

Kis asztal

Hozzáadása .table-smaz asztalok kompaktabbá tételéhez a cellapárnázás felére vágásával.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @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>
# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry, a madár @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>

Kontextuális osztályok

Használjon környezetfüggő osztályokat a táblázat sorainak vagy egyes celláinak színezéséhez.

Osztály Cím Cím
Aktív Sejt Sejt
Alapértelmezett Sejt Sejt
Elsődleges Sejt Sejt
Másodlagos Sejt Sejt
Siker Sejt Sejt
Veszély Sejt Sejt
Figyelem Sejt Sejt
Info Sejt Sejt
Könnyű Sejt Sejt
Sötét Sejt Sejt 
<!-- 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>

A sötét táblával nem érhetők el normál táblaháttér-változatok, azonban használhat szöveges vagy háttér-segédprogramokat hasonló stílusok eléréséhez.

# Cím Cím
1 Sejt Sejt
2 Sejt Sejt
3 Sejt Sejt
4 Sejt Sejt
5 Sejt Sejt
6 Sejt Sejt
7 Sejt Sejt
8 Sejt Sejt
9 Sejt Sejt 
<!-- 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>
Jelentést adni a kisegítő technológiáknak

A színek jelentése csak vizuális jelzést ad, amelyet nem közvetítenek a kisegítő technológiák – például a képernyőolvasók – felhasználói számára. Győződjön meg arról, hogy a színnel jelölt információ vagy magából a tartalomból (pl. a látható szövegből) nyilvánvaló, vagy alternatív módon, például az .sr-onlyosztályba rejtett kiegészítő szöveggel szerepel.

Hozzon létre adaptív táblázatokat úgy, hogy bármelyiket körbezárja .tablea jellel .table-responsive{-sm|-md|-lg|-xl}, így a táblázat vízszintesen görgetett minden max-widthtörésponton legfeljebb 576 képpont, 768 képpont, 992 képpont és 1120 képpont (de nem beleértve) méretig.

Vegye figyelembe, hogy mivel a böngészők jelenleg nem támogatják a tartománykontextus-lekérdezéseket , megkerüljük a töredékszélességű előtagok min-ésmax- nézetablakok korlátozásait (amelyek bizonyos körülmények között előfordulhatnak például nagy dpi-s eszközökön), ha nagyobb pontosságú értékeket használunk ezekhez az összehasonlításokhoz. .

Feliratok

A <caption>függvény úgy működik, mint egy táblázat fejléce. Segít a képernyőolvasóval rendelkező felhasználóknak megtalálni a táblázatot, megérteni, miről szól, és eldönteni, hogy el akarják-e olvasni.

Felhasználók listája
# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @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>

Reszponzív táblázatok

A reszponzív táblázatok lehetővé teszik a táblázatok vízszintes görgetését. Tegye bármelyik táblázatot érzékenysé az összes nézetablakban úgy, hogy egy karaktert a karakterrel .tabletördel .table-responsive. Vagy válasszon egy maximális töréspontot, amelyre a reszponzív táblázat megfelel a segítségével .table-responsive{-sm|-md|-lg|-xl}.

Függőleges vágás/csonkítás

Az adaptív táblázatok a lehetőséget használják overflow-y: hidden, amely levág minden olyan tartalmat, amely túlmutat a táblázat alsó vagy felső szélén. Ez különösen levághatja a legördülő menüket és más, harmadik féltől származó widgeteket.

Mindig reagáló

Minden törésponton használja .table-responsivevízszintesen görgető táblázatokhoz.

# Cím Cím Cím Cím Cím Cím Cím Cím Cím
1 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt
2 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt
3 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Töréspont specifikus

Szükség szerint használja .table-responsive{-sm|-md|-lg|-xl}a reszponzív táblázatok létrehozásához egy adott töréspontig. Ettől a törésponttól kezdve a táblázat a szokásos módon fog viselkedni, és nem gördül vízszintesen.

Ezek a táblázatok töröttnek tűnhetnek mindaddig, amíg adaptív stílusaik nem érvényesek egy adott nézetablakszélességre.

# Cím Cím Cím Cím Cím Cím Cím Cím
1 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt
2 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt
3 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Cím Cím Cím Cím Cím Cím Cím Cím
1 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt
2 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt
3 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Cím Cím Cím Cím Cím Cím Cím Cím
1 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt
2 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt
3 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Cím Cím Cím Cím Cím Cím Cím Cím
1 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt
2 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt
3 Sejt Sejt Sejt Sejt Sejt Sejt Sejt Sejt 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>