Ugrás a fő tartalomhoz Ugrás a dokumentumok navigációjához
in English

Táblázatok

Dokumentáció és példák a táblázatok Bootstrap alkalmazással történő opt-in stílusához (a JavaScript beépülő modulokban való elterjedt használatuk miatt).

Áttekintés

Az <table>elemek széles körben elterjedt használata harmadik féltől származó widgetek, például naptárak és dátumválasztók között, a Bootstrap táblázatai be vannak kapcsolva . Adja hozzá az alaposztályt .tablebármelyikhez <table>, majd bővítse ki opcionális módosító osztályainkkal vagy egyéni stílusainkkal. A Bootstrap nem örökli az összes táblázatstílust, ami azt jelenti, hogy minden beágyazott tábla stílusozható a szülőtől függetlenül.

A legalapvetőbb táblajelölést használva a következőképpen .tablenéznek ki a -alapú táblák a Bootstrapben.

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

Változatok

A táblázatok, táblázatsorok vagy egyes cellák színezéséhez használjon környezetfüggő osztályokat.

Osztály Cím Cím
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 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>
Jelentést adni a kisegítő technológiáknak

A szín használata a jelentés hozzáadására 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 .visually-hiddenosztályba rejtett kiegészítő szöveggel szerepel.

Ékezetes táblázatok

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">
  ...
</table>

Ezek az osztályok a táblázatváltozatokhoz is hozzáadhatók:

# 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 table-striped">
  ...
</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-success table-striped">
  ...
</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">
  ...
</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-dark table-hover">
  ...
</table>

Ezek a lebegő sorok a csíkos változattal is kombinálhatók:

# 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-hover">
  ...
</table>

Aktív táblázatok

Osztály hozzáadásával jelöljön ki egy táblázatsort vagy cellát .table-active.

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

Hogyan működnek a változatok és az ékezetes táblázatok?

Az ékezetes táblázatoknál ( csíkos sorok , lebegő sorok és aktív táblázatok ) néhány technikát alkalmaztunk, hogy ezek az effektusok minden táblázatváltozatunknál működjenek :

  • Kezdjük azzal, hogy beállítjuk egy táblázatcella hátterét az --bs-table-bgegyéni tulajdonsággal. Ezután minden táblázatváltozat beállítja ezt az egyéni tulajdonságot a táblázat celláinak színezésére. Így nem esünk bajba, ha félig átlátszó színeket használunk az asztal háttereként.
  • Ezután a táblázat celláira egy beszúródoboz-árnyékot adunk, box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);hogy a megadott tetejére rétegezzen background-color. Mivel hatalmas szórást használunk és nincs elmosódás, a szín monoton lesz. Mivel --bs-table-accent-bgalapértelmezés szerint nincs beállítva, nincs alapértelmezett dobozárnyékunk.
  • Ha a .table-striped, .table-hovervagy .table-activeaz osztályokat hozzáadja, --bs-table-accent-bgakkor a háttér színezéséhez félig átlátszó színre lesz állítva.
  • Minden asztalváltozathoz --bs-table-accent-bgaz adott színtől függően a legnagyobb kontrasztú színt állítjuk elő. Például a kiemelő szín .table-primarysötétebb, míg .table-darkvilágosabb.
  • A szöveg és a szegélyszínek ugyanúgy generálódnak, és alapértelmezés szerint ezek színei öröklődnek.

A színfalak mögött így néz ki:

@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));
  }
}

Asztalszegélyek

Szegélyezett asztalok

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">
  ...
</table>

Szegélyszín segédprogramok hozzáadhatók a színek megváltoztatásához:

# 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 border-primary">
  ...
</table>

Táblázatok szegély nélkül

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">
  ...
</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-dark table-borderless">
  ...
</table>

Kis asztalok

Adja hozzá .table-sm, hogy .tablemég tömörebb legyen, ha az összes cellát paddingkettévágja.

# 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>
# 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 table-sm">
  ...
</table>

Függőleges igazítás

A táblázat cellái <thead>mindig függőlegesen az aljához igazítva vannak. A táblázat cellái alapértelmezés szerint a tetejétől <tbody>öröklik az igazítást, <table>és alapértelmezés szerint a tetejére igazodnak. Használja a függőleges igazítási osztályokat az újbóli igazításhoz, ahol szükséges.

1. címsor 2. címsor 3. címsor 4. címsor
vertical-align: middle;Ez a cella a táblázatból öröklődik vertical-align: middle;Ez a cella a táblázatból öröklődik vertical-align: middle;Ez a cella a táblázatból öröklődik Ez itt egy helyőrző szöveg, amelynek célja, hogy meglehetősen kis függőleges helyet foglaljon el, hogy bemutassa, hogyan működik a függőleges igazítás az előző cellákban.
vertical-align: bottom;Ez a cella a táblázat sorából öröklődik vertical-align: bottom;Ez a cella a táblázat sorából öröklődik vertical-align: bottom;Ez a cella a táblázat sorából öröklődik Ez itt egy helyőrző szöveg, amelynek célja, hogy meglehetősen kis függőleges helyet foglaljon el, hogy bemutassa, hogyan működik a függőleges igazítás az előző cellákban.
vertical-align: middle;Ez a cella a táblázatból öröklődik vertical-align: middle;Ez a cella a táblázatból öröklődik Ez a cella a tetejére van igazítva. Ez itt egy helyőrző szöveg, amelynek célja, hogy meglehetősen kis függőleges helyet foglaljon el, hogy bemutassa, hogyan működik a függőleges igazítás az előző cellákban.
<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>

Fészekrakás

A szegélystílusokat, az aktív stílusokat és a táblázatváltozatokat nem öröklik a beágyazott táblák.

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
Fejléc Fejléc Fejléc
A Első Utolsó
B Első Utolsó
C Első Utolsó
3 Larry a madár @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Hogyan működik a fészekrakás

Annak megakadályozására , hogy a stílusok kiszivárogjanak a beágyazott táblákba, a gyermekkombinátor ( >) választót használjuk a CSS-ben. Mivel az összes tds-t és ths-t meg kell céloznunk a thead, tbody, és tfootsorban, a választónk elég hosszúnak tűnne anélkül. Mint ilyen, a meglehetősen furcsa kinézetű .table > :not(caption) > * > *választót használjuk a lehetséges beágyazott táblák összes tds és ths célzására .table, de egyik lehetséges beágyazott táblát sem.

Ne feledje, hogy ha <tr>egy tábla közvetlen gyermekeként adja hozzá az s-t, <tr>akkor ezek alapértelmezés szerint a-ba vannak csomagolva <tbody>, így választóink a rendeltetésnek megfelelően működnek.

Anatómia

Asztalfej

A táblázatokhoz és a sötét táblázatokhoz hasonlóan használja a vagy módosító osztályokat .table-light, .table-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
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </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">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Asztalláb

# Első Utolsó Fogantyú
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @twitter
Lábléc Lábléc Lábléc Lábléc
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

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 table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

A -t <caption>az asztal tetejére is felteheti a -val .caption-top.

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

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ékeny az összes nézetablakban úgy, hogy egy karaktert a karakterrel .tabletördel .table-responsive. Vagy válasszon egy maximális töréspontot, amelyhez a reszponzív táblázatot a használatával kívánja elérni .table-responsive{-sm|-md|-lg|-xl|-xxl}.

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

A reszponzí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|-xxl}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 normálisan 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
# 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
# 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
# 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
# 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
# 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">
  <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

Változók

$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%;

Hurok

$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,
);

Testreszabás

  • A faktorváltozók ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) a táblázatváltozatok kontrasztjának meghatározására szolgálnak.
  • A világos és sötét asztali változatok mellett a téma színeit a $table-bg-levelváltozó világosabbá teszi.