Tables

Belgekirin û mînakên ji bo şêwaza vebijarkî ya tabloyan (ji ber karanîna wan a berbelav di pêvekên JavaScript de) bi Bootstrap re.

Li ser vê rûpelê

Têgihiştinî

Ji ber berbelavbûna karanîna <table>hêmanan li ser widgetên sêyemîn ên mîna salname û hilbijêrên tarîxê, tabloyên Bootstrap têne hilbijartin . Dersa bingehîn .tableli her <table>yekê zêde bikin, dûv re bi dersên meya guhêrbar an şêwazên xwerû ve dirêj bikin. Hemî şêwazên tabloyê di Bootstrap de ne mîras in, yanî her tabloyên hêlînkirî dikarin ji dêûbavê serbixwe werin şêwaz kirin.

Bi karanîna nîşankirina tabloya herî bingehîn, li vir çawa .tabletabloyên -based li Bootstrap xuya dikin.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@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>

Variants

Ji bo rengkirina tablo, rêzikên tabloyê an şaneyên takekesî dersên kontekstê bikar bînin.

Sinif	Sernivîs	Sernivîs
Destçûnî	Koşik	Koşik
Bingehîn	Koşik	Koşik
Dûwemdor	Koşik	Koşik
Serketinî	Koşik	Koşik
Talûke	Koşik	Koşik
Gazî	Koşik	Koşik
Info	Koşik	Koşik
Sivik	Koşik	Koşik
Tarî	Koşik	Koşik

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

Veguheztina wateya teknolojiyên arîkar

Bikaranîna rengan ji bo zêdekirina wateyê tenê nîşanek dîtbar peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng tê destnîşan kirin an ji naverokê bixwe diyar e (mînak nivîsa xuyayî), an jî bi rêyên alternatîf ve tê de, wek mînak nivîsa zêde ya ku bi .visually-hiddenpolê re veşartî ye.

Tabloyên devokî

Rêzên xerîdar

Ji .table-stripedbo lêzêdekirina zebra-striping li her rêzika tabloyê ya di hundurê de bikar bînin <tbody>.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

Stûnên xerîdar

Ji .table-striped-columnsbo lê zêdekirina zebra-striping li her stûna sifrê bikar bînin.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

Ev çîn dikarin li guhertoyên tabloyê jî werin zêdekirin:

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

Rêzên hoverable

Zêde .table-hoverbikin da ku rewşek hêlînê li ser rêzên tabloyê di nav a <tbody>.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

Van rêzên hêlînkirî jî dikarin bi guhertoya rêzikên xerîdar re werin berhev kirin:

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

Tabloyên çalak

.table-activeBi lêzêdekirina çînekê rêzek tabloyê an şaneyek ronî bikin .

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@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>

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@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>

Variant û tabloyên bi lêkdanî çawa dixebitin?

Ji bo tabloyên bi lêkdanî ( rêzên xerîdar , stûnên xerîdar , rêzikên pêvekirî , û tabloyên çalak ), me hin teknîk bikar anîn da ku van bandoran ji bo hemî guhertoyên tabloya xwe bixebitînin :

Em bi danîna paşxaneya şaneyek tabloyê bi --bs-table-bgtaybetmendiya xwerû dest pê dikin. Dûv re hemî guhertoyên tabloyê wê taybetmendiya xwerû destnîşan dikin ku şaneyên tabloyê rengîn bikin. Bi vî rengî, heke rengên nîv-şefaf wekî paşnavên tabloyê werin bikar anîn, em nekevin tengasiyê.
Dûv re em siya qutiya hundurîn li ser şaneyên tabloyê lê zêde dikin box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ku li ser her ku hatî destnîşankirî background-colorye. Ji ber ku em belavbûnek mezin bikar tînin û bê xirbe, reng dê monoton be. Ji ber --bs-table-accent-bgku ji hêla xwerû ve nehatiye saz kirin, me siya qutiya xwerû tune.
Dema ku yek .table-striped, .table-striped-columns, .table-hoveran .table-activeçîn têne zêdekirin, --bs-table-accent-bgji bo rengdêrkirina paşxanê reng bi rengek nîvşefaf tê danîn.
Ji bo her guhertoya tabloyê, em --bs-table-accent-bgrengek bi berevajiya herî bilind li gorî wî rengî diafirînin. Mînakî, rengê devokê ji bo .table-primarytarîtir e dema .table-darkku rengek devokî sivik heye.
Rengên nivîs û sînor bi heman rengî têne çêkirin, û rengên wan ji hêla xwerû ve têne mîras kirin.

Li pişt perdeyan wiha xuya dike:

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

Sînorên sifrê

Maseyên sînorkirî

Ji .table-borderedbo sînorên li ser hemî aliyên tablo û hucreyan zêde bikin.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

Karûbarên rengê sînor dikarin werin zêdekirin da ku rengan biguhezînin:

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

Tabloyên bê sînor

Ji .table-borderlessbo tabloyek bê sînor zêde bikin.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

Maseyên piçûk

Bi qutkirina hemî hucreyê di nîvê de zêde .table-smbikin da ku bêtir tevlihev bikin..tablepadding

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

dabeşkerên komê sifrê

Di navbera komên tabloyê de tixûbek stûrtir, tarîtir lê zêde bikin- <thead>, <tbody>, û <tfoot>-bi .table-group-divider. Rengê bi guheztina rengan xweş bikin border-top-color(ya ku em aniha çînek karûbar peyda nakin).

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@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>

Alignment Vertical

Hucreyên tabloyê <thead>her gav ber bi jêr ve li hev rêzkirî ne. Di şaneyên tabloyê de lihevhatina <tbody>xwe ji mîrasê digirin <table>û ji hêla xwerû ve li jorê têne rêz kirin. Dersên hevrêziya vertîkal bikar bînin ku li cîhê ku hewce be ji nû ve li hev bikin.

Sernav 1	Sernav 2	Sernav 3	Sernav 4
Ev hucre ji `vertical-align: middle;`sifrê mîras digire	Ev hucre ji `vertical-align: middle;`sifrê mîras digire	Ev hucre ji `vertical-align: middle;`sifrê mîras digire	Ev li vir hin nivîsa cîhgir e, ku tê armanc kirin ku pir cîhek vertîkal bigire, da ku destnîşan bike ka hevrêziya vertîkal di şaneyên pêşîn de çawa dixebite.
Ev hucre ji `vertical-align: bottom;`rêza sifrê mîras digire	Ev hucre ji `vertical-align: bottom;`rêza sifrê mîras digire	Ev hucre ji `vertical-align: bottom;`rêza sifrê mîras digire	Ev li vir hin nivîsa cîhgir e, ku tê armanc kirin ku pir cîhek vertîkal bigire, da ku destnîşan bike ka hevrêziya vertîkal di şaneyên pêşîn de çawa dixebite.
Ev hucre ji `vertical-align: middle;`sifrê mîras digire	Ev hucre ji `vertical-align: middle;`sifrê mîras digire	Ev şaneyek bi jor ve hatî rêz kirin.	Ev li vir hin nivîsa cîhgir e, ku tê armanc kirin ku pir cîhek vertîkal bigire, da ku destnîşan bike ka hevrêziya vertîkal di şaneyên pêşîn de çawa dixebite.

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

Nesting

Şêwazên sînor, şêwazên çalak, û guhertoyên tabloyê ji hêla tabloyên hêlîn ve nayên mîras kirin.

Yekem

Dawîn

Destik

Delîl

Otto

@mdo

Header	Header	Header
YEK	Yekem	Dawîn
B	Yekem	Dawîn
C	Yekem	Dawîn

Larry

Çûk

@twitter

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

Çawa hêlînê dixebite

Ji bo ku tu şêwaz neherikin tabloyên hêlîn, em >di CSS-ya xwe de hilbijêra hevberdana zarokan ( ) bikar tînin. Ji ber ku em hewce ne ku hemî tds û ths-yên di thead, tbody, û , û tfoot, vebijêrkê me de bêyî wê pir dirêj xuya bike. Bi vî rengî, em hilbijêrek xuyangê xerîb bikar tînin .table > :not(caption) > * > *da ku hemî tds û ths-ên .table, lê yek ji tabloyên hêlînkirî yên potansiyel tune bikin armanc.

Bala xwe bidinê ku hûn <tr>s-ê wekî zarokên rasterast ên tabloyek lê zêde bikin, ew <tr>ê ji hêla xwerû ve di nav de werin pêçan <tbody>, bi vî rengî hilbijêrên me wekî ku tê xwestin bixebitin.

Enatomî

Serê sifrê

Mîna tablo û tabloyên tarî, çînên guhêrbar bikar bînin .table-lightan jî .table-darkji bo ku <thead>s gewr sivik an tarî xuya bikin.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@twitter

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

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@twitter

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

Lingê masê

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@twitter
Footer	Footer	Footer	Footer

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

Captions

A <caption>fonksiyonên wek sernivîsê ji bo sifrê. Ew ji bikarhênerên bi xwendevanên ekranê re dibe alîkar ku tabloyek bibînin û fêm bikin ka ew li ser çi ye û biryar bidin ka ew dixwazin wê bixwînin.

Lîsteya bikarhêneran
#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@twitter

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

Her weha hûn dikarin bi <caption>serê sifrê bixin .caption-top.

Lîsteya bikarhêneran
#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@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>

Tabloyên bersivdar

Tabloyên bersivdar dihêlin ku tablo bi hêsanî bi horizontî werin gerandin. Bi pêçandina tabloyek .tablebi .table-responsive. An jî, xala veqetandinê ya herî zêde ya ku bi karanîna tabloyek bersivdar hebe hilbijêrin .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Clipping Vertical / qutkirin

Tabloyên bersivdar bi kar tînin overflow-y: hidden, ku her naverokek ku ji keviyên jêrîn an jorîn ên tabloyê derbas dibe qut dike. Bi taybetî, ev dikare pêşekên dakêşanê û widgetên din ên partiya sêyemîn qut bike.

Her tim bersivdar

Li seranserê her xala veqetandinê, ji .table-responsivebo tabloyên gerîdeya horîzontal bikar bînin.

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik

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

Breakpoint taybet

Wekî ku hewce be bikar bînin .table-responsive{-sm|-md|-lg|-xl|-xxl}da ku tabloyên bersivdar heya nuqteyek taybetî biafirînin. Ji wê nuqteya veqetandinê û jor, dê tablo bi rengek normal tevbigere û bi horizontî negere.

Dibe ku ev tablo şikestî xuya bikin heya ku şêwazên wan ên bersivdar li ser firehiyên dîmendera taybetî bicîh nebin.

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik

<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

Variables

$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

Guherbarên faktorê ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) ji bo diyarkirina berevajî di guhertoyên tabloyê de têne bikar anîn.
Ji bilî guhertoyên sifrê yên sivik û tarî, rengên mijarê ji hêla guhêrbar ve têne ronî kirin $table-bg-scale.