Хүснэгтүүд

Bootstrap ашиглан хүснэгтүүдийг загварчлах (JavaScript залгаасуудад түгээмэл хэрэглэгддэг) баримт бичиг, жишээнүүд.

Энэ хуудсан дээр

Тойм

Хуанли, огноо сонгогч зэрэг гуравдагч этгээдийн виджетүүдэд элементүүдийг өргөнөөр ашигладаг тул <table>Bootstrap-ийн хүснэгтүүдийг ашиглах боломжтой. Үндсэн ангийг .tableдурын <table>дээр нэмээд дараа нь манай нэмэлт өөрчлөгч анги эсвэл өөрчлөн хэв маягаар өргөтгөнө. Бүх хүснэгтийн хэв маяг нь Bootstrap-д өвлөгддөггүй бөгөөд энэ нь ямар ч үүрлэсэн хүснэгтийг эцэг эхээс хамааралгүйгээр загварчлах боломжтой гэсэн үг юм.

Хамгийн энгийн хүснэгтийн тэмдэглэгээг ашиглан .tableBootstrap дээр суурилсан хүснэгтүүд хэрхэн харагдахыг эндээс үзнэ үү.

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@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>

Хувилбарууд

Хүснэгт, хүснэгтийн мөр эсвэл бие даасан нүднүүдийг будахын тулд контекст ангиудыг ашиглана уу.

Анги	Гарчиг	Гарчиг
Өгөгдмөл	Эс	Эс
Үндсэн	Эс	Эс
Хоёрдогч	Эс	Эс
Амжилт	Эс	Эс
аюул	Эс	Эс
Анхааруулга	Эс	Эс
Мэдээлэл	Эс	Эс
Гэрэл	Эс	Эс
Харанхуй	Эс	Эс

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

Туслах технологид утгыг дамжуулах

Утга нэмэхийн тулд өнгийг ашиглах нь зөвхөн харааны заалтыг өгдөг бөгөөд энэ нь дэлгэц уншигч гэх мэт туслах технологийн хэрэглэгчдэд хүргэхгүй. Өнгөөөр тэмдэглэсэн мэдээлэл нь агуулгаасаа тодорхой (жишээ нь харагдах текст) эсвэл .visually-hiddenангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр орсон эсэхийг шалгаарай.

Өргөлттэй хүснэгтүүд

Судалчлагдсан эгнээ

.table-stripedдоторх хүснэгтийн аль ч мөрөнд тахө зураас нэмэхийн тулд ашиглана уу <tbody>.

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

Судалчлагдсан баганууд

Хүснэгтийн .table-striped-columnsдурын баганад тахө зураас нэмэхийн тулд ашиглана уу.

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

Эдгээр ангиудыг хүснэгтийн хувилбаруудад нэмж болно:

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

Хөвөгч мөрүүд

.table-hoverДотор хүснэгтийн мөрүүд дээр хулганын төлөвийг идэвхжүүлэхийн тулд нэмэх <tbody>.

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

Эдгээр гулсдаг мөрүүдийг судалтай эгнээний хувилбартай хослуулж болно:

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

Идэвхтэй хүснэгтүүд

.table-activeАнги нэмж хүснэгтийн мөр эсвэл нүдийг тодруулна уу .

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@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>

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@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>

Хувилбарууд болон өргөлттэй хүснэгтүүд хэрхэн ажилладаг вэ?

Өргөлттэй хүснэгтүүдийн хувьд ( судалтай мөр , судалтай багана , зөөгч мөр , идэвхтэй хүснэгт ) бид эдгээр эффектүүдийг хүснэгтийн бүх хувилбарт ажиллуулахын тулд зарим аргыг ашигласан :

--bs-table-bgБид захиалгат шинж чанартай хүснэгтийн нүдний арын дэвсгэрийг тохируулж эхэлдэг . Дараа нь хүснэгтийн бүх хувилбарууд нь хүснэгтийн нүднүүдийг өнгөөр будахын тулд тусгай шинж чанарыг тохируулна. Ингэснээр хагас тунгалаг өнгийг ширээний дэвсгэр болгон ашиглавал асуудалд орохгүй.
box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);Дараа нь бид хүснэгтийн нүднүүдэд заасан нүднүүдийн дээр давхарласан хайрцагны сүүдрийг нэмнэ background-color. Учир нь бид асар том тархалттай, бүдэгрүүлэхгүй, өнгө нь нэг хэвийн байх болно. Түүнээс хойш--bs-table-accent-bg бидэнд өгөгдмөл хайрцагны сүүдэр байхгүй.
.table-striped, .table-striped-columns, .table-hoverэсвэл .table-activeангиудын аль нэгийг нэмэхэд арын --bs-table-accent-bgдэвсгэрийг өнгө болгохын тулд хагас тунгалаг өнгийг тохируулна.
Хүснэгтийн хувилбар бүрийн хувьд бид тухайн --bs-table-accent-bgөнгөнөөс хамааран хамгийн их тодосгогч өнгийг үүсгэдэг. Жишээлбэл, өргөлтийн өнгө .table-primaryнь бараан өнгөтэй, харин .table-darkцайвар өргөлттэй байна.
Текст болон хүрээний өнгийг ижил аргаар үүсгэдэг бөгөөд тэдгээрийн өнгө нь анхдагчаар өвлөгддөг.

Хөшигний ард дараах байдалтай байна.

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

Хүснэгтийн хүрээ

Хилтэй ширээ

.table-borderedХүснэгт болон нүднүүдийн бүх талын хүрээг нэмнэ үү .

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

Өнгө өөрчлөхийн тулд хилийн өнгөний хэрэгслүүдийг нэмж болно:

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

Хил хязгааргүй хүснэгтүүд

.table-borderlessХил хязгааргүй хүснэгтэд нэмнэ үү .

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

Жижиг ширээ

Бүх нүдийг хагасаар огтолж, илүү нягтралтай .table-smболгохын тулд нэмнэ ..tablepadding

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

Хүснэгтийн бүлэг хуваагч

Хүснэгтийн бүлгүүдийн хооронд бүдүүн, бараан хүрээ нэмнэ— <thead>, <tbody>, болон <tfoot>-тэй .table-group-divider. border-top-color(Одоогоор бид хэрэглүүрийн анги өгөөгүй байгаа) -ийг өөрчилснөөр өнгийг тохируулна уу .

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@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>

Босоо зэрэгцүүлэх

Хүснэгтийн нүднүүд <thead>нь үргэлж босоо тэнхлэгийн дагуу доод талд байрлана. Хүснэгтийн нүднүүд нь өгөгдмөлөөр зэрэгцүүлэлтийг <tbody>өвлөн авдаг <table>бөгөөд дээд талд зэрэгцүүлдэг. Босоо зэрэгцүүлэх ангиудыг ашиглан шаардлагатай газарт дахин тохируулна уу.

Гарчиг 1	Гарчиг 2	Гарчиг 3	Гарчиг 4
Энэ нүд `vertical-align: middle;`нь хүснэгтээс удамшдаг	Энэ нүд `vertical-align: middle;`нь хүснэгтээс удамшдаг	Энэ нүд `vertical-align: middle;`нь хүснэгтээс удамшдаг	Энэ бол өмнөх нүднүүдэд босоо байрлал хэрхэн ажилладагийг харуулахын тулд нэлээд босоо зай эзлэх зорилготой зарим орлуулагч текст юм.
Энэ нүд `vertical-align: bottom;`нь хүснэгтийн мөрнөөс өвлөгдөнө	Энэ нүд `vertical-align: bottom;`нь хүснэгтийн мөрнөөс өвлөгдөнө	Энэ нүд `vertical-align: bottom;`нь хүснэгтийн мөрнөөс өвлөгдөнө	Энэ бол өмнөх нүднүүдэд босоо байрлал хэрхэн ажилладагийг харуулахын тулд нэлээд босоо зай эзлэх зорилготой зарим орлуулагч текст юм.
Энэ нүд `vertical-align: middle;`нь хүснэгтээс удамшдаг	Энэ нүд `vertical-align: middle;`нь хүснэгтээс удамшдаг	Энэ нүд нь дээд талд зэрэгцсэн байна.	Энэ бол өмнөх нүднүүдэд босоо байрлал хэрхэн ажилладагийг харуулахын тулд нэлээд босоо зай эзлэх зорилготой зарим орлуулагч текст юм.

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

Үүрлэх

Хүрээний хэв маяг, идэвхтэй хэв маяг, хүснэгтийн хувилбарууд нь үүрлэсэн хүснэгтээр өвлөгддөггүй.

Эхлээд

Сүүлийн

Бариул

Марк

Отто

@mdo

Толгой хэсэг	Толгой хэсэг	Толгой хэсэг
А	Эхлээд	Сүүлийн
Б	Эхлээд	Сүүлийн
C	Эхлээд	Сүүлийн

Ларри

шувуу

@twitter

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

Үүрлэх нь хэрхэн ажилладаг

Хүснэгтүүд рүү ямар нэгэн хэв маяг урсахаас сэргийлэхийн тулд >бид CSS-д хүүхэд нэгтгэгч ( ) сонгогчийг ашигладаг. Бид , , болон доторх бүх tds ба ths- г чиглүүлэх шаардлагатай тул үүнгүйгээр сонгогч маань нэлээд урт харагдах болно. Иймээс бид бүх s болон s- д чиглүүлэхийн тулд нэлээд сондгой харагдах сонгогчийг ашигладагtheadtbodytfoot.table > :not(caption) > * > *tdth.table д чиглүүлэхийн тулд ашигладаг , гэхдээ ямар ч боломжит үүрлэсэн хүснэгтүүдийн аль нь ч биш.

Хэрэв та <tr>хүснэгтийн шууд хүүхэд гэж s-г нэмбэл тэдгээр нь анхдагчаар <tr>a -д ороогдон сонгогчид маань зориулалтын дагуу ажиллах болно гэдгийг анхаарна уу.<tbody>

Анатоми

Ширээний толгой

Хүснэгтүүд болон бараан хүснэгтүүдтэй адилаар s-г цайвар эсвэл хар саарал өнгөтэй .table-lightболгохын .table-darkтулд өөрчлөх ангиудыг ашиглана уу.<thead>

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Ларри	шувуу	@twitter

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

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Ларри	шувуу	@twitter

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

Ширээний хөл

#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Ларри	шувуу	@twitter
Хөл хэсэг	Хөл хэсэг	Хөл хэсэг	Хөл хэсэг

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

Тайлбар

Хүснэгтийн <caption>гарчиг шиг функцийг гүйцэтгэдэг. Энэ нь дэлгэц уншигчтай хэрэглэгчдэд хүснэгтийг хайж олоход тусалдаг бөгөөд энэ нь юу болохыг ойлгох, мөн үүнийг уншихыг хүсч байгаагаа шийдэхэд тусалдаг.

Хэрэглэгчдийн жагсаалт
#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

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

Та мөн <caption>ширээний дээд талд байрлуулж болно .caption-top.

Хэрэглэгчдийн жагсаалт
#	Эхлээд	Сүүлийн	Бариул
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Ларри	шувуу	@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>

Хариуцлагатай хүснэгтүүд

Хариуцлагатай хүснэгтүүд нь хүснэгтийг хэвтээ байдлаар хялбархан гүйлгэх боломжийг олгодог. -аар боож, бүх харах хэсэгт ямар ч хүснэгтийг хариу үйлдэл үзүүлэх .tableболомжтой .table-responsiveболгоно. Эсвэл хариулах хүснэгттэй байх хамгийн дээд цэгийг ашиглан сонгоно уу .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Босоо хайчлах/тайрах

Хариуцлагатай хүснэгтүүд нь хүснэгтийн overflow-y: hiddenдоод эсвэл дээд ирмэгээс хэтэрсэн аливаа контентыг хасдаг -г ашигладаг. Ялангуяа энэ нь унждаг цэс болон бусад гуравдагч талын виджетүүдийг таслах боломжтой.

Үргэлж хариу үйлдэл үзүүлдэг

Таслах цэг болгон .table-responsiveдээр хэвтээ гүйлгэх хүснэгтүүдийг ашиглана уу.

#	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг
1	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс
2	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс
3	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс

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

Тодорхой таслах цэг

.table-responsive{-sm|-md|-lg|-xl|-xxl}Тодорхой таслах цэг хүртэл хариу үйлдэл үзүүлэх хүснэгт үүсгэхийн тулд шаардлагатай бол ашиглана уу. Энэ цэгээс дээш, хүснэгт хэвийн ажиллах бөгөөд хэвтээ байдлаар гүйлгэхгүй.

Эдгээр хүснэгтүүд нь тодорхой харагдах цонхны өргөнд хариу үйлдэл үзүүлэх хүртэл эвдэрсэн мэт харагдаж болно.

#	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг
1	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс
2	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс
3	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс

#	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг
1	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс
2	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс
3	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс

#	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг
1	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс
2	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс
3	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс

#	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг
1	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс
2	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс
3	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс

#	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг
1	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс
2	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс
3	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс

#	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг	Гарчиг
1	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс
2	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс
3	Эс	Эс	Эс	Эс	Эс	Эс	Эс	Эс

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

Сасс

Хувьсагч

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

Гогцоо

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

Тохируулах

Хүчин зүйлийн хувьсагч ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) ашигладаг.
Цайвар, бараан ширээний хувилбаруудаас гадна сэдэвчилсэн өнгийг $table-bg-scaleхувьсагчаар гэрэлтүүлдэг.