Mize

Dokumentacija in primeri za opt-in oblikovanje tabel (glede na njihovo prevladujočo uporabo v vtičnikih JavaScript) z Bootstrapom.

Na tej strani

Pregled

Zaradi široke uporabe <table>elementov v pripomočkih tretjih oseb, kot so koledarji in izbirniki datumov, so tabele Bootstrap opt-in . Dodajte osnovni razred .tablekateremu koli <table>, nato razširite z našimi izbirnimi modifikatorskimi razredi ali slogi po meri. Vsi slogi tabel niso podedovani v Bootstrapu, kar pomeni, da je mogoče katero koli ugnezdeno tabelo oblikovati neodvisno od nadrejene.

Z uporabo najosnovnejšega označevanja tabel je prikazano, kako so .tabletabele na osnovi v Bootstrapu videti.

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

Različice

Uporabite kontekstualne razrede za barvanje tabel, vrstic tabel ali posameznih celic.

Razred	Naslov	Naslov
Privzeto	Celica	Celica
Primarni	Celica	Celica
Sekundarno	Celica	Celica
Uspeh	Celica	Celica
Nevarnost	Celica	Celica
Opozorilo	Celica	Celica
Informacije	Celica	Celica
Svetloba	Celica	Celica
Temno	Celica	Celica

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

Prenos pomena za podporne tehnologije

Uporaba barve za dodajanje pomena zagotavlja samo vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (npr. vidno besedilo) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .visually-hiddenrazredom.

Naglašene mize

Črtaste vrstice

Uporabite .table-stripedza dodajanje zebrastih črt v katero koli vrstico tabele znotraj <tbody>.

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

Te razrede je mogoče dodati tudi različicam tabel:

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

Lebdeče vrstice

Dodajte .table-hover, da omogočite stanje lebdenja nad vrsticami tabele znotraj <tbody>.

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

Te lebdeče vrstice lahko kombinirate tudi s črtasto različico:

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

Aktivne mize

Označite vrstico ali celico tabele z dodajanjem .table-activerazreda.

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

Kako delujejo različice in naglašene tabele?

Za naglašene tabele ( črtaste vrstice , lebdeče vrstice in aktivne tabele ) smo uporabili nekaj tehnik, da bi ti učinki delovali za vse naše različice tabel :

Začnemo z nastavitvijo ozadja celice tabele z --bs-table-bglastnostjo po meri. Vse različice tabele nato nastavijo to lastnost po meri za barvanje celic tabele. Tako ne zaidemo v težave, če za ozadje mize uporabimo polprosojne barve.
Nato dodamo senco vstavljenega polja na celice tabele s box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);plastjo na vrhu katerega koli podanega background-color. Ker uporabljamo velik razmik in brez zamegljenosti, bo barva monotona. Ker --bs-table-accent-bgni privzeto nastavljen, nimamo privzete sence polja.
Ko dodate razrede ali .table-striped, je nastavljen na polprosojno barvo za barvanje ozadja..table-hover.table-active--bs-table-accent-bg
Za vsako različico tabele ustvarimo --bs-table-accent-bgbarvo z največjim kontrastom glede na to barvo. Na primer, poudarjena barva za .table-primaryje temnejša, medtem ko .table-darkima poudarjeno svetlejšo barvo.
Barve besedila in obrob so ustvarjene na enak način, njihove barve pa so privzeto podedovane.

V zakulisju je videti takole:

@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));
  }
}

Obrobe tabele

Obrobljene mize

Dodajte .table-borderedza robove na vseh straneh tabele in celic.

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

Za spreminjanje barv je mogoče dodati pripomočke za barvo obrob :

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

Tabele brez robov

Dodaj .table-borderlessza mizo brez robov.

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

Majhne mize

.table-smČe želite .tablebolj kompaktno, dodajte vse celice paddingna pol.

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

Navpična poravnava

Celice tabele <thead>so vedno navpično poravnane na dno. Celice tabele <tbody>podedujejo svojo poravnavo <table>in so privzeto poravnane na vrh. Uporabite razrede navpične poravnave za ponovno poravnavo, kjer je to potrebno.

Naslov 1	Naslov 2	Naslov 3	Naslov 4
Ta celica deduje `vertical-align: middle;`iz tabele	Ta celica deduje `vertical-align: middle;`iz tabele	Ta celica deduje `vertical-align: middle;`iz tabele	Tukaj je nekaj nadomestnega besedila, ki naj bi zavzelo kar nekaj navpičnega prostora, da bi prikazali, kako deluje navpična poravnava v prejšnjih celicah.
Ta celica deduje `vertical-align: bottom;`iz vrstice tabele	Ta celica deduje `vertical-align: bottom;`iz vrstice tabele	Ta celica deduje `vertical-align: bottom;`iz vrstice tabele	Tukaj je nekaj nadomestnega besedila, ki naj bi zavzelo kar nekaj navpičnega prostora, da bi prikazali, kako deluje navpična poravnava v prejšnjih celicah.
Ta celica deduje `vertical-align: middle;`iz tabele	Ta celica deduje `vertical-align: middle;`iz tabele	Ta celica je poravnana na vrh.	Tukaj je nekaj nadomestnega besedila, ki naj bi zavzelo kar nekaj navpičnega prostora, da bi prikazali, kako deluje navpična poravnava v prejšnjih celicah.

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

Gnezdenje

Slogov obrob, aktivnih slogov in različic tabel ne podedujejo ugnezdene tabele.

najprej

Zadnji

Ročaj

Mark

Otto

@mdo

Glava	Glava	Glava
A	najprej	Zadnji
B	najprej	Zadnji
C	najprej	Zadnji

Larry

ptica

@twitter

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

Kako deluje gnezdenje

Da bi preprečili uhajanje kakršnih koli slogov v ugnezdene tabele, uporabljamo >izbirnik podrejenega kombinatorja ( ) v našem CSS. Ker moramo ciljati na vse tds in ths v thead, tbodyin tfoot, bi bil naš izbirnik videti precej dolg brez njega. Kot tak uporabljamo .table > :not(caption) > * > *izbirnik precej nenavadnega videza za ciljanje na vse tds in ths v .table, vendar na nobeno morebitno ugnezdeno tabelo.

Upoštevajte, da če dodate <tr>s kot neposredne podrejene tabele, bodo ti privzeto <tr>zaviti v a , tako da naši izbirniki delujejo, kot je predvideno.<tbody>

Anatomija

Glava mize

Podobno kot pri tabelah in temnih tabelah uporabite modifikatorske razrede .table-lightali .table-dark, da naredite <thead>svetlo ali temno sivo.

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Larry	ptica	@twitter

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

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Larry	ptica	@twitter

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

Noga za mizo

#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Larry	ptica	@twitter
Noga	Noga	Noga	Noga

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

Napisi

A <caption>deluje kot naslov za tabelo. Uporabnikom z bralniki zaslona pomaga najti tabelo in razumeti, za kaj gre, ter se odločiti, ali jo želijo prebrati.

Seznam uporabnikov
#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Ptica Larry		@twitter

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

Lahko tudi postavite <caption>na vrh tabele z .caption-top.

Seznam uporabnikov
#	najprej	Zadnji	Ročaj
1	Mark	Otto	@mdo
2	Jacob	Thornton	@debela
3	Larry	ptica	@twitter

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

Odzivne mize

Odzivne tabele omogočajo enostavno vodoravno pomikanje po tabelah. Poskrbite, da bo katera koli tabela odzivna v vseh pogledih, tako da ovijete a .tablez .table-responsive. Ali pa z uporabo izberite največjo prekinitveno točko, do katere želite imeti odzivno tabelo .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Navpično striženje/prirezovanje

Odzivne mize uporabljajo overflow-y: hiddenfunkcijo , ki izreže vso vsebino, ki presega spodnji ali zgornji rob tabele. To lahko zlasti izloči spustne menije in druge pripomočke tretjih oseb.

Vedno odziven

Čez vsako prelomno točko uporabite .table-responsiveza vodoravno pomikanje tabel.

#	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov
1	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
2	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
3	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica

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

Specifična prelomna točka

Po potrebi uporabite .table-responsive{-sm|-md|-lg|-xl|-xxl}za ustvarjanje odzivnih tabel do določene prekinitvene točke. Od te prelomne točke naprej se bo tabela obnašala normalno in se ne bo pomikala vodoravno.

Te tabele so lahko videti zlomljene, dokler njihovi odzivni slogi ne veljajo za določene širine vidnega polja.

#	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov
1	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
2	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
3	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica

#	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov
1	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
2	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
3	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica

#	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov
1	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
2	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
3	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica

#	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov
1	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
2	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
3	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica

#	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov
1	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
2	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
3	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica

#	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov	Naslov
1	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
2	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica
3	Celica	Celica	Celica	Celica	Celica	Celica	Celica	Celica

<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

Spremenljivke

$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%;

Zanka

$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,
);

Prilagajanje

Faktorske spremenljivke ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) se uporabljajo za določanje kontrasta v variantah tabele.
Poleg svetlih in temnih različic tabele so barve teme posvetljene s $table-bg-levelspremenljivko.