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

Табели

Документација и примери за стилизирање на табели (со оглед на нивната распространета употреба во приклучоците за JavaScript) со Bootstrap.

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

Преглед

Поради широко распространетата употреба на <table>елементи низ графичките контроли од трети страни, како што се календарите и избирачите на датуми, табелите на Bootstrap се пријавуваат . Додајте ја основната класа .tableна која било <table>, потоа проширете ја со нашите опционални класи на модификатори или сопствени стилови. Сите стилови на табели не се наследени во Bootstrap, што значи дека сите вгнездени табели може да се стилизираат независно од матичната.

Користејќи го најосновното обележување на табелата, еве како .tableизгледаат табелите засновани во Bootstrap.

# Прво Последно Рачка
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за да станете .tableпокомпактни со пресекување на сите ќелии paddingна половина.

# Прво Последно Рачка
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>

Гнездење

Стиловите на границите, активните стилови и варијантите на табелите не се наследуваат со вгнездени табели.

# Прво Последно Рачка
1 Означи Ото @mdo
Заглавие Заглавие Заглавие
А Прво Последно
Б Прво Последно
В Прво Последно
3 Лери птицата @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 во thead, tbody, и tfoot, нашиот селектор би изгледал прилично долго без него. Како таков, го користиме .table > :not(caption) > * > *избирачот со прилично чуден изглед за да ги насочиме сите tds и ths од .table, но ниту една од потенцијалните вгнездени табели.

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

Анатомија

Глава на маса

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

# Прво Последно Рачка
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променливата.