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>

Stół bez obramowania

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">
  <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-borderlessmoż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-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.

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>