in English

Tablisa

Bootstrap bilen tablisalary optiki düzmek üçin resminamalar we mysallar (JavaScript plaginlerinde giňden ulanylyşyny göz öňünde tutup).

Bu sahypada

Gysgaça syn

Senenamalar we senäni saýlaýjylar ýaly üçünji tarap widjetlerinde elementleriň giňden ulanylmagy sebäpli “ Bootstrap” -yň<table> tablisalary açyk . Esasy synpy islendik birine goşuň , soňra goşmaça üýtgediji synplarymyz ýa-da adaty stillerimiz bilen giňeldiň. Stol stilleriniň hemmesi “Bootstrap” -da miras galanok, ýagny islendik höwürtgelenen stollary ene-atadan garaşsyz görnüşde düzüp bolýar..table<table>

Iň esasy tablisa belligini ulanyp, “ .tableBootstrap” -da esasly tablisalaryň görnüşi.

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@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>

Görnüşler

Reňk tablisalaryna, tablisa hatarlaryna ýa-da aýratyn öýjüklere kontekst sapaklaryny ulanyň.

Synp	Sözbaşy	Sözbaşy
Bellenen	Öýjük	Öýjük
Başlangyç	Öýjük	Öýjük
Ikinji	Öýjük	Öýjük
Üstünlik	Öýjük	Öýjük
Howp	Öýjük	Öýjük
Duýduryş	Öýjük	Öýjük
Maglumat	Öýjük	Öýjük
Lightagtylyk	Öýjük	Öýjük
Garaňky	Öýjük	Öýjük

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

Kömekçi tehnologiýalara many bermek

Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .visually-hiddensynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.

Maksatly tablisalar

Zolakly hatarlar

.table-stripedIçindäki islendik stol hataryna zebra-zolak goşmak üçin ulanyň <tbody>.

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

Zolakly sütünler

.table-striped-columnsIslendik sütün sütünine zebra zolaklaryny goşmak üçin ulanyň .

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

Bu sapaklary tablisanyň wariantlaryna hem goşup bolýar:

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

Hereketli hatarlar

.table-hoverA içindäki stol hatarlarynda aýlaw ýagdaýyny açmak üçin goşuň <tbody>.

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

Bu aýlawly hatarlary zolakly hatar görnüşi bilen birleşdirip bolýar:

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

Işjeň tablisalar

.table-activeSynp goşup, stoluň hataryny ýa-da öýjügini tapawutlandyryň .

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@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>

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@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>

Görnüşler we aksentlenen tablisalar nähili işleýär?

Ajaýyp tablisalar ( zolakly hatarlar , zolakly sütünler , hereket edip boljak hatarlar we işjeň tablisalar ) üçin bu effektleri stoluň ähli görnüşleri üçin işlemek üçin käbir usullary ulandyk :

Customörite häsiýetli stol öýjüginiň fonuny bellemekden başlaýarys --bs-table-bg. Tablehli tablisanyň wariantlary, tablisanyň öýjüklerini reňklemek üçin şol aýratyn häsiýeti düzýärler. Şeýlelik bilen, ýarym dury reňkler stoluň fonunda ulanylsa, kynçylyk çekmeris.
box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);Soňra, görkezilenleriň üstünde gatlak bilen stol öýjüklerine goşma guty kölegesini goşýarys background-color. Hugegirt ýaýramagy ulanýarys we bulaşyklyk ýok, reňk monoton bolar. Düzgüne --bs-table-accent-bggörä düzülmänsoň, deslapky guty kölegesi ýok.
Haçan-da .table-striped, ýa .table-striped-columns- .table-hoverda .table-activesynplar goşulanda, --bs-table-accent-bgfon reňklemek üçin ýarym açyk reňkde bolýar.
Her tablisanyň görnüşi üçin, --bs-table-accent-bgşol reňke baglylykda iň ýokary kontrastly reňk döredýäris. Mysal üçin, aksentiň reňki .table-primaryhas .table-darkaksent reňkine eýe bolýar.
Tekst we serhet reňkleri birmeňzeş döredilýär we reňkleri adaty ýagdaýda miras galypdyr.

Sahnanyň aňyrsynda şeýle görünýär:

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

Stol araçäkleri

Serhet tablisalary

.table-borderedStoluň we öýjükleriň hemme tarapyna serhetler goşuň .

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

Reňkleri üýtgetmek üçin serhet reňk enjamlaryny goşup bolýar:

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

Serhetsiz tablisalar

.table-borderlessSerhetsiz stol üçin goşuň .

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

Ownuk stollar

Cellhli öýjügi ýarym kesip, has ykjam .table-smetmek üçin goşuň ..tablepadding

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

Stol topary bölüjiler

Stol toparlarynyň arasynda has galyň araçäk goşuň <thead>, <tbody>we . Reňkini üýtgediň (häzirki wagtda peýdaly synpy hödürlemeýäris).<tfoot>.table-group-dividerborder-top-color

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@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>

Dik tekizlemek

Stol öýjükleri <thead>elmydama aşagyna dikligine deňleşdirilýär. Stol öýjükleri <tbody>deňleşmesini miras alýarlar <table>we adaty ýagdaýda ýokarsyna deňleşdirilýär. Zerur ýerlerde täzeden deňleşdirmek üçin dik tekizlemek synplaryny ulanyň .

1-nji sözbaşy	2-nji sözbaşy	3-nji sözbaşy	4-nji sözbaşy
Bu öýjük `vertical-align: middle;`tablisadan miras alýar	Bu öýjük `vertical-align: middle;`tablisadan miras alýar	Bu öýjük `vertical-align: middle;`tablisadan miras alýar	Bu ýerde dikligine deňleşmegiň öňki öýjüklerde nähili işleýändigini görkezmek üçin birneme dik ýer tutmagy maksat edinýän käbir ýer eýesi teksti bar.
Bu öýjük `vertical-align: bottom;`tablisanyň hataryndan miras alýar	Bu öýjük `vertical-align: bottom;`tablisanyň hataryndan miras alýar	Bu öýjük `vertical-align: bottom;`tablisanyň hataryndan miras alýar	Bu ýerde dikligine deňleşmegiň öňki öýjüklerde nähili işleýändigini görkezmek üçin birneme dik ýer tutmagy maksat edinýän käbir ýer eýesi teksti bar.
Bu öýjük `vertical-align: middle;`tablisadan miras alýar	Bu öýjük `vertical-align: middle;`tablisadan miras alýar	Bu öýjük ýokarsyna deňleşdirildi.	Bu ýerde dikligine deňleşmegiň öňki öýjüklerde nähili işleýändigini görkezmek üçin birneme dik ýer tutmagy maksat edinýän käbir ýer eýesi teksti bar.

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

Höwürtge

Serhet stilleri, işjeň stiller we tablisa görnüşleri öýlenen tablisalara miras galanok.

Ilki bilen

Iň soňky

Işlediň

Bellik

Otto

@mdo

Sözbaşy	Sözbaşy	Sözbaşy
A.	Ilki bilen	Iň soňky
B.	Ilki bilen	Iň soňky
C.	Ilki bilen	Iň soňky

Larry

guş

@twitter

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

Höwürtge nähili işleýär

Haýsydyr bir stiliň ýerleşdirilen stollara syzmazlygy üçin >CSS-de çaga kombinatoryny () saýlaýjysyny ulanýarys. tdInhli s-leri thnyşana almalydygymyz sebäpli thead, saýlaýjymyz onsuz gaty uzyn görüner. Şeýle bolansoň, ähli s- leri nyşana almak üçin gaty üýtgeşik görünýän saýlaýjyny ulanýarys , ýöne hiç hili potensial ýerleşdirilen tablisa ýok.tbodytfoot.table > :not(caption) > * > *tdth.table

<tr>Stoluň gönüden-göni çagalary hökmünde s goşsaňyz , deslapky <tr>görnüşde <tbody>örtüljekdigini, şeýlelik bilen saýlaýjylarymyzyň isleýşi ýaly işlemegine üns beriň.

Anatomiýa

Stoluň başy

Stollara we gara stollara meňzeş ýaly, üýtgediji synplary ulanyň .table-lightýa-da .table-darkaçyk <thead>ýa-da goýy çal reňkde görüniň.

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@twitter

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

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@twitter

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

Stol aýagy

#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@twitter
Aşakdaky ýazgy	Aşakdaky ýazgy	Aşakdaky ýazgy	Aşakdaky ýazgy

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

Tionsazgylar

Tablisa sözbaşy ýaly <caption>funksiýalar. Ekran okyjylary bolan ulanyjylara tablisa tapmaga we onuň nämedigine düşünmäge we ony okamak isleýändiklerine karar bermäge kömek edýär.

Ulanyjylaryň sanawy
#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

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

Şeýle hem <caption>, stoluň ýokarsyna goýup bilersiňiz .caption-top.

Ulanyjylaryň sanawy
#	Ilki bilen	Iň soňky	Işlediň
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@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>

Jogap beriji tablisalar

Jogap beriji tablisalar tablisalary aňsatlyk bilen keseligine aýlamaga mümkinçilik berýär. Viewhli görnüşdäki tablisa bilen .tablegaplaň .table-responsive. Ora-da ulanyp, jogap tablisasyna eýe boljak iň ýokary nokady saýlaň .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Dik kesmek / kesmek

Jogapkärçilikli tablisalar ulanylýar, overflow-y: hiddentablisanyň aşaky ýa-da ýokarky gyralaryndan çykýan islendik mazmuny kesýär. Hususan-da, bu açylýan menýulary we beýleki üçünji tarap widjetlerini kesip biler.

Elmydama jogap beriň

Her nokadyň üstünden .table-responsivekeseligine aýlamak tablisalaryny ulanyň.

#	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy
1	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
2	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
3	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük

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

Bölüniş nokady

.table-responsive{-sm|-md|-lg|-xl|-xxl}Belli bir nokada çenli täsirli tablisalary döretmek üçin zerur bolanda ulanyň . Şol nokatdan ýokaryk, tablisa kadaly hereket eder we keseligine aýlanmaz.

Bu tablisalar, duýgur görnüşleri belli bir görnüş giňliginde ulanylýança döwülen ýaly bolup biler.

#	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy
1	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
2	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
3	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük

#	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy
1	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
2	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
3	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük

#	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy
1	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
2	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
3	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük

#	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy
1	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
2	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
3	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük

#	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy
1	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
2	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
3	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük

#	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy	Sözbaşy
1	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
2	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük
3	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük	Öýjük

<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

Üýtgeýjiler

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

Aýlaw

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

Düzeltmek

Faktor üýtgeýjileri ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) tablisanyň görnüşleriniň arasyndaky tapawudy kesgitlemek üçin ulanylýar.
$table-bg-scaleLightagty we garaňky stol görnüşlerinden başga-da, üýtgeýänler tarapyndan mowzuk reňkleri ýeňilleşdirilýär .