Source

Stoły

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

Przykłady

Ze względu na powszechne stosowanie tabel w widżetach innych firm, takich jak kalendarze i selektory dat, zaprojektowaliśmy nasze tabele tak, aby były dostępne . Po prostu dodaj klasę bazową .tabledo any <table>, a następnie rozszerz ją o niestandardowe style lub różne dołączone klasy modyfikatorów.

Korzystając z najbardziej podstawowych znaczników tabeli, oto jak .tablewyglądają tabele oparte na tabeli w Bootstrap. Wszystkie style tabel są dziedziczone w Bootstrap 4 , co oznacza, że wszelkie tabele zagnieżdżone będą stylizowane w taki sam sposób jak rodzic.

#	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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Możesz także odwrócić kolory — z jasnym tekstem na ciemnym tle — za pomocą .table-dark.

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

<table class="table table-dark">
  <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>

Opcje głowicy stołu

Podobnie jak w przypadku tabel i ciemnych tabel, użyj klas modyfikatorów .thead-lightlub .thead-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

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

<table class="table">
  <thead class="thead-dark">
    <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 class="table">
  <thead class="thead-light">
    <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>

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

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

<table class="table table-striped table-dark">
  <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>

Stół z obramowaniem

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

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

<table class="table table-bordered table-dark">
  <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>

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

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

<table class="table table-hover table-dark">
  <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>

Mały stół

Dodaj .table-sm, aby stoły były bardziej zwarte, przecinając wypełnienie komórek na pół.

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

<table class="table table-sm">
  <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>

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

<table class="table table-sm table-dark">
  <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>

Zajęcia kontekstowe

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

Klasa	Nagłówek	Nagłówek
Aktywny	Komórka	Komórka
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 rows -->
<tr class="table-active">...</tr>

<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-active">...</td>

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

Zwykłe warianty tła stołu nie są dostępne w przypadku ciemnego stołu, jednak możesz użyć narzędzi tekstu lub tła , aby uzyskać podobne style.

#	Nagłówek	Nagłówek
1	Komórka	Komórka
2	Komórka	Komórka
3	Komórka	Komórka
4	Komórka	Komórka
5	Komórka	Komórka
6	Komórka	Komórka
7	Komórka	Komórka
8	Komórka	Komórka
9	Komórka	Komórka

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</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 .sr-onlyklasą.

Twórz responsywne tabele, zawijając dowolne .tableza pomocą .table-responsive{-sm|-md|-lg|-xl}, dzięki czemu tabela przewija się poziomo w każdym punkcie max-widthprzerwania (ale nie wliczając) odpowiednio do 576 pikseli, 768 pikseli, 992 pikseli i 1120 pikseli.

Należy pamiętać, że ponieważ przeglądarki nie obsługują obecnie zapytań kontekstu zakresu , omijamy ograniczenia prefiksów min-imax- okien ekranu z szerokościami ułamkowymi (co może wystąpić w pewnych warunkach na przykład na urządzeniach o wysokiej rozdzielczości), używając do tych porównań wartości o większej precyzji .

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">
  <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}.

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

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

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

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

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

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