in English

Tabelid

Dokumentatsioon ja näited tabelite stiili valimiseks (arvestades nende levinud kasutamist JavaScripti pistikprogrammides) Bootstrapiga.

Sellel lehel

Ülevaade

Elementide laialdase kasutamise tõttu <table>kolmandate osapoolte vidinates, nagu kalendrid ja kuupäevavalijad, on Bootstrapi tabelid lubatud . Lisage põhiklass .tablemis tahes klassile <table>, seejärel laiendage seda meie valikuliste modifikaatoriklasside või kohandatud stiilidega. Kõik tabelistiilid ei ole Bootstrapis päritud, mis tähendab, et kõiki pesastatud tabeleid saab kujundada vanematest sõltumatult.

Kasutades kõige elementaarsemat tabelimärgistust, .tablenäeme Bootstrapis välja -põhised tabelid.

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind 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>

Variandid

Kasutage tabelite, tabeliridade või üksikute lahtrite värvimiseks kontekstuaalseid klasse.

Klass	Pealkiri	Pealkiri
Vaikimisi	Kamber	Kamber
Esmane	Kamber	Kamber
Teisene	Kamber	Kamber
Edu	Kamber	Kamber
Oht	Kamber	Kamber
Hoiatus	Kamber	Kamber
Info	Kamber	Kamber
Valgus	Kamber	Kamber
Tume	Kamber	Kamber

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

Abitehnoloogiate tähenduse edasiandmine

Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .visually-hiddenVeenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .

Rõhutabelid

Triibulised read

Kasutage .table-stripedsebraribade lisamiseks mis tahes tabelireale <tbody>.

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

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

Neid klasse saab lisada ka tabelivariantidele:

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

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

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

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

Hõljutavad read

Lisa .table-hover, et lubada hõljutusoleku tabeliridadel <tbody>.

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

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

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

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

Neid hõljutavaid ridu saab kombineerida ka triibulise variandiga:

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

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

Aktiivsed tabelid

.table-activeKlassi lisamisega tõstke esile tabeli rida või lahter .

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind 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>

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind 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>

Kuidas variandid ja rõhumärgiga tabelid töötavad?

Rõhumärgiga tabelite puhul ( triibulised read , hõljutavad read ja aktiivsed tabelid ) kasutasime mõningaid tehnikaid, et need efektid töötaksid kõigi meie tabelivariantide puhul :

--bs-table-bgAlustuseks määrame kohandatud atribuudiga tabeli lahtri tausta . Seejärel määravad kõik tabeli variandid selle kohandatud atribuudi tabeli lahtrite värvimiseks. Nii ei jää me hätta, kui tabeli taustana kasutatakse poolläbipaistvaid värve.
Seejärel lisame tabeli lahtritele sisestuskasti varju, et kihtida mis box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);tahes määratud elemendi peale background-color. Kuna kasutame tohutut laialivalgust ja ilma hägususeta, on värv monotoonne. Kuna --bs-table-accent-bgon vaikimisi määramata, ei ole meil vaikekasti varju.
Kui lisatakse kas või .table-stripedklassid , määratakse tausta värvimiseks poolläbipaistev värv..table-hover.table-active--bs-table-accent-bg
Iga tabelivariandi jaoks genereerime --bs-table-accent-bgolenevalt sellest värvist suurima kontrastsusega värvi. Näiteks on aktsentvärv .table-primarytumedam, samas kui .table-darksellel on heledam aktsentvärv.
Teksti ja ääriste värvid genereeritakse samal viisil ning nende värvid päritakse vaikimisi.

Kulisside taga näeb see välja selline:

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

Tabeli piirid

Ääristega lauad

.table-borderedTabeli ja lahtrite kõikide külgede ääriste lisamine .

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

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

Värvide muutmiseks saab lisada äärisevärvi utiliite :

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

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

Tabelid ilma ääristeta

Lisa .table-borderlessääristeta tabeli jaoks.

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

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

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

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

Väikesed lauad

Lisage .table-sm, et muuta see .tablekompaktsemaks, lõigates kogu lahtri paddingpooleks.

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

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

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

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

Vertikaalne joondus

Tabeli lahtrid <thead>on alati alaosaga vertikaalselt joondatud. Tabeli lahtrid <tbody>pärivad oma joonduse alates <table>ja joondatakse vaikimisi ülaosaga. Kasutage vertikaalse joondamise klasse, et vajadusel uuesti joondada.

Pealkiri 1	2. pealkiri	3. pealkiri	4. pealkiri
See lahter pärineb `vertical-align: middle;`tabelist	See lahter pärineb `vertical-align: middle;`tabelist	See lahter pärineb `vertical-align: middle;`tabelist	See siin on kohatäidetekst, mis on mõeldud üsna vähe vertikaalset ruumi, et näidata, kuidas vertikaalne joondus eelmistes lahtrites töötab.
See lahter pärib `vertical-align: bottom;`tabelirealt	See lahter pärib `vertical-align: bottom;`tabelirealt	See lahter pärib `vertical-align: bottom;`tabelirealt	See siin on kohatäidetekst, mis on mõeldud üsna vähe vertikaalset ruumi, et näidata, kuidas vertikaalne joondus eelmistes lahtrites töötab.
See lahter pärineb `vertical-align: middle;`tabelist	See lahter pärineb `vertical-align: middle;`tabelist	See lahter on joondatud ülaosaga.	See siin on kohatäidetekst, mis on mõeldud üsna vähe vertikaalset ruumi, et näidata, kuidas vertikaalne joondus eelmistes lahtrites töötab.

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

Pesitsemine

Ääriste stiile, aktiivseid stiile ja tabelivariante pesastatud tabelid ei päri.

Esiteks

Viimane

Käepide

Mark

Otto

@mdo

Päis	Päis	Päis
A	Esiteks	Viimane
B	Esiteks	Viimane
C	Esiteks	Viimane

Larry

lind

@twitter

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

Kuidas pesastamine toimib

Et vältida stiilide lekkimist pesastatud tabelitesse, kasutame >CSS-is alamkombinaatori ( ) valijat. Kuna peame sihtima kõiki tds-i ja ths-id thead, tbody, ja tfoot, näeks meie valija ilma selleta üsna pikk. Seetõttu kasutame üsna veidra välimusega .table > :not(caption) > * > *valijat, et sihtida kõiki tds ja ths .table, kuid mitte ühtegi potentsiaalset pesastatud tabelit.

Pange tähele, et kui lisate <tr>s-id tabeli otseste alamrühmadena, <tr>mähitakse <tbody>need vaikimisi a-sse, mis paneb meie valijad töötama ettenähtud viisil.

Anatoomia

Laua pea

Sarnaselt tabelitele ja tumedatele tabelitele kasutage muuteklasse .table-lightvõi .table-darkselleks, et muuta <thead>need heledaks või tumehalliks.

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Larry	lind	@twitter

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

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Larry	lind	@twitter

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

Laua jalg

#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Larry	lind	@twitter
Jalus	Jalus	Jalus	Jalus

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

Subtiitrid

Funktsioon <caption>toimib nagu tabeli pealkiri. See aitab ekraanilugejatega kasutajatel tabelit leida ja aru saada, millest see räägib, ning otsustada, kas nad soovivad seda lugeda.

Kasutajate loend
#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Lind Larry		@twitter

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

Võite ka <caption>laua ülaosale asetada .caption-top.

Kasutajate loend
#	Esiteks	Viimane	Käepide
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Larry	lind	@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>

Vastuvõtlikud tabelid

Tundlikud tabelid võimaldavad tabeleid hõlpsalt horisontaalselt kerida. Muutke mis tahes tabel kõigis vaateavades tundlikuks, mähkides .tabletähega .table-responsive. Või valige maksimaalne katkestuspunkt, millega kohanemisvõimeline tabel saavutada, kasutades .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertikaalne lõikamine/kärpimine

Tundlikud tabelid kasutavad funktsiooni overflow-y: hidden, mis lõikab ära igasuguse sisu, mis ulatub tabeli alumisest või ülemisest servast kaugemale. Eelkõige võib see välja lõigata rippmenüüd ja muud kolmanda osapoole vidinad.

Alati vastutulelik

.table-responsiveKasutage horisontaalselt kerivate tabelite jaoks igal murdepunktil .

#	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri
1	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
2	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
3	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber

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

Katkestuspunkti spetsiifiline

Kasutage .table-responsive{-sm|-md|-lg|-xl|-xxl}vastavalt vajadusele tundlike tabelite loomiseks kuni konkreetse katkestuspunktini. Alates sellest katkestuspunktist ja ülespoole hakkab tabel käituma tavapäraselt ja ei keri horisontaalselt.

Need tabelid võivad tunduda katkised, kuni nende reageerivad stiilid rakenduvad teatud vaateava laiustele.

#	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri
1	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
2	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
3	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber

#	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri
1	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
2	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
3	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber

#	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri
1	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
2	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
3	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber

#	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri
1	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
2	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
3	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber

#	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri
1	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
2	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
3	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber

#	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri	Pealkiri
1	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
2	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber
3	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber	Kamber

<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

Muutujad

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

Loop

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

Kohandamine

Tabelivariantide kontrastsuse määramiseks kasutatakse faktorimuutujaid ( $table-striped-bg-factor, $table-active-bg-factor& ).$table-hover-bg-factor
Peale heledate ja tumedate lauavariantide muudab teemavärve $table-bg-levelmuutuja heledamaks.