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ą .table
do 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 .table
wyglą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-light
lub .thead-dark
sprawić , 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-striped
do 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-bordered
dla 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>
Stół bez obramowania
Dodaj .table-borderless
do 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">
<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>
.table-borderless
może być również stosowany na ciemnych stołach.
# | Pierwszy | Ostatni | Uchwyt |
---|---|---|---|
1 | Ocena | Otto | @mdo |
2 | Jakub | Thornton | @tłuszcz |
3 | Larry ptak | @świergot |
<table class="table table-borderless 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-only
klasą.
Twórz responsywne tabele, zawijając dowolne .table
za pomocą .table-responsive{-sm|-md|-lg|-xl}
, dzięki czemu tabela przewija się poziomo w każdym punkcie max-width
przerwania (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ć.
# | 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 .table
znakiem .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-responsive
do 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.
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 |
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
# | 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-md">
<table class="table">
...
</table>
</div>
# | 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-lg">
<table class="table">
...
</table>
</div>
# | 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-xl">
<table class="table">
...
</table>
</div>