twitter-bootstrap => Stoły

Uwagi

Kolejność treści i złożone tabele Uważaj, aby styl zmiany tabeli zmieniał wizualną kolejność treści. Upewnij się, że zastosujesz ten styl tylko do dobrze uformowanych i prostych tabel danych (w szczególności nie używaj tego do tabel układu) z odpowiednimi komórkami nagłówka tabeli dla każdego wiersza i kolumny.

Ponadto ta klasa nie będzie działać poprawnie dla tabel z komórkami obejmującymi wiele wierszy lub kolumn (przy użyciu atrybutów rozpiętość wiersza lub colspan).

Podstawowy stół

Bootstrap definiuje niestandardową stylizację tabeli przy użyciu klasy .table . Wystarczy dodać klasę .table do dowolnego <table> aby zobaczyć poziome dzielniki i wypełnienie:

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Stolik z zaawansowaną stylizacją

Bootstrap zapewnia kilka klas dla zaawansowanego stylu tabeli.

Paski rzędów

Będziesz mieć tabelę z rzędami w paski, jeśli dodasz .table-striped :

<table class="table table-striped">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Uwaga:

Tabele w paski są stylizowane za pomocą selektora :nth-child CSS, który nie jest dostępny w przeglądarce Internet Explorer 8.

Stół graniczny

Będziesz miał tabelę z .table-bordered ze wszystkich stron tabeli i komórek, jeśli dodasz .table-bordered rozszerzeniem .table-bordered :

<table class="table table-bordered">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Najedź kursorem na rzędy

Jeśli dodasz .table-hover , będziesz mieć tabelę z podświetlonymi wierszami, gdy użytkownik znajdzie się nad wierszem:

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Stół skondensowany

Jeśli dodasz .table-condensed , domyślne wypełnienie komórki zostanie przecięte na pół, dzięki czemu uzyskasz bardziej kompaktowy stół:

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Klasy kontekstowe

Tabele ładowania początkowego obsługują kolory kontekstowe. Aby zmienić kolor tła wiersza lub komórki tabeli, wystarczy dodać jedną z następujących klas .active : .active , .success , .info , .warning , .danger

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr class="success"><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td class="info">Bloggs</td></tr>
  </tbody>
</table>

Tabele responsywne

Musisz utworzyć dowolną .table w kontenerze HTML z .table-responsive aby utworzyć responsywne tabele:

<div class="table-responsive">
  <table class="table">
    <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
    <tbody>
      <tr><td>John</td><td>Doe</td></tr>
      <tr><td>Fred</td><td>Bloggs</td></tr>
    </tbody>
  </table>
</div>

Elastyczne tabele będą przewijać się w poziomie na małych urządzeniach (<768px). Nie będzie różnic dla ekranów większych niż 768px.

Table Reflow - Pionowe nagłówki

Zdobycie stołu z pionowymi nagłówkami.

Bootstrap na Twitterze obsługuje teraz pionowy nagłówek na dobrze sformatowanej normalnej tabeli. Aby to osiągnąć, użyj klasy .table-reflow

Użyj .table-reflow bootstrapu .table-reflow na dobrze uformowanym stole, aby uzyskać stół z pionowymi nagłówkami. Dodatkowo możesz połączyć z użyciem .table-striped i .table-hover do najechania na kolumny tym razem.

<table class="table table-striped table-hover table-reflow">
    <thead>
        <tr>
            <th ><strong> First Name: </strong></th>
            <th ><strong> Last Name: </strong></th>
            <th ><strong> Email: </strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> John </td>
            <td> Doe </td>
            <td> [email protected] </td>
        </tr>
        <tr>
            <td> Joane </td>
            <td> Donald </td>
            <td> [email protected] </td>
        </tr>
    </tbody>
</table>

Powinieneś sprawdzić tutaj dokumentację alfa v4: twitter-bootstrap .table-reflow

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

twitter-bootstrap
Stoły

Szukaj…