Source

Mese

Documentație și exemple pentru stilul de înscriere a tabelelor (având în vedere utilizarea predominantă a acestora în pluginurile JavaScript) cu Bootstrap.

Exemple

Datorită utilizării pe scară largă a tabelelor în widget-urile terță parte, cum ar fi calendarele și selectorul de date, am conceput tabelele noastre pentru a fi înscrise . Doar adăugați clasa de bază .tablela orice <table>, apoi extindeți cu stiluri personalizate sau cu diferitele noastre clase de modificatori incluse.

Folosind cel mai simplu marcaj de tabel, iată cum .tablearată tabelele bazate pe -în Bootstrap. Toate stilurile de tabel sunt moștenite în Bootstrap 4 , ceea ce înseamnă că orice tabel imbricat va fi stilat în același mod ca și cel părinte.

# Primul Ultimul Mâner
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry Pasarea @stare de nervozitate 
<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>

De asemenea, puteți inversa culorile—cu text deschis pe fundal închis—cu .table-dark.

# Primul Ultimul Mâner
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry Pasarea @stare de nervozitate 
<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>

Opțiuni pentru cap de masă

Similar cu tabelele și tabelele întunecate, utilizați clasele modificatoare .thead-lightsau .thead-darkpentru a face <thead>s să pară gri deschis sau închis.

# Primul Ultimul Mâner
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry Pasarea @stare de nervozitate
# Primul Ultimul Mâner
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry Pasarea @stare de nervozitate 
<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>

Rânduri în dungi

Utilizați .table-stripedpentru a adăuga dungi zebră la orice rând de tabel din <tbody>.

# Primul Ultimul Mâner
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry Pasarea @stare de nervozitate 
<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>
# Primul Ultimul Mâner
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry Pasarea @stare de nervozitate 
<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>

Masă mărginită

Adăugați .table-borderedpentru chenarele de pe toate părțile tabelului și ale celulelor.

# Primul Ultimul Mâner
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry pasărea @stare de nervozitate 
<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>
# Primul Ultimul Mâner
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry pasărea @stare de nervozitate 
<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>

Masa fara margini

Adăugați .table-borderlesspentru un tabel fără margini.

# Primul Ultimul Mâner
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry pasărea @stare de nervozitate 
<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-borderlesspoate fi folosit și pe mese întunecate.

# Primul Ultimul Mâner
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry pasărea @stare de nervozitate 
<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>

Rânduri hoverabile

Adăugați .table-hoverpentru a activa starea de trecere cu mouse-ul pe rândurile de tabel dintr-un <tbody>.

# Primul Ultimul Mâner
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry pasărea @stare de nervozitate 
<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>
# Primul Ultimul Mâner
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry pasărea @stare de nervozitate 
<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>

Masa mica

Adăugați .table-smpentru a face mesele mai compacte, tăind umplutura celulară în jumătate.

# Primul Ultimul Mâner
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry pasărea @stare de nervozitate 
<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>
# Primul Ultimul Mâner
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry pasărea @stare de nervozitate 
<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>

Clasele contextuale

Utilizați clase contextuale pentru a colora rândurile de tabel sau celulele individuale.

Clasă Titlu Titlu
Activ Celulă Celulă
Mod implicit Celulă Celulă
Primar Celulă Celulă
Secundar Celulă Celulă
Succes Celulă Celulă
Pericol Celulă Celulă
Avertizare Celulă Celulă
Info Celulă Celulă
Ușoară Celulă Celulă
Întuneric Celulă Celulă 
<!-- 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>

Variantele obișnuite de fundal de tabel nu sunt disponibile cu tabelul întunecat, cu toate acestea, puteți utiliza utilitare de text sau de fundal pentru a obține stiluri similare.

# Titlu Titlu
1 Celulă Celulă
2 Celulă Celulă
3 Celulă Celulă
4 Celulă Celulă
5 Celulă Celulă
6 Celulă Celulă
7 Celulă Celulă
8 Celulă Celulă
9 Celulă Celulă 
<!-- 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>
Transmiterea sensului tehnologiilor de asistență

Folosirea culorii pentru a adăuga semnificație oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile indicate de culoare sunt fie evidente din conținutul în sine (de exemplu, textul vizibil), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .sr-onlyclasa.

Creați tabele receptive prin împachetarea oricăror .tablecu .table-responsive{-sm|-md|-lg|-xl}, făcând ca tabelul să deruleze orizontal la fiecare max-widthpunct de întrerupere de până la (dar fără a include) 576px, 768px, 992px și, respectiv, 1120px.

Rețineți că, deoarece browserele nu acceptă în prezent interogări de context de interval , rezolvăm limitările min-și max-prefixele și ferestrele de vizualizare cu lățimi fracționale (care pot apărea în anumite condiții pe dispozitive cu dpi ridicate, de exemplu) utilizând valori cu o precizie mai mare pentru aceste comparații .

Subtitrări

A <caption>funcționează ca un titlu pentru un tabel. Ajută utilizatorii cu cititoare de ecran să găsească un tabel și să înțeleagă despre ce este vorba și să decidă dacă doresc să-l citească.

Lista utilizatorilor
# Primul Ultimul Mâner
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry Pasarea @stare de nervozitate 
<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>

Tabele receptive

Tabelele responsive permit derularea cu ușurință a tabelelor pe orizontală. Faceți ca orice tabel să răspundă în toate ferestrele de vizualizare împachetând un .tablecu .table-responsive. Sau alegeți un punct de întrerupere maxim cu care să aveți un tabel receptiv până la folosind .table-responsive{-sm|-md|-lg|-xl}.

Tăiere/troncare verticală

Tabelele responsive folosesc overflow-y: hidden, care decupează orice conținut care depășește marginile de jos sau de sus ale tabelului. În special, aceasta poate tăia meniurile drop-down și alte widget-uri terță parte.

Întotdeauna receptiv

În fiecare punct de întrerupere, utilizați .table-responsivepentru tabelele cu defilare orizontală.

# Titlu Titlu Titlu Titlu Titlu Titlu Titlu Titlu Titlu
1 Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă
2 Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă
3 Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Specific punctului de întrerupere

Utilizați .table-responsive{-sm|-md|-lg|-xl}după cum este necesar pentru a crea tabele receptive până la un anumit punct de întrerupere. De la acel punct de întrerupere în sus, tabelul se va comporta normal și nu se va derula pe orizontală.

Aceste tabele pot apărea rupte până când stilurile lor receptive se aplică la anumite lățimi ale ferestrelor de vizualizare.

# Titlu Titlu Titlu Titlu Titlu Titlu Titlu Titlu
1 Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă
2 Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă
3 Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Titlu Titlu Titlu Titlu Titlu Titlu Titlu Titlu
1 Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă
2 Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă
3 Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Titlu Titlu Titlu Titlu Titlu Titlu Titlu Titlu
1 Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă
2 Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă
3 Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Titlu Titlu Titlu Titlu Titlu Titlu Titlu Titlu
1 Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă
2 Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă
3 Celulă Celulă Celulă Celulă Celulă Celulă Celulă Celulă 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>