in English

Lentelės

Dokumentai ir pavyzdžiai, kaip pasirinkti lentelių stilių (atsižvelgiant į jų paplitimą „JavaScript“ papildiniuose) naudojant „Bootstrap“.

Šiame puslapyje

Apžvalga

Kadangi <table>elementai plačiai naudojami trečiųjų šalių valdikliuose, pvz., kalendoriuose ir datos rinkikliuose, „Bootstrap“ lentelės pasirenkamos . Pridėkite bazinę klasę .tableprie bet kurios <table>, tada išplėskite naudodami pasirenkamas modifikavimo klases arba pasirinktinius stilius. Visi lentelių stiliai nėra paveldimi Bootstrap, o tai reiškia, kad bet kokios įdėtos lentelės gali būti stilizuotos nepriklausomai nuo pirminės.

Naudojant paprasčiausią lentelės žymėjimą, štai kaip .table„Bootstrap“ atrodo pagrįstos lentelės.

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@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>

Variantai

Naudokite kontekstines klases, kad nuspalvintumėte lenteles, lentelės eilutes arba atskirus langelius.

Klasė	Antraštė	Antraštė
Numatytas	Ląstelė	Ląstelė
Pirminis	Ląstelė	Ląstelė
Antrinis	Ląstelė	Ląstelė
Sėkmė	Ląstelė	Ląstelė
Pavojus	Ląstelė	Ląstelė
Įspėjimas	Ląstelė	Ląstelė
Informacija	Ląstelė	Ląstelė
Šviesa	Ląstelė	Ląstelė
Tamsus	Ląstelė	Ląstelė

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

Pagalbinių technologijų prasmės perteikimas

Spalvų naudojimas reikšmei pridėti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Užtikrinkite, kad informacija, pažymėta spalva, būtų akivaizdi iš paties turinio (pvz., matomas tekstas), arba būtų įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą .visually-hiddenklasėje.

Akcentuotos lentelės

Dryžuotos eilutės

Naudokite .table-stripednorėdami pridėti zebro juosteles į bet kurią lentelės eilutę <tbody>.

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-striped">
  ...
</table>

Dryžuotos kolonos

Naudokite .table-striped-columnsnorėdami pridėti zebro juosteles prie bet kurio lentelės stulpelio.

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-striped-columns">
  ...
</table>

Šios klasės taip pat gali būti įtrauktos į lentelės variantus:

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-dark table-striped">
  ...
</table>

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-dark table-striped-columns">
  ...
</table>

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-success table-striped">
  ...
</table>

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-success table-striped-columns">
  ...
</table>

Pakeliamos eilutės

Pridėti .table-hover, kad įgalintumėte pelės žymeklio būseną lentelės eilutėse, esančiose <tbody>.

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-hover">
  ...
</table>

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-dark table-hover">
  ...
</table>

Šias pakeliamas eilutes taip pat galima derinti su dryžuotų eilučių variantu:

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-striped table-hover">
  ...
</table>

Aktyvūs stalai

Pažymėkite lentelės eilutę arba langelį pridėdami .table-activeklasę.

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@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>

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@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>

Kaip veikia variantai ir kirčiuotos lentelės?

Kirčiuotoms lentelėms ( dryžuotoms eilutėms , dryžuotoms stulpelėms , slankiojančioms eilutėms ir aktyvioms lentelėms ) naudojome keletą metodų, kad šie efektai veiktų visuose lentelių variantuose :

Pradedame nuo lentelės langelio fono nustatymo su --bs-table-bgtinkinta ypatybe. Tada visi lentelės variantai nustato tą tinkintą ypatybę, kad nuspalvintų lentelės langelius. Taip nepakliūname į bėdą, jei kaip stalo fonas naudojamos pusiau permatomos spalvos.
Tada ant lentelės langelių pridedame įterptosios dėžutės šešėlį, kad box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);būtų sluoksnis ant bet kurio nurodyto background-color. Kadangi mes naudojame didžiulį sklaidą ir nėra susiliejimo, spalva bus monotoniška. Kadangi --bs-table-accent-bgyra nenustatytas pagal numatytuosius nustatymus, mes neturime numatytojo langelio šešėlio.
Pridėjus .table-striped, .table-striped-columns, .table-hoverarba .table-activeklases, --bs-table-accent-bgnustatoma pusiau permatoma spalva, kad būtų nuspalvintas fonas.
Kiekvienam lentelės variantui, --bs-table-accent-bgpriklausomai nuo tos spalvos, sukuriame didžiausio kontrasto spalvą. Pavyzdžiui, akcento spalva .table-primaryyra tamsesnė, o .table-darkšviesesnė.
Teksto ir kraštinių spalvos generuojamos taip pat, o jų spalvos paveldimos pagal numatytuosius nustatymus.

Užkulisiuose tai atrodo taip:

@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));
    $border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Stalo kraštinės

Lentelės su apvadu

Pridėkite .table-borderedkraštines visose lentelės ir langelių pusėse.

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-bordered">
  ...
</table>

Norint pakeisti spalvas, galima pridėti kraštinių spalvų paslaugų :

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-bordered border-primary">
  ...
</table>

Lentelės be rėmelių

Pridėkite .table-borderlesslentelę be sienų.

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-borderless">
  ...
</table>

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-dark table-borderless">
  ...
</table>

Maži staliukai

Pridėkite .table-sm, kad .tabletaptumėte kompaktiškesni, perpjaudami visą ląstelę paddingper pusę.

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-sm">
  ...
</table>

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-dark table-sm">
  ...
</table>

Lentelių grupių dalikliai

Pridėkite storesnę kraštinę, tamsesnę tarp lentelių grupių <thead>– <tbody>, ir <tfoot>– su .table-group-divider. Tinkinkite spalvą pakeisdami border-top-color(kurios naudingumo klasės šiuo metu nepateikiame).

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

html

<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 class="table-group-divider">
    <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>

Vertikalus lygiavimas

Lentelės langeliai <thead>visada yra vertikaliai sulygiuoti su apačia. Lentelės langeliai <tbody>paveldi lygiavimą iš <table>ir pagal numatytuosius nustatymus lygiuojami viršuje. Naudokite vertikalaus lygiavimo klases, kad iš naujo sulygiuotumėte, kur reikia.

1 antraštė	2 antraštė	3 antraštė	4 antraštė
Ši ląstelė paveldima `vertical-align: middle;`iš lentelės	Ši ląstelė paveldima `vertical-align: middle;`iš lentelės	Ši ląstelė paveldima `vertical-align: middle;`iš lentelės	Tai yra tam tikras vietos rezervavimo tekstas, skirtas užimti gana daug vertikalios vietos, kad parodytų, kaip vertikalus lygiavimas veikia ankstesniuose langeliuose.
Šis langelis paveldimas `vertical-align: bottom;`iš lentelės eilutės	Šis langelis paveldimas `vertical-align: bottom;`iš lentelės eilutės	Šis langelis paveldimas `vertical-align: bottom;`iš lentelės eilutės	Tai yra tam tikras vietos rezervavimo tekstas, skirtas užimti gana daug vertikalios vietos, kad parodytų, kaip vertikalus lygiavimas veikia ankstesniuose langeliuose.
Ši ląstelė paveldima `vertical-align: middle;`iš lentelės	Ši ląstelė paveldima `vertical-align: middle;`iš lentelės	Ši ląstelė išlygiuota į viršų.	Tai yra tam tikras vietos rezervavimo tekstas, skirtas užimti gana daug vertikalios vietos, kad parodytų, kaip vertikalus lygiavimas veikia ankstesniuose langeliuose.

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

Lizdas

Kraštinių stiliai, aktyvūs stiliai ir lentelės variantai nėra paveldimi įdėtose lentelėse.

Pirmas

Paskutinis

Rankena

ženklas

Otto

@mdo

Antraštė	Antraštė	Antraštė
A	Pirmas	Paskutinis
B	Pirmas	Paskutinis
C	Pirmas	Paskutinis

Laris

paukštis

@twitter

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Kaip veikia lizdas

Kad jokie stiliai nepatektų į įdėtas lenteles, >savo CSS naudojame antrinį kombinatorių ( ). Kadangi turime taikyti visus tds ir ths, esančius thead, tbody, ir tfoot, mūsų parinkiklis be jo atrodytų gana ilgai. Naudojame gana keistai atrodantį .table > :not(caption) > * > *parinkiklį, kad taikytume pagal visas tds ir ths .table, bet nė vienai iš galimų įdėtųjų lentelių.

Atminkite, kad jei pridėsite <tr>s kaip tiesioginius lentelės antrinius elementus, jie pagal numatytuosius nustatymus <tr>bus suvynioti į a <tbody>, todėl mūsų parinkikliai veiks taip, kaip numatyta.

Anatomija

Stalo galvutė

Panašiai kaip lenteles ir tamsias lenteles, naudokite modifikavimo klases .table-lightarba .table-dark, kad jos <thead>atrodytų šviesiai arba tamsiai pilkos.

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris	paukštis	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris	paukštis	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Stalo pėda

#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris	paukštis	@twitter
Poraštė	Poraštė	Poraštė	Poraštė

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Antraštės

A <caption>veikia kaip lentelės antraštė. Tai padeda vartotojams, turintiems ekrano skaitytuvus, rasti lentelę, suprasti, apie ką ji, ir nuspręsti, ar jie nori ją perskaityti.

Vartotojų sąrašas
#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris Paukštis		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Taip pat galite padėti <caption>ant stalo viršaus su .caption-top.

Vartotojų sąrašas
#	Pirmas	Paskutinis	Rankena
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris	paukštis	@twitter

html

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

Responsive lentelės

Reaktyvios lentelės leidžia lengvai slinkti lenteles horizontaliai. Padarykite bet kurią lentelę interaktyvią visose peržiūros srityse, apvyniodami a .tablesu .table-responsive. Arba, naudodami , pasirinkite didžiausią pertraukos tašką, su kuriuo norite pasiekti interaktyvią lentelę .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertikalus kirpimas / sutrumpinimas

Interaktyviosiose lentelėse naudojama overflow-y: hidden, kuri nupjauna bet kokį turinį, esantį už apatinio arba viršutinio lentelės krašto. Visų pirma, tai gali išjungti išskleidžiamuosius meniu ir kitus trečiųjų šalių valdiklius.

Visada reaguoja

Visuose pertraukos taškuose naudokite .table-responsivehorizontaliai slenkančias lenteles.

#	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė
1	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė
2	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė
3	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Konkretus lūžio taškas

Naudokite .table-responsive{-sm|-md|-lg|-xl|-xxl}, jei reikia, kad sukurtumėte interaktyvias lenteles iki konkretaus pertraukos taško. Nuo tos pertraukos taško lentelė elgsis įprastai ir neslinks horizontaliai.

Šios lentelės gali atrodyti neveikiančios, kol jų interaktyvūs stiliai bus pritaikyti tam tikram peržiūros srities pločiui.

#	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė
1	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė
2	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė
3	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė

#	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė
1	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė
2	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė
3	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė

#	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė
1	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė
2	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė
3	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė

#	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė
1	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė
2	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė
3	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė

#	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė
1	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė
2	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė
3	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė

#	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė	Antraštė
1	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė
2	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė
3	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė	Ląstelė

<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

Kintamieji

$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:                 var(--#{$prefix}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:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Kilpa

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

Tinkinimas

Veiksnių kintamieji ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) naudojami kontrastui nustatyti lentelės variantuose.
Be šviesių ir tamsių stalo variantų, temos spalvas šviesina $table-bg-scalekintamasis.