in English

Таблицалар

Bootstrap ярдәмендә таблицаларны оптимальләштерү өчен документлар һәм мисаллар (аларның JavaScript плагиннарында киң кулланылышын исәпкә алып).

Бу биттә

Гомуми күзәтү

<table>Календарь һәм дата сайлау кебек өченче як виджетларында элементларның киң кулланылуы аркасында , Bootstrap таблицалары оптималь . Төп классны .tableтеләсә кемгә өстәгез <table>, аннары безнең өстәмә үзгәртүче классларыбыз яки махсус стильләр белән киңәйтегез. Барлык өстәл стильләре Bootstrap'та мирас түгел, димәк, ояланган өстәлләр ата-аналардан бәйсез ясалырга мөмкин.

Иң төп өстәл билгесен кулланып, монда .tableBootstrap-та нигезләнгән таблицалар.

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
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	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

Сызылган баганалар

.table-striped-columnsЗебра-стрипингны теләсә нинди өстәл баганасына өстәргә кулланыгыз .

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

Бу классларны өстәл вариантларына да өстәргә мөмкин:

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

Котлы юллар

.table-hoverА эчендә өстәл рәтләренә менү халәтен булдыру өчен өстәгез <tbody>.

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

Бу хәрәкәтчән юлларны сызыклы рәт варианты белән дә берләштереп була:

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

Актив таблицалар

.table-activeКласс өстәп өстәл рәтен яки шакмакны аерып алыгыз .

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
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	Ягъкуб	Торнтон	@fat
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
Tableәр өстәл варианты өчен без --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	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

Төсләрне үзгәртү өчен чик төсендәге коммуналь хезмәтләр өстәргә мөмкин:

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

Чиксез таблицалар

.table-borderlessЧиксез өстәл өстәгез .

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

Кечкенә өстәлләр

Барлык күзәнәкләрне яртыга бүлеп, тагын да компакт .table-smясарга өстәгез ..tablepadding

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

Өстәл төркемнәрен бүлүчеләр

Өстәл төркемнәре арасында калынрак чикне өстәгез, - <thead>, <tbody>һәм . Төсне үзгәртеп төсне көйләгез (без хәзерге вакытта файдалы класс тәкъдим итмибез).<tfoot>.table-group-dividerborder-top-color

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
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 һәм thларны максат итеп куярга кирәк thead, tbodyһәм tfoot, безнең селектор ансыз бик озын күренер иде. Шулай итеп, без барлык с һәм ларны .table > :not(caption) > * > *максат итү өчен бик сәер күренгән селектор кулланабыз , ләкин потенциаль ояланган таблицаларның берсе дә юк.tdth.table

Игътибар итегез, әгәр сез <tr>таблицаның туры балалары итеп өстәсәгез, алар килешү буенча <tr>төреләчәк <tbody>, шулай итеп безнең сайлап алучылар теләгәнчә эшлиләр.

Анатомия

Өстәл башы

Таблицаларга һәм кара өстәлләргә охшаган модификатор классларын кулланыгыз, .table-lightяисә ачык яки куе соры булып күренсен .table-darkөчен .<thead>

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри	Кош	@twitter

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

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри	Кош	@twitter

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

Өстәл аягы

#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри	Кош	@twitter
Аяк асты	Аяк асты	Аяк асты	Аяк асты

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

Язулар

<caption>Таблицага баш кебек функцияләр . Бу экран укучылары булган кулланучыларга таблицаны табарга һәм аның нәрсә икәнен аңларга һәм аны укырга теләгәннәрен хәл итәргә булыша.

Кулланучылар исемлеге
#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
3	Ларри Кош		@twitter

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

Сез шулай ук <caption>өстәлнең өстенә куя аласыз .caption-top.

Кулланучылар исемлеге
#	Башта	Соңгы	Тоткыч
1	Билге	Отто	@mdo
2	Ягъкуб	Торнтон	@fat
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>

Onsаваплы таблицалар

Onsаваплы таблицалар таблицаларны горизонталь яктан җиңел әйләндерергә мөмкинлек бирә. Барлык күренешләр буенча теләсә нинди таблицаны җаваплы итеп .tableясагыз .table-responsive. Яисә, кулланып, җаваплы таблицага ия булган максималь ноктаны сайлагыз .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Вертикаль кисү / кисү

Onsаваплы таблицалар кулланыла overflow-y: hidden, алар өстәлнең аскы яисә өске кырларыннан арткан эчтәлекне кисеп ала. Аерым алганда, бу тамчы менюларны һәм бүтән өченче як виджетларын кисәргә мөмкин.

Waysәрвакыт җаваплы

Breakәрбер нокта аша .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>

Сасс

Variзгәрешләр

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

Custзенчәләштерү

Таблицаның вариантларында контрастны билгеләү өчен фактор үзгәрүчәннәре ( $table-striped-bg-factor, $table-active-bg-factor& ) кулланыла.$table-hover-bg-factor
Якты һәм караңгы өстәл вариантларыннан кала, тема төсләре $table-bg-scaleүзгәрүчән белән җиңеләйтелә.