Хүснэгтүүд

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>

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

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

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

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

<table class="table table-success table-striped">
  ...
</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-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));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

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

Хилтэй ширээ

.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>зэрэгцүүлэлтийг өвлөн авдаг <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

<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:                 $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:          $border-color;

$table-striped-order:         odd;

$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-levelхувьсагчаар гэрэлтүүлдэг.