Пређи на главни садржај Прескочи на навигацију докумената
in English

Табле

Документација и примери за избор стилова табела (с обзиром на њихову преовлађујућу употребу у ЈаваСцрипт додацима) са Боотстрап-ом.

На овој страници

Преглед

Због широко распрострањене употребе <table>елемената у виџетима трећих страна као што су календари и бирачи датума, Боотстрап табеле су укључене . Додајте основну класу .tableбило којој <table>, а затим проширите нашим опционим класама модификатора или прилагођеним стиловима. Сви стилови табела нису наслеђени у Боотстрапу, што значи да се све угнежђене табеле могу стилизовати независно од родитеља.

Користећи најосновније ознаке табеле, ево како .tableизгледају табеле засноване на Боотстрапу.

# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<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 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<table class="table table-striped">
  ...
</table>

Ове класе се такође могу додати варијантама табеле:

# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<table class="table table-dark table-striped">
  ...
</table>
# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<table class="table table-success table-striped">
  ...
</table>

Лебдећи редови

Додајте .table-hoverда бисте омогућили стање лебдења на редовима табеле у оквиру <tbody>.

# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<table class="table table-hover">
  ...
</table>
# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<table class="table table-dark table-hover">
  ...
</table>

Ови лебдећи редови се такође могу комбиновати са пругастом варијантом:

# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<table class="table table-striped table-hover">
  ...
</table>

Активне табеле

Истакните ред или ћелију табеле додавањем .table-activeкласе.

# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<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 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<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 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<table class="table table-bordered">
  ...
</table>

Услужни програми за боје ивице могу се додати за промену боја:

# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<table class="table table-bordered border-primary">
  ...
</table>

Табеле без граница

Додајте .table-borderlessза табелу без граница.

# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<table class="table table-borderless">
  ...
</table>
# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<table class="table table-dark table-borderless">
  ...
</table>

Мали столови

Додајте .table-smда бисте .tableбили компактнији тако што ћете преполовити све ћелије padding.

# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<table class="table table-sm">
  ...
</table>
# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<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>

Нестинг

Угнежђене табеле не наслеђују стилове ивица, активни стилови и варијанте табела.

# Први Ласт Дршка
1 Марк Отто @мдо
Хеадер Хеадер Хеадер
А Први Ласт
Б Први Ласт
Ц Први Ласт
3 Ларри птица @твиттер 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Како функционише гнежђење

Да бисмо спречили да било који стил процури у угнежђене табеле, користимо >селектор комбинатора деце ( ) у нашем ЦСС-у. Пошто морамо да циљамо све tdс и thс у thead, tbody, и tfoot, наш селектор би изгледао прилично дуго без њега. Као такав, користимо .table > :not(caption) > * > *селектор прилично чудног изгледа да циљамо све tdс и thс у .table, али ниједну од потенцијалних угнежђених табела.

Имајте на уму да ако додате <tr>с као директну децу табеле, они <tr>ће бити подразумевано умотани у а <tbody>, чиме ће наши селектори радити како је предвиђено.

Анатомија

Глава стола

Слично табелама и тамним табелама, користите класе модификатора .table-lightили .table-darkда бисте учинили да <thead>с изгледа светло или тамно сиво.

# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Ларри птица @твиттер 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Ларри птица @твиттер 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Стоно стопало

# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Ларри птица @твиттер
Подножје Подножје Подножје Подножје 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Наслови

Функционише <caption>као наслов за табелу. Помаже корисницима са читачима екрана да пронађу табелу и разумеју о чему се ради и одлуче да ли желе да је прочитају.

Списак корисника
# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Такође можете ставити <caption>на врх стола помоћу .caption-top.

Списак корисника
# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Ларри птица @твиттер 
<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променљивом.