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

Ezen az oldalon

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

Mark

Ottó

@mdo

Fejléc	Fejléc	Fejléc
A	Első	Utolsó
B	Első	Utolsó
C	Első	Utolsó

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.