Jadvallar

Bootstrap yordamida jadvallarni (JavaScript plaginlarida keng qo'llanilishini hisobga olgan holda) sozlash uchun hujjatlar va misollar.

Ushbu sahifada

Umumiy koʻrinish

<table>Kalendarlar va sana tanlagichlar kabi uchinchi tomon vidjetlarida elementlarning keng qoʻllanilishi tufayli Bootstrap jadvallari roʻyxatga olinadi . Asosiy sinfni .tableistalgan ga qo'shing <table>, so'ngra ixtiyoriy modifikator sinflarimiz yoki maxsus uslublarimiz bilan kengaytiring. Barcha jadval uslublari Bootstrap-da meros qilib olinmaydi, ya'ni har qanday ichki o'rnatilgan jadvallar ota-onadan mustaqil ravishda tuzilishi mumkin.

Eng oddiy jadval belgilaridan foydalanib, .tableBootstrap-da asoslangan jadvallar qanday ko'rinishga ega.

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@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>

Variantlar

Jadvallarni, jadval qatorlarini yoki alohida kataklarni ranglash uchun kontekstli sinflardan foydalaning.

Sinf	Sarlavha	Sarlavha
Standart	Hujayra	Hujayra
Asosiy	Hujayra	Hujayra
Ikkilamchi	Hujayra	Hujayra
Muvaffaqiyat	Hujayra	Hujayra
Xavfli	Hujayra	Hujayra
Ogohlantirish	Hujayra	Hujayra
Ma'lumot	Hujayra	Hujayra
Nur	Hujayra	Hujayra
Qorong'i	Hujayra	Hujayra

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

Yordamchi texnologiyalarga ma'no etkazish

Ma'no qo'shish uchun rangdan foydalanish faqat vizual ko'rsatkichni ta'minlaydi, bu yordamchi texnologiyalar foydalanuvchilariga, masalan, ekranni o'qiydiganlarga etkazilmaydi. Rang bilan belgilangan ma'lumotlar mazmunning o'zidan (masalan, ko'rinadigan matn) aniq bo'lishiga yoki .visually-hiddensinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling.

Urg'uli jadvallar

Chiziqli qatorlar

.table-stripedichidagi istalgan jadval qatoriga zebra-chiziq qo'shish uchun foydalaning <tbody>.

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

Chiziqli ustunlar

.table-striped-columnsHar qanday jadval ustuniga zebra-chiziq qo'shish uchun foydalaning .

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

Ushbu sinflar jadval variantlariga ham qo'shilishi mumkin:

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

Ko'chma qatorlar

.table-hoverJadval qatorlarida hover holatini yoqish uchun qo'shing <tbody>.

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

Ushbu turuvchi qatorlar chiziqli qatorlar varianti bilan ham birlashtirilishi mumkin:

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

Faol jadvallar

.table-activeSinf qo'shish orqali jadval qatori yoki katakchasini ajratib ko'rsatish .

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@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>

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@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>

Variantlar va urg'uli jadvallar qanday ishlaydi?

Urg'uli jadvallar uchun ( chiziqli satrlar , chiziqli ustunlar , ko'chma satrlar va faol jadvallar ) biz ushbu effektlarni barcha jadval variantlarimiz uchun ishlashi uchun ba'zi usullardan foydalandik :

--bs-table-bgBiz shaxsiy xususiyatga ega bo'lgan jadval katakchasi fonini o'rnatishdan boshlaymiz . Keyin barcha jadval variantlari jadval katakchalarini ranglash uchun ushbu maxsus xususiyatni o'rnatadi. Shunday qilib, agar yarim shaffof ranglar stol foni sifatida ishlatilsa, muammoga duch kelmaymiz.
So'ngra jadval katakchalariga box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);har qanday ko'rsatilgan qatlam ustiga qo'shilgan soyani qo'shamiz background-color. Biz katta yoyilgan va xiralashmaganimiz sababli rang monoton bo'ladi. Sukut boʻyicha oʻrnatilmaganligi sababli --bs-table-accent-bgbizda birlamchi quti soyasi yoʻq.
.table-striped, .table-striped-columns, yoki sinflar qo'shilsa, .table-hoverfonni ranglash uchun yarim shaffof rangga o'rnatiladi..table-active--bs-table-accent-bg
Har bir jadval varianti uchun biz --bs-table-accent-bgushbu rangga qarab eng yuqori kontrastli rang hosil qilamiz. Misol uchun, uchun urg'u rangi .table-primaryquyuqroq bo'lsa .table-dark, engil aksent rangga ega.
Matn va chegara ranglari bir xil tarzda yaratiladi va ularning ranglari sukut bo'yicha meros qilib olinadi.

Sahna ortida shunday ko'rinadi:

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

Jadval chegaralari

Chegaralangan jadvallar

.table-borderedJadval va kataklarning barcha tomonidagi chegaralar uchun qo'shing .

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

Ranglarni o'zgartirish uchun chegara rangi yordamchi dasturlari qo'shilishi mumkin:

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

Chegarasiz jadvallar

.table-borderlessChegarasiz jadval uchun qo'shing .

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

Kichik stollar

Barcha hujayralarni yarmiga bo'lish orqali ixchamroq .table-smqilish uchun qo'shing ..tablepadding

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

Jadval guruhlarini ajratgichlar

Jadval guruhlari orasiga quyuqroq, qalinroq chegara qo'shing— <thead>, <tbody>, va <tfoot>— bilan .table-group-divider. Rangni o'zgartirish orqali sozlang border-top-color(hozirda biz buning uchun yordamchi dastur sinfini taqdim etmaymiz).

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@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>

Vertikal tekislash

Jadval xujayralari <thead>har doim vertikal ravishda pastga qarab tekislanadi. Jadvaldagi katakchalar <tbody>o'zlarining hizalanishini meros qilib oladi <table>va sukut bo'yicha yuqoriga tekislanadi. Zarur bo'lganda qayta tekislash uchun vertikal tekislash sinflaridan foydalaning.

Sarlavha 1	Sarlavha 2	Sarlavha 3	Sarlavha 4
Bu hujayra `vertical-align: middle;`jadvaldan meros oladi	Bu hujayra `vertical-align: middle;`jadvaldan meros oladi	Bu hujayra `vertical-align: middle;`jadvaldan meros oladi	Bu oldingi katakchalarda vertikal tekislash qanday ishlashini ko'rsatish uchun biroz vertikal bo'shliqni egallashga mo'ljallangan ba'zi to'ldiruvchi matn.
`vertical-align: bottom;`Bu katak jadval qatoridan meros oladi	`vertical-align: bottom;`Bu katak jadval qatoridan meros oladi	`vertical-align: bottom;`Bu katak jadval qatoridan meros oladi	Bu oldingi katakchalarda vertikal tekislash qanday ishlashini ko'rsatish uchun biroz vertikal bo'shliqni egallashga mo'ljallangan ba'zi to'ldiruvchi matn.
Bu hujayra `vertical-align: middle;`jadvaldan meros oladi	Bu hujayra `vertical-align: middle;`jadvaldan meros oladi	Bu katak tepaga tekislangan.	Bu oldingi katakchalarda vertikal tekislash qanday ishlashini ko'rsatish uchun biroz vertikal bo'shliqni egallashga mo'ljallangan ba'zi to'ldiruvchi matn.

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

Yuvalash

Chegara uslublari, faol uslublar va jadval variantlari ichki o'rnatilgan jadvallar tomonidan meros qilib olinmaydi.

Birinchidan

Oxirgi

Tutqich

Mark

Otto

@mdo

Sarlavha	Sarlavha	Sarlavha
A	Birinchidan	Oxirgi
B	Birinchidan	Oxirgi
C	Birinchidan	Oxirgi

Larri

qush

@twitter

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

Uy qurish qanday ishlaydi

Har qanday uslublar ichki o'rnatilgan jadvallarga o'tib ketishining oldini olish uchun >biz CSS-da bolalar birlashtiruvchi ( ) selektoridan foydalanamiz . Biz , va dagi barcha tds va ths ni nishonga olishimiz kerakligi sababli , bizning selektorimiz unsiz uzoq vaqt ko'rinadi. Shunday qilib, biz barcha s va s ni nishonga olish uchun juda g'alati ko'rinishdagi selektordan foydalanamiz , lekin hech qanday potentsial ichki o'rnatilgan jadvallarning hech biri.theadtbodytfoot.table > :not(caption) > * > *tdth.table

<tr>E'tibor bering, agar siz jadvalning to'g'ridan-to'g'ri bolalari sifatida s qo'shsangiz , ular sukut <tr>bo'yicha a ichiga o'raladi va shu bilan bizning selektorlarimiz mo'ljallangan tarzda ishlaydi.<tbody>

Anatomiya

Stol boshi

Jadvallar va quyuq jadvallarga o'xshab, o'zgartiruvchi sinflardan foydalaning yoki .table-lights ochiq yoki to'q kulrang ko'rinishga ega bo'lsin..table-dark<thead>

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Larri	qush	@twitter

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

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Larri	qush	@twitter

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

Stol oyog'i

#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Larri	qush	@twitter
Altbilgi	Altbilgi	Altbilgi	Altbilgi

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

Taglavhalar

<caption>Jadval sarlavhasi kabi funktsiyalarni bajaradi . Bu ekranni o'qish dasturlari bo'lgan foydalanuvchilarga jadvalni topishga va u nima haqida ekanligini tushunishga va uni o'qishni xohlash yoki xohlamasliklarini hal qilishga yordam beradi.

Foydalanuvchilar ro'yxati
#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Qush Larri		@twitter

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

Bundan tashqari, <caption>bilan stolning yuqori qismiga qo'yishingiz mumkin .caption-top.

Foydalanuvchilar ro'yxati
#	Birinchidan	Oxirgi	Tutqich
1	Mark	Otto	@mdo
2	Yoqub	Tornton	@yog'
3	Larri	qush	@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>

Javob beruvchi jadvallar

Javob beruvchi jadvallar jadvallarni gorizontal ravishda osongina aylantirish imkonini beradi. .tablebilan oʻrash orqali har qanday jadvalni barcha koʻrish oynalarida sezgir qiling .table-responsive. Yoki dan foydalanib, javob beruvchi jadvalga ega bo'ladigan maksimal to'xtash nuqtasini tanlang .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertikal kesish/kesish

Javob beruvchi jadvallar jadvalning overflow-y: hiddenpastki yoki yuqori chetlaridan tashqariga chiqadigan har qanday tarkibni o'chirib qo'yadigan dan foydalanadi. Xususan, bu ochiladigan menyular va boshqa uchinchi tomon vidjetlarini kesib tashlashi mumkin.

Har doim sezgir

Har bir to'xtash nuqtasi bo'ylab, .table-responsivegorizontal aylantiruvchi jadvallar uchun foydalaning.

#	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha
1	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra
2	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra
3	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra

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

Maxsus uzilish nuqtasi

Foydalanish.table-responsive{-sm|-md|-lg|-xl|-xxl}Muayyan to'xtash nuqtasigacha javob beradigan jadvallarni yaratish uchun kerak bo'lgandaUshbu to'xtash nuqtasidan va undan yuqoriga qarab, jadval odatdagidek ishlaydi va gorizontal ravishda aylanmaydi.

Ushbu jadvallar ma'lum ko'rish maydoni kengliklarida javob berish uslublari qo'llanilmaguncha buzilgan ko'rinishi mumkin.

#	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha
1	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra
2	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra
3	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra

#	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha
1	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra
2	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra
3	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra

#	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha
1	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra
2	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra
3	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra

#	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha
1	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra
2	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra
3	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra

#	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha
1	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra
2	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra
3	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra

#	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha	Sarlavha
1	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra
2	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra
3	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra	Hujayra

<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

O'zgaruvchilar

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

Moslashtirish

Faktor o'zgaruvchilari ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) jadval variantlaridagi kontrastni aniqlash uchun ishlatiladi.
Ochiq va qorong'i stol variantlaridan tashqari, mavzu ranglari $table-bg-scaleo'zgaruvchi tomonidan ochiladi.