Tabelat

Dokumentacioni dhe shembuj për stilimin e tabelave (duke pasur parasysh përdorimin e tyre të përhapur në shtojcat JavaScript) me Bootstrap.

Në këtë faqe

Vështrim i përgjithshëm

Për shkak të përdorimit të gjerë të <table>elementeve nëpër miniaplikacionet e palëve të treta si kalendarët dhe zgjedhësit e datave, tabelat e Bootstrap janë të zgjedhura . Shtoni klasën bazë .tablenë ndonjë<table> , pastaj zgjerojeni me klasat tona të modifikuesve opsionalë ose stilet e personalizuara. Të gjitha stilet e tabelave nuk trashëgohen në Bootstrap, që do të thotë se çdo tabelë e vendosur mund të stilohet e pavarur nga prindi.

Duke përdorur shënjimin më bazë të tabelës, ja se si .tableduken tabelat e bazuara në Bootstrap.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Variantet

Përdorni klasa kontekstuale për të ngjyrosur tabelat, rreshtat e tabelave ose qelizat individuale.

Klasa	Drejtimi	Drejtimi
E paracaktuar	Qelizë	Qelizë
fillore	Qelizë	Qelizë
E mesme	Qelizë	Qelizë
Sukses	Qelizë	Qelizë
Rrezik	Qelizë	Qelizë
Paralajmërim	Qelizë	Qelizë
Informacion	Qelizë	Qelizë
Drita	Qelizë	Qelizë
E errët	Qelizë	Qelizë

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

Përcjellja e kuptimit tek teknologjitë ndihmëse

Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .visually-hiddenklasën.

Tabelat e theksuara

Rreshtat me vija

Përdoreni .table-stripedpër të shtuar vija zebra në çdo rresht tabele brenda <tbody>.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Kolona me vija

Përdoreni .table-striped-columnspër të shtuar vija zebra në çdo kolonë tabele.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Këto klasa gjithashtu mund të shtohen në variantet e tabelës:

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Rreshtat e lëvizshëm

Shto .table-hoverpër të aktivizuar një gjendje qëndrimi në rreshtat e tabelës brenda një <tbody>.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Këto rreshta të lëvizshëm mund të kombinohen gjithashtu me variantin e rreshtave me vija:

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Tabelat aktive

Theksoni një rresht ose qelizë tabele duke shtuar një .table-activeklasë.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Si funksionojnë variantet dhe tabelat e theksuara?

Për tabelat e theksuara ( rreshta me vija , kolona me vija , rreshta të lëvizshëm dhe tabela aktive ), ne përdorëm disa teknika për t'i bërë këto efekte të funksionojnë për të gjitha variantet tona të tabelës :

Fillojmë duke vendosur sfondin e një qelize tabele me --bs-table-bgvetinë e personalizuar. Të gjitha variantet e tabelës vendosin më pas atë veti të personalizuar për të ngjyrosur qelizat e tabelës. Në këtë mënyrë, ne nuk futemi në telashe nëse ngjyrat gjysmë transparente përdoren si sfond tavoline.
Më pas shtojmë një hije të kutisë së futur në qelizat e tabelës me box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);shtresën në krye të cilësdo të specifikuar background-color. Për shkak se ne përdorim një përhapje të madhe dhe pa turbullira, ngjyra do të jetë monotone. Që nga viti--bs-table-accent-bg është i pacaktuar si parazgjedhje, ne nuk kemi një hije kutie të paracaktuar.
Kur shtohen klasat .table-striped, .table-striped-columns, .table-hoverose , caktohet në një ngjyrë gjysmë transparente për të ngjyrosur sfondin..table-active--bs-table-accent-bg
Për çdo variant tabele, ne gjenerojmë një --bs-table-accent-bgngjyrë me kontrastin më të lartë në varësi të asaj ngjyre. Për shembull, ngjyra e theksit për .table-primaryështë më e errët ndërsa .table-darkka një ngjyrë të theksuar më të lehtë.
Ngjyrat e tekstit dhe kufirit gjenerohen në të njëjtën mënyrë dhe ngjyrat e tyre trashëgohen si parazgjedhje.

Prapa skenave duket kështu:

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

Kufijtë e tavolinës

Tavolina me kufi

Shto .table-borderedpër kufijtë në të gjitha anët e tabelës dhe qelizat.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Shërbimet e ngjyrave të kufirit mund të shtohen për të ndryshuar ngjyrat:

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Tabelat pa kufij

Shto .table-borderlesspër një tabelë pa kufij.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Tavolina të vogla

Shtoni .table-smpër ta bërë .tablemë kompakte duke e prerë të gjithë qelizën paddingnë gjysmë.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Ndarësit e grupeve të tabelave

Shtoni një kufi më të trashë, më të errët midis grupeve të tabelave— <thead>, <tbody>, dhe <tfoot>—me .table-group-divider. Personalizojeni ngjyrën duke ndryshuar border-top-color(për të cilën aktualisht nuk ofrojmë një klasë të shërbimeve në këtë moment).

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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>

Rreshtimi vertikal

Qelizat e tabelës <thead>janë gjithmonë të rreshtuara vertikale në fund. Qelizat e tabelës <tbody>trashëgojnë shtrirjen e tyre nga <table>dhe janë të rreshtuara në krye si parazgjedhje. Përdorni klasat e rreshtimit vertikal për t'u rilidhur aty ku nevojitet.

Kreu 1	Kreu 2	Kreu 3	Kreu 4
Kjo qelizë trashëgon `vertical-align: middle;`nga tabela	Kjo qelizë trashëgon `vertical-align: middle;`nga tabela	Kjo qelizë trashëgon `vertical-align: middle;`nga tabela	Ky këtu është një tekst mbajtës vendi, i synuar të zërë mjaft hapësirë vertikale, për të demonstruar se si funksionon shtrirja vertikale në qelizat e mëparshme.
Kjo qelizë trashëgon `vertical-align: bottom;`nga rreshti i tabelës	Kjo qelizë trashëgon `vertical-align: bottom;`nga rreshti i tabelës	Kjo qelizë trashëgon `vertical-align: bottom;`nga rreshti i tabelës	Ky këtu është një tekst mbajtës vendi, i synuar të zërë mjaft hapësirë vertikale, për të demonstruar se si funksionon shtrirja vertikale në qelizat e mëparshme.
Kjo qelizë trashëgon `vertical-align: middle;`nga tabela	Kjo qelizë trashëgon `vertical-align: middle;`nga tabela	Kjo qelizë është rreshtuar në krye.	Ky këtu është një tekst mbajtës vendi, i synuar të zërë mjaft hapësirë vertikale, për të demonstruar se si funksionon shtrirja vertikale në qelizat e mëparshme.

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

Folezimi

Stilet e kufirit, stilet aktive dhe variantet e tabelave nuk trashëgohen nga tabelat e mbivendosura.

Së pari

E fundit

Doreza

shenjë

Oto

@mdo

Kreu	Kreu	Kreu
A	Së pari	E fundit
B	Së pari	E fundit
C	Së pari	E fundit

Larry

Zogu

@Cicëroj

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

Si funksionon foleja

Për të parandaluar rrjedhjen e ndonjë stili në tabelat e mbivendosura, ne përdorim >përzgjedhësin e kombinuesit të fëmijëve ( ) në CSS tonë. Meqenëse duhet të synojmë të gjitha tds dhe ths në thead, tbody, dhe tfoot, përzgjedhësi ynë do të dukej goxha i gjatë pa të. Si i tillë, ne përdorim përzgjedhësin me pamje mjaft të çuditshme .table > :not(caption) > * > *për të synuar të gjitha tds dhe ths të.table , por asnjë nga tabelat e mbivendosura të mundshme.

Vini re se nëse shtoni <tr>s si fëmijë të drejtpërdrejtë të një tabele, ato <tr>do të mbështillen në një <tbody>si parazgjedhje, duke i bërë kështu përzgjedhësit tanë të funksionojnë siç synohet.

Anatomia

Kreu i tavolinës

Ngjashëm me tabelat dhe tabelat e errëta, përdorni klasat e modifikuesve .table-lightose .table-darkpër ta bërë <thead>s të duket gri e hapur ose e errët.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

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

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

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

Këmbë tavoline

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj
Fundi i faqes	Fundi i faqes	Fundi i faqes	Fundi i faqes

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

Titrat

Një <caption>funksionon si një titull për një tabelë. Ai i ndihmon përdoruesit me lexues ekrani të gjejnë një tabelë dhe të kuptojnë se për çfarë bëhet fjalë dhe të vendosin nëse duan ta lexojnë atë.

Lista e përdoruesve
#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Ju gjithashtu mund të vendosni <caption>në krye të tabelës me .caption-top.

Lista e përdoruesve
#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

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>

Tabelat e përgjegjshme

Tabelat e përgjegjshme lejojnë që tabelat të lëvizin me lehtësi horizontalisht. Bëni çdo tabelë të përgjegjshme në të gjitha portat e shikimit duke e mbështjellë një .tableme .table-responsive. Ose, zgjidhni një pikë ndërprerjeje maksimale me të cilën do të keni një tabelë të përgjegjshme deri në duke përdorur .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Prerje/prerje vertikale

Tabelat e përgjegjshme përdorin overflow-y: hidden, e cila heq çdo përmbajtje që shkon përtej skajeve të poshtme ose të sipërme të tabelës. Në veçanti, kjo mund të fshijë menytë rënëse dhe pajisje të tjera të palëve të treta.

Gjithmonë i përgjegjshëm

Për çdo pikë ndërprerjeje, përdoret .table-responsivepër tabelat me lëvizje horizontale.

#	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi
1	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
2	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
3	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë

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

Pika specifike e ndërprerjes

Përdorni .table-responsive{-sm|-md|-lg|-xl|-xxl}sipas nevojës për të krijuar tabela të përgjegjshme deri në një pikë të caktuar ndërprerjeje. Nga ajo pikë e ndërprerjes e lart, tabela do të sillet normalisht dhe nuk do të lëvizë horizontalisht.

Këto tabela mund të duken të thyera derisa stilet e tyre reaguese të zbatohen në gjerësi të veçanta të portave të pamjes.

#	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi
1	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
2	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
3	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë

#	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi
1	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
2	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
3	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë

#	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi
1	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
2	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
3	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë

#	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi
1	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
2	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
3	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë

#	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi
1	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
2	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
3	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë

#	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi
1	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
2	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
3	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë

<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

Variablat

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

Lak

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

Përshtatje

Variablat e faktorit ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) përdoren për të përcaktuar kontrastin në variantet e tabelës.
Përveç varianteve të tabelave të lehta dhe të errëta, ngjyrat e temës ndriçohen nga $table-bg-scalendryshorja.