Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
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.

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
1 Ocena Otto @mdo
nagłówek nagłówek nagłówek
A Pierwszy Ostatni
B Pierwszy Ostatni
C Pierwszy Ostatni
3 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ą.