Mese

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

Pe aceasta pagina

Prezentare generală

Datorită utilizării pe scară largă a <table>elementelor în widget-urile terță parte, cum ar fi calendarele și selectorul de date, tabelele Bootstrap sunt înscrise . Adăugați clasa de bază .tablela orice <table>, apoi extindeți cu clasele noastre opționale modificatoare sau stiluri personalizate. Toate stilurile de tabel nu sunt moștenite în Bootstrap, ceea ce înseamnă că orice tabel imbricat poate fi stilat independent de părinte.

Folosind cel mai simplu marcaj de tabel, iată cum .tablearată tabelele bazate pe -în Bootstrap.

#	Primul	Ultimul	Mâner
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry pasărea		@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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Variante

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

Clasă	Titlu	Titlu
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 tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>

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 .visually-hiddenclasa.

Mese cu accent

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 pasărea		@stare de nervozitate

<table class="table table-striped">
  ...
</table>

Aceste clase pot fi adăugate și la variantele de tabel:

#	Primul	Ultimul	Mâner
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry pasărea		@stare de nervozitate

<table class="table table-dark table-striped">
  ...
</table>

#	Primul	Ultimul	Mâner
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry pasărea		@stare de nervozitate

<table class="table table-success table-striped">
  ...
</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">
  ...
</table>

#	Primul	Ultimul	Mâner
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry pasărea		@stare de nervozitate

<table class="table table-dark table-hover">
  ...
</table>

Aceste rânduri flotabile pot fi combinate și cu varianta cu dungi:

#	Primul	Ultimul	Mâner
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry pasărea		@stare de nervozitate

<table class="table table-striped table-hover">
  ...
</table>

Mesele active

Evidențiați un rând sau o celulă de tabel adăugând o .table-activeclasă.

#	Primul	Ultimul	Mâner
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry pasărea		@stare de nervozitate

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">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-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Cum funcționează variantele și tabelele accentuate?

Pentru tabelele cu accent ( rânduri cu dungi , rânduri hoverabile și tabele active ), am folosit câteva tehnici pentru a face ca aceste efecte să funcționeze pentru toate variantele noastre de tabel :

Începem prin a seta fundalul unei celule de tabel cu --bs-table-bgproprietatea personalizată. Toate variantele de tabel setează apoi acea proprietate personalizată pentru a colora celulele tabelului. În acest fel, nu avem probleme dacă culorile semi-transparente sunt folosite ca fundal de masă.
Apoi adăugăm o umbră de casetă inserată pe celulele tabelului cu box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);un strat deasupra oricărui strat specificat background-color. Pentru că folosim o răspândire uriașă și fără neclarități, culoarea va fi monotonă. Deoarece --bs-table-accent-bgeste nesetat în mod implicit, nu avem o umbră implicită pentru casetă.
Când sunt adăugate fie .table-striped, .table-hoverfie .table-activeclase, --bs-table-accent-bgeste setată la o culoare semitransparentă pentru a colora fundalul.
Pentru fiecare variantă de tabel generăm o --bs-table-accent-bgculoare cu cel mai mare contrast în funcție de culoarea respectivă. De exemplu, culoarea de accent pentru .table-primaryeste mai închisă, în timp ce .table-darkare o culoare de accent mai deschisă.
Culorile textului și ale marginilor sunt generate în același mod, iar culorile lor sunt moștenite în mod implicit.

În culise arată astfel:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Chenarele tabelului

Mese mărginite

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">
  ...
</table>

Pot fi adăugate utilitare pentru culoarea chenarului pentru a schimba culorile:

#	Primul	Ultimul	Mâner
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry pasărea		@stare de nervozitate

<table class="table table-bordered border-primary">
  ...
</table>

Mese fără 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">
  ...
</table>

#	Primul	Ultimul	Mâner
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry pasărea		@stare de nervozitate

<table class="table table-dark table-borderless">
  ...
</table>

Mese mici

Adăugați .table-smpentru a face .tablemai compact, tăind toate celulele paddingî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">
  ...
</table>

#	Primul	Ultimul	Mâner
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry pasărea		@stare de nervozitate

<table class="table table-dark table-sm">
  ...
</table>

Aliniere verticală

Celulele din tabel <thead>sunt întotdeauna aliniate vertical la partea de jos. Celulele din tabel <tbody>își moștenesc alinierea <table>și sunt aliniate la partea de sus în mod implicit. Folosiți clasele de aliniere verticală pentru a realinia acolo unde este necesar.

Titlul 1	Titlul 2	Titlul 3	Titlul 4
Această celulă moștenește `vertical-align: middle;`din tabel	Această celulă moștenește `vertical-align: middle;`din tabel	Această celulă moștenește `vertical-align: middle;`din tabel	Acesta este un text substituent, menit să ocupe destul de mult spațiu vertical, pentru a demonstra cum funcționează alinierea verticală în celulele precedente.
Această celulă moștenește `vertical-align: bottom;`din rândul tabelului	Această celulă moștenește `vertical-align: bottom;`din rândul tabelului	Această celulă moștenește `vertical-align: bottom;`din rândul tabelului	Acesta este un text substituent, menit să ocupe destul de mult spațiu vertical, pentru a demonstra cum funcționează alinierea verticală în celulele precedente.
Această celulă moștenește `vertical-align: middle;`din tabel	Această celulă moștenește `vertical-align: middle;`din tabel	Această celulă este aliniată la partea de sus.	Acesta este un text substituent, menit să ocupe destul de mult spațiu vertical, pentru a demonstra cum funcționează alinierea verticală în celulele precedente.

<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Cuibărire

Stilurile de chenar, stilurile active și variantele de tabel nu sunt moștenite de tabelele imbricate.

Primul

Ultimul

Mâner

marcă

Otto

@mdo

Antet	Antet	Antet
A	Primul	Ultimul
B	Primul	Ultimul
C	Primul	Ultimul

Larry

Pasarea

@stare de nervozitate

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Cum funcționează cuibărirea

Pentru a preveni scurgerea oricăror stiluri în tabelele imbricate, folosim >selectorul de combinator copil ( ) în CSS-ul nostru. Deoarece trebuie să vizam toate tds și ths din thead, tbody, și tfoot, selectorul nostru ar arăta destul de lung fără el. Ca atare, folosim .table > :not(caption) > * > *selectorul cu aspect destul de ciudat pentru a viza toate tds și ths ale .table, dar niciunul dintre eventualele tabele imbricate.

Rețineți că, dacă adăugați <tr>s ca copii direcți ai unui tabel, aceștia <tr>vor fi înfășurați în <tbody>mod implicit într-o, făcând astfel selectoarele noastre să funcționeze conform intenției.

Anatomie

Cap de masă

Similar cu tabelele și tabelele întunecate, utilizați clasele modificatoare .table-lightsau .table-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

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Primul	Ultimul	Mâner
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry	Pasarea	@stare de nervozitate

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Picior de masă

#	Primul	Ultimul	Mâner
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry	Pasarea	@stare de nervozitate
Subsol	Subsol	Subsol	Subsol

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

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 pasărea		@stare de nervozitate

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Puteți pune, de asemenea, <caption>pe partea de sus a mesei cu .caption-top.

Lista utilizatorilor
#	Primul	Ultimul	Mâner
1	marcă	Otto	@mdo
2	Iacov	Thornton	@gras
3	Larry	Pasarea	@stare de nervozitate

<table class="table caption-top">
  <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|-xxl}.

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, acest lucru 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|-xxl}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ă

#	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ă

#	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ă

#	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ă

#	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ă

#	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">
  <table class="table">
    ...
  </table>
</div>

<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>

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

Sass

Variabile

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Buclă

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Personalizare

Variabilele factor ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) sunt utilizate pentru a determina contrastul în variantele de tabel.
În afară de variantele de masă light & dark, culorile temei sunt luminate de $table-bg-levelvariabilă.