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
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
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
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
#
Pierwszy
Ostatni
Uchwyt
1
Ocena
Otto
@mdo
2
Jakub
Thornton
@tłuszcz
3
Larry
ptak
@świergot
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
#
Pierwszy
Ostatni
Uchwyt
1
Ocena
Otto
@mdo
2
Jakub
Thornton
@tłuszcz
3
Larry ptak
@świergot
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-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
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
#
Pierwszy
Ostatni
Uchwyt
1
Ocena
Otto
@mdo
2
Jakub
Thornton
@tłuszcz
3
Larry ptak
@świergot
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
#
Pierwszy
Ostatni
Uchwyt
1
Ocena
Otto
@mdo
2
Jakub
Thornton
@tłuszcz
3
Larry ptak
@świergot
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
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
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 alternatywnych środkach, takich jak 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 do (ale nie wliczając) odpowiednio 576 pikseli, 768 pikseli, 992 pikseli i 1120 pikseli.
Należy pamiętać, że ponieważ przeglądarki nie obsługują obecnie zapytań kontekstowych o zakres , 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ę, zrozumieć, o co w niej chodzi, i 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
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
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.