Tabelli

Dokumentazzjoni u eżempji għall-grafika opt-in tat-tabelli (minħabba l-użu prevalenti tagħhom fil-plugins JavaScript) b'Bootstrap.

Fuq din il-paġna

Ħarsa ġenerali

Minħabba l-użu mifrux ta' <table>elementi fuq widgets ta' partijiet terzi bħal kalendarji u pickers tad-data, it-tabelli ta' Bootstrap huma opt-in . Żid il-klassi bażi .tablema 'kwalunkwe <table>, imbagħad testendi bil-klassijiet modifikaturi fakultattivi tagħna jew stili tad-dwana. L-istili tal-mejda kollha ma jintirtux f'Bootstrap, li jfisser li kwalunkwe tabelli nested jistgħu jiġu stilati indipendenti mill-ġenitur.

Bl-użu tal-markup tat-tabella l-aktar bażiku, hawn kif .tablejidhru t-tabelli bbażati fuq Bootstrap.

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@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>

Varjanti

Uża klassijiet kuntestwali biex tikkuluri tabelli, ringieli ta 'tabelli jew ċelloli individwali.

Klassi	Intestatura	Intestatura
Default	Ċellula	Ċellula
Primarja	Ċellula	Ċellula
Sekondarja	Ċellula	Ċellula
Suċċess	Ċellula	Ċellula
Periklu	Ċellula	Ċellula
Twissija	Ċellula	Ċellula
Info	Ċellula	Ċellula
Dawl	Ċellula	Ċellula
Dlam	Ċellula	Ċellula

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

Twassal tifsira għal teknoloġiji ta' assistenza

L-użu tal-kulur biex iżżid it-tifsira jipprovdi biss indikazzjoni viżwali, li mhux se tiġi mgħoddija lill-utenti ta 'teknoloġiji ta' assistenza - bħal screen readers. Kun żgur li l-informazzjoni indikata bil-kulur hija jew ovvja mill-kontenut innifsu (eż. it-test viżibbli), jew tkun inkluża permezz ta' mezzi alternattivi, bħal test addizzjonali moħbi mal- .visually-hiddenklassi.

Tabelli b'aċċent

Ringieli strixxi

Uża .table-stripedbiex iżżid zebra-striping ma' kwalunkwe ringiela tal-mejda fi ħdan il- <tbody>.

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

Kolonni strixxi

Uża .table-striped-columnsbiex iżżid zebra-striping ma 'kwalunkwe kolonna tal-mejda.

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

Dawn il-klassijiet jistgħu wkoll jiġu miżjuda mal-varjanti tat-tabella:

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

Ringieli hoverable

Żid .table-hoverbiex tippermetti stat ta' hover fuq ringieli tal-mejda fi ħdan <tbody>.

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

Dawn ir-ringieli li jistgħu jitilgħu lura jistgħu wkoll jiġu kkombinati mal-varjant tar-ringieli strixxi:

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

Tabelli attivi

Enfasizza ringiela jew ċellula tabella billi żżid .table-activeklassi.

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@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>

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@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>

Kif jaħdmu l-varjanti u t-tabelli b'aċċent?

Għat-tabelli b'aċċent ( ringieli strixxi , kolonni strixxati , ringieli li jistgħu jitpoġġew lura , u tabelli attivi ), użajna xi tekniki biex dawn l-effetti jaħdmu għall- varjanti kollha tat-tabella tagħna :

Nibdew billi nissettjaw l-isfond ta 'ċellula tal-mejda bil- --bs-table-bgproprjetà tad-dwana. Il-varjanti kollha tat-tabella mbagħad issettjaw dik il-proprjetà tad-dwana biex tikkulurit iċ-ċelloli tat-tabella. Dan il-mod, aħna ma jsibux fl-inkwiet jekk kuluri semi-trasparenti huma użati bħala sfondi tabella.
Imbagħad inżidu dell kaxxa inset fuq iċ-ċelluli tal-mejda box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);b'saff fuq kwalunkwe speċifikat background-color. Minħabba li nużaw firxa enormi u l-ebda ċajpra, il-kulur se jkun monotone. Peress li--bs-table-accent-bg li mhux issettjat b'mod awtomatiku, m'għandniex dell tal-kaxxa default.
Meta jiġu miżjuda jew .table-striped, .table-striped-columns, .table-hoverjew .table-activeklassijiet, --bs-table-accent-bgissettjat għal kulur semitrasparenti biex jikkulurizza l-isfond.
Għal kull varjant tal-mejda, niġġeneraw --bs-table-accent-bgkulur bl-ogħla kuntrast skont dak il-kulur. Pereżempju, il-kulur tal-aċċent għal .table-primaryhuwa aktar skur filwaqt li .table-darkgħandu kulur tal-aċċent eħfef.
Il-kuluri tat-test u l-borduri huma ġġenerati bl-istess mod, u l-kuluri tagħhom jintirtu awtomatikament.

Wara l-kwinti jidher hekk:

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

Bordijiet tal-mejda

Imwejjed bil-borduri

Żid .table-borderedgħall-fruntieri fuq in-naħat kollha tat-tabella u ċ-ċelloli.

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

Jistgħu jiżdiedu utilitajiet tal-kulur tal-fruntiera biex jibdlu l-kuluri:

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

Tabelli mingħajr fruntieri

Żid .table-borderlessgħal mejda mingħajr fruntieri.

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

Imwejjed żgħar

Żid .table-smbiex tagħmel .tableaktar kompatt billi taqta 'ċ-ċellola kollha paddingbin-nofs.

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

Diviżuri tal-gruppi tal-mejda

Żid bordura eħxen, aktar skura bejn il-gruppi tal-mejda— <thead>, <tbody>, u <tfoot>—bil .table-group-divider. Ippersonalizza l-kulur billi tbiddel il- border-top-color(li bħalissa ma nipprovdux klassi ta' utilità għaliha f'dan iż-żmien).

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@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>

Allinjament vertikali

Iċ-ċelloli tat-tabella <thead>huma dejjem vertikali allinjati mal-qiegħ. Iċ-ċelloli tat-tabella <tbody>jirtu l-allinjament tagħhom minn <table>u huma allinjati mal-quċċata b'mod awtomatiku. Uża l - klassijiet tal -allinjament vertikali biex tallinja mill-ġdid fejn meħtieġ.

Intestatura 1	Intestatura 2	Intestatura 3	Intestatura 4
Din iċ-ċellula tirret `vertical-align: middle;`mit-tabella	Din iċ-ċellula tirret `vertical-align: middle;`mit-tabella	Din iċ-ċellula tirret `vertical-align: middle;`mit-tabella	Dan hawnhekk huwa xi test placeholder, maħsub biex jieħu pjuttost ftit spazju vertikali, biex juri kif jaħdem l-allinjament vertikali fiċ-ċelloli preċedenti.
Din iċ-ċellula tirret `vertical-align: bottom;`mir-ringiela tat-tabella	Din iċ-ċellula tirret `vertical-align: bottom;`mir-ringiela tat-tabella	Din iċ-ċellula tirret `vertical-align: bottom;`mir-ringiela tat-tabella	Dan hawnhekk huwa xi test placeholder, maħsub biex jieħu pjuttost ftit spazju vertikali, biex juri kif jaħdem l-allinjament vertikali fiċ-ċelloli preċedenti.
Din iċ-ċellula tirret `vertical-align: middle;`mit-tabella	Din iċ-ċellula tirret `vertical-align: middle;`mit-tabella	Din iċ-ċellula hija allinjata mal-quċċata.	Dan hawnhekk huwa xi test placeholder, maħsub biex jieħu pjuttost ftit spazju vertikali, biex juri kif jaħdem l-allinjament vertikali fiċ-ċelloli preċedenti.

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

Ibejtu

L-istili tal-fruntiera, l-istili attivi u l-varjanti tal-mejda ma jintirtux minn tabelli nested.

L-ewwel

L-aħħar

Manku

Mark

Otto

@mdo

Header	Header	Header
A	L-ewwel	L-aħħar
B	L-ewwel	L-aħħar
Ċ	L-ewwel	L-aħħar

Larry

l-ghasfur

@twitter

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

Kif jaħdem it-tbejjit

Biex tipprevjeni kwalunkwe stili milli jnixxu għal tabelli nested, nużaw is- >selettur tat-tfal combinator ( ) fis-CSS tagħna. Peress li rridu nimmiraw is- tds u l- thi kollha fil- thead, tbody, u tfoot, is-selettur tagħna jidher pjuttost twil mingħajru. Bħala tali, nużaw is- .table > :not(caption) > * > *selettur li tħares pjuttost fard biex nimmiraw is- tds u l- thi kollha tal-.table , iżda l-ebda tabelli potenzjali nested.

Innota li jekk iżżid <tr>s bħala tfal diretti ta 'tabella, dawk <tr>se jkunu mgeżwra b'mod <tbody>awtomatiku, u b'hekk is-seletturi tagħna jaħdmu kif maħsub.

Anatomija

Kap tal-mejda

Simili għal tabelli u tabelli skuri, uża l-klassijiet modifikaturi .table-lightjew .table-darkbiex tagħmel <thead>s jidhru griż ċar jew skur.

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry	l-ghasfur	@twitter

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

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry	l-ghasfur	@twitter

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

Sieq tal-mejda

#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry	l-ghasfur	@twitter
Footer	Footer	Footer	Footer

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

Captions

A <caption>jiffunzjona bħal intestatura għal tabella. Jgħin lill-utenti bi screen readers biex isibu tabella u jifhmu dwar xiex tkun u jiddeċiedu jekk iridux jaqrawha.

Lista ta' utenti
#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry l-Għasfur		@twitter

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

Tista 'wkoll tpoġġi <caption>fuq il-quċċata tat-tabella b' .caption-top.

Lista ta' utenti
#	L-ewwel	L-aħħar	Manku
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry	l-ghasfur	@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>

Tabelli li jirrispondu

Tabelli li jirrispondu jippermettu li t-tabelli jiġu skrollati orizzontalment b'faċilità. Agħmel kwalunkwe mejda li tirreaġixxi fil-viewports kollha billi tgeżwer .tableb ' .table-responsive. Jew, agħżel breakpoint massimu li bih ikollok tabella li tirrispondi sa billi tuża .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Qtugħ/qtugħ vertikali

It-tabelli li jirrispondu jagħmlu użu minn overflow-y: hidden, li jaqta' kull kontenut li jmur lil hinn mit-truf ta' isfel jew ta' fuq tat-tabella. B'mod partikolari, dan jista' jaqtgħu menus dropdown u widgets oħra ta 'partijiet terzi.

Dejjem jirrispondi

F'kull breakpoint, uża .table-responsivegħal tabelli li tiskrolljaw orizzontalment.

#	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura
1	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula
2	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula
3	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula

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

Breakpoint speċifiku

Uża .table-responsive{-sm|-md|-lg|-xl|-xxl}kif meħtieġ biex toħloq tabelli responsivi sa breakpoint partikolari. Minn dak il-breakpoint u 'l fuq, it-tabella se taġixxi b'mod normali u mhux tiskrollja orizzontalment.

Dawn it-tabelli jistgħu jidhru mkissra sakemm l-istili reattivi tagħhom japplikaw f'wisgħat ta' viewport speċifiċi.

#	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura
1	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula
2	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula
3	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula

#	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura
1	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula
2	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula
3	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula

#	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura
1	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula
2	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula
3	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula

#	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura
1	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula
2	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula
3	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula

#	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura
1	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula
2	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula
3	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula

#	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura	Intestatura
1	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula
2	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula
3	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula	Ċellula

<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

Varjabbli

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

Loop

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

Customizing

Il-fatturi varjabbli ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) jintużaw biex jiddeterminaw il-kuntrast fil-varjanti tat-tabella.
Minbarra l-varjanti tal-mejda tad-dawl u d-dlam, il-kuluri tat-tema huma mħaffef mill- $table-bg-scalevarjabbli.