in English

Stoły

Dokumentacja i przykłady opt-in stylizacji tabel (biorąc pod uwagę ich powszechne zastosowanie we wtyczkach JavaScript) za pomocą Bootstrap.

Na tej stronie

Przegląd

Ze względu na powszechne stosowanie elementów w<table> widżetach innych firm, takich jak kalendarze i selektory dat, tabele Bootstrap są dostępne . Dodaj klasę bazową do any , a następnie rozszerz ją o nasze opcjonalne klasy modyfikatorów lub style niestandardowe. Wszystkie style tabel nie są dziedziczone w Bootstrap, co oznacza, że wszelkie tabele zagnieżdżone mogą być stylizowane niezależnie od rodzica..table<table>

Korzystając z najbardziej podstawowych znaczników tabeli, oto jak .tablewyglądają tabele oparte na tabeli w Bootstrap.

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

Warianty

Użyj klas kontekstowych, aby pokolorować tabele, wiersze tabeli lub pojedyncze komórki.

Klasa	Nagłówek	Nagłówek
Domyślna	Komórka	Komórka
Podstawowy	Komórka	Komórka
Wtórny	Komórka	Komórka
Powodzenie	Komórka	Komórka
Zagrożenie	Komórka	Komórka
Ostrzeżenie	Komórka	Komórka
Informacje	Komórka	Komórka
Światło	Komórka	Komórka
Ciemny	Komórka	Komórka

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

Nadawanie znaczenia technologiom wspomagającym

Użycie koloru w celu dodania znaczenia zapewnia jedynie wizualne wskazanie, które nie zostanie przekazane użytkownikom technologii wspomagających – takich jak czytniki ekranu. Upewnij się, że informacje oznaczone kolorem są oczywiste z samej treści (np. widoczny tekst) lub są zawarte w inny sposób, np. dodatkowy tekst ukryty z .visually-hiddenklasą.

Tabele z akcentami

Pasiaste rzędy

Służy .table-stripeddo dodawania pasków zebry do dowolnego wiersza tabeli w <tbody>.

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

Klasy te można również dodać do wariantów stołów:

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

Hoverable wiersze

Dodaj .table-hover, aby włączyć stan najechania na wiersze tabeli w ramach <tbody>.

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

Te unoszące się rzędy można również łączyć z wariantem w paski:

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

Aktywne stoły

Wyróżnij wiersz lub komórkę tabeli, dodając .table-activeklasę.

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

Jak działają warianty i akcentowane stoły?

W przypadku tabel akcentowanych ( wiersze w paski , wiersze z najechaniem i tabele aktywne ) zastosowaliśmy kilka technik , aby te efekty działały dla wszystkich naszych wariantów tabeli :

Zaczynamy od ustawienia tła komórki tabeli za pomocą --bs-table-bgwłaściwości niestandardowej. Wszystkie warianty tabeli następnie ustawiają tę właściwość niestandardową, aby kolorować komórki tabeli. W ten sposób nie wpadniemy w kłopoty, jeśli jako tła stołów użyjemy półprzezroczystych kolorów.
Następnie dodamy cień wstawki na komórki tabeli z box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);warstwą do na wierzchu dowolnego określonego background-color. Ponieważ używamy dużej rozpiętości i braku rozmycia, kolor będzie monotonny. Ponieważ --bs-table-accent-bgdomyślnie nie jest ustawiona, nie mamy domyślnego cienia pola.
Po dodaniu klas .table-striped, .table-hoverlub , ustawiany jest kolor półprzezroczysty, aby pokolorować tło..table-active--bs-table-accent-bg
Dla każdego wariantu stołu generujemy --bs-table-accent-bgkolor o największym kontraście w zależności od tego koloru. Na przykład kolor akcentu dla .table-primaryjest ciemniejszy, podczas gdy .table-darkma jaśniejszy kolor akcentu.
Kolory tekstu i obramowania są generowane w ten sam sposób, a ich kolory są domyślnie dziedziczone.

Za kulisami wygląda to tak:

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

Obramowania stołu

Obramowane stoły

Dodaj .table-bordereddla obramowań ze wszystkich stron tabeli i komórek.

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

Aby zmienić kolory, można dodać narzędzia kolorów obramowania :

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

Stoły bez granic

Dodaj .table-borderlessdo stołu bez obramowań.

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

Małe stoliki

Dodaj .table-sm, aby uzyskać .tablebardziej zwarty, przecinając wszystkie komórki paddingna pół.

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

Wyrównanie w pionie

Komórki tabeli <thead>są zawsze wyrównane w pionie do dołu. Komórki tabeli <tbody>dziedziczą swoje wyrównanie <table>i są domyślnie wyrównane do góry. Użyj klas wyrównania w pionie , aby ponownie wyrównać w razie potrzeby.

Nagłówek 1	Nagłówek 2	Nagłówek 3	Nagłówek 4
Ta komórka dziedziczy `vertical-align: middle;`z tabeli	Ta komórka dziedziczy `vertical-align: middle;`z tabeli	Ta komórka dziedziczy `vertical-align: middle;`z tabeli	Oto tekst zastępczy, który ma zająć sporo miejsca w pionie, aby pokazać, jak działa wyrównanie w pionie w poprzednich komórkach.
Ta komórka dziedziczy `vertical-align: bottom;`z wiersza tabeli	Ta komórka dziedziczy `vertical-align: bottom;`z wiersza tabeli	Ta komórka dziedziczy `vertical-align: bottom;`z wiersza tabeli	Oto tekst zastępczy, który ma zająć sporo miejsca w pionie, aby pokazać, jak działa wyrównanie w pionie w poprzednich komórkach.
Ta komórka dziedziczy `vertical-align: middle;`z tabeli	Ta komórka dziedziczy `vertical-align: middle;`z tabeli	Ta komórka jest wyrównana do góry.	Oto tekst zastępczy, który ma zająć sporo miejsca w pionie, aby pokazać, jak działa wyrównanie w pionie w poprzednich komórkach.

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

Zagnieżdżanie

Style obramowania, style aktywne i warianty tabel nie są dziedziczone przez tabele zagnieżdżone.

Pierwszy

Ostatni

Uchwyt

Ocena

Otto

@mdo

nagłówek	nagłówek	nagłówek
A	Pierwszy	Ostatni
B	Pierwszy	Ostatni
C	Pierwszy	Ostatni

Larry

ptak

@świergot

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

Jak działa zagnieżdżanie

Aby zapobiec wyciekowi stylów do zagnieżdżonych tabel, używamy >selektora podrzędnego kombinatora ( ) w naszym CSS. Ponieważ musimy skierować na cel wszystkie tds i ths w thead, tbodyi tfoot, nasz selektor wyglądałby dość długo bez niego. W związku z tym używamy dość dziwnie wyglądającego .table > :not(caption) > * > *selektora, aby kierować reklamy na wszystkie tds i th, .tableale nie na żadne potencjalne tabele zagnieżdżone.

Zauważ, że jeśli dodasz <tr>s jako bezpośrednie dzieci tabeli, <tr>zostaną one <tbody>domyślnie opakowane w a, dzięki czemu nasze selektory będą działać zgodnie z przeznaczeniem.

Anatomia

Głowa stołu

Podobnie jak w przypadku tabel i ciemnych tabel, użyj klas modyfikatorów .table-lightlub .table-darksprawić , by <thead>s wyglądały na jasno lub ciemnoszare.

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry	ptak	@świergot

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

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry	ptak	@świergot

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

Stopa stołu

#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry	ptak	@świergot
Stopka	Stopka	Stopka	Stopka

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

Napisy

Działa <caption>jak nagłówek tabeli. Pomaga użytkownikom czytników ekranu znaleźć tabelę i zrozumieć, o co w niej chodzi, a także zdecydować, czy chcą ją przeczytać.

Lista użytkowników
#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry ptak		@świergot

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

Możesz również postawić <caption>na blacie stołu za pomocą .caption-top.

Lista użytkowników
#	Pierwszy	Ostatni	Uchwyt
1	Ocena	Otto	@mdo
2	Jakub	Thornton	@tłuszcz
3	Larry	ptak	@świergot

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

Responsywne tabele

Responsywne tabele umożliwiają łatwe przewijanie tabel w poziomie. Spraw, aby każda tabela była responsywna we wszystkich rzutniach, otaczając a .tableznakiem .table-responsive. Lub wybierz maksymalny punkt przerwania, z którym chcesz mieć responsywną tabelę, używając .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Przycinanie/obcinanie w pionie

Responsywne tabele korzystają z narzędzia overflow-y: hidden, które odcina wszelkie treści wykraczające poza dolne lub górne krawędzie tabeli. W szczególności może to odciąć menu rozwijane i inne widżety innych firm.

Zawsze responsywny

W każdym punkcie przerwania używaj .table-responsivedo tabel przewijanych w poziomie.

#	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek
1	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka
2	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka
3	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka

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

Specyficzne dla punktu przerwania

Używaj .table-responsive{-sm|-md|-lg|-xl|-xxl}w razie potrzeby, aby tworzyć responsywne tabele do określonego punktu przerwania. Od tego punktu przerwania tabela będzie zachowywać się normalnie i nie będzie przewijać się w poziomie.

Te tabele mogą wyglądać na uszkodzone, dopóki ich responsywne style nie zostaną zastosowane w określonych szerokościach widocznego obszaru.

#	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek
1	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka
2	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka
3	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka

#	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek
1	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka
2	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka
3	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka

#	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek
1	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka
2	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka
3	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka

#	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek
1	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka
2	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka
3	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka

#	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek
1	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka
2	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka
3	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka

#	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek	Nagłówek
1	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka
2	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka
3	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka	Komórka

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

Sass

Zmienne

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

Pętla

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

Dostosowywanie

Zmienne czynnika ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) służą do określenia kontrastu w wariantach tabeli.
Oprócz jasnych i ciemnych wariantów stołów, kolory motywu są rozjaśniane przez $table-bg-levelzmienną.