Tabelki Bootstrap 5

Podstawowa tabela

Podstawowa tabela Bootstrap 5 ma mały margines wewnętrzny oraz poziome linie oddzielające wiersze.

.table Dodaj podstawowy styl do tabeli:

Przykład

Spróbuj sam

Paskowane wiersze

.table-striped Dodaj paski do tabeli:

Przykład

Spróbuj sam

Tabela z ramką

.table-bordered Dodaj ramkę do wszystkich boków tabeli i komórek:

Przykład

Spróbuj sam

Wiersze z efektem podświetlenia

.table-hover Dodanie efektu podświetlenia (szary kolor tła) do wierszy tabeli:

Przykład

Spróbuj sam

Czarna/ciemna tabela

.table-dark Dodaj czarny tło do tabeli:

Przykład

Spróbuj sam

ciemnych, paskowanych tabel

łączenie .table-dark i .table-striped Stwórz ciemną, paskowaną tabelę:

Przykład

Spróbuj sam

Tabela z podświetlonymi wierszami

.table-hover Dodanie efektu podświetlenia (szary kolor tła) do wierszy tabeli:

Przykład

Spróbuj sam

Tabela bez ramki

.table-borderless Usunięcie ramki z tabeli:

Przykład

Spróbuj sam

klasy kontekstowe

Klasy kontekstowe mogą być używane do oznaczania całej tabeli (<table>)、wiersz tabeli (<tr>) lub komórki tabeli (<td>) kolorowanie.

Przykład

Spróbuj sam

Dostępne klasy kontekstowe:

Klasa Opis
.table-primary Niebieski: oznacza ważne działania.
.table-success Zielony: oznacza sukces lub pozytywne działanie.
.table-danger Czerwony: oznacza zagrożenie lub potencjalnie negatywne zachowanie.
.table-info Jasnoniebieski: oznacza neutralne zmiany informacji lub operacje.
.table-warning Oranżowy: oznacza ostrzeżenia, które warto zauważyć.
.table-active Szary: zastosuj kolor podkreślania do wierszy tabeli lub komórek tabeli.
.table-secondary Szary: oznacza działania mniej ważne.
.table-light Jasnoszary tło tabeli lub wiersza tabeli.
.table-dark Ciemnoszary tło tabeli lub wiersza tabeli.

Kolor nagłówka tabeli

Możesz również użyć dowolnej klasy kontekstowej tylko do dodania koloru tła do tytułu tabeli:

Przykład

Spróbuj sam

Mała tabela

.table-sm Klasa zmniejsza tabelę, dzieląc wypełnienie komórek na połowę:

Przykład

Spróbuj sam

Responsywne tabele

.table-responsive Klasa dodaje paski przewijania do tabeli, gdy jest to konieczne (gdy jest zbyt szeroka w kierunku poziomym):

Przykład

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Spróbuj sam

Możesz również zdecydować, kiedy tabela powinna uzyskać paski przewijania, w zależności od szerokości ekranu:

Klasa Szerokość ekranu
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Przykład

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

Spróbuj sam