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>

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 pentru text sau 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 sens 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 notate 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 mari, 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ă.

#	Titlu	Titlu	Titlu	Titlu	Titlu
1	Celulă	Celulă	Celulă	Celulă	Celulă
2	Celulă	Celulă	Celulă	Celulă	Celulă
3	Celulă	Celulă	Celulă	Celulă	Celulă

#	Titlu	Titlu	Titlu	Titlu	Titlu
1	Celulă	Celulă	Celulă	Celulă	Celulă
2	Celulă	Celulă	Celulă	Celulă	Celulă
3	Celulă	Celulă	Celulă	Celulă	Celulă

#	Titlu	Titlu	Titlu	Titlu	Titlu
1	Celulă	Celulă	Celulă	Celulă	Celulă
2	Celulă	Celulă	Celulă	Celulă	Celulă
3	Celulă	Celulă	Celulă	Celulă	Celulă

#	Titlu	Titlu	Titlu	Titlu	Titlu
1	Celulă	Celulă	Celulă	Celulă	Celulă
2	Celulă	Celulă	Celulă	Celulă	Celulă
3	Celulă	Celulă	Celulă	Celulă	Celulă

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

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

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

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