in English

Byrddau

Dogfennaeth ac enghreifftiau ar gyfer arddull optio i mewn tablau (o ystyried eu defnydd cyffredin mewn ategion JavaScript) gyda Bootstrap.

Ar y dudalen hon

Trosolwg

Oherwydd y defnydd eang o <table>elfennau ar draws teclynnau trydydd parti fel calendrau a chodwyr dyddiadau, mae tablau Bootstrap yn optio i mewn . Ychwanegwch y dosbarth sylfaen .tablei unrhyw <table>, yna ymestyn gyda'n dosbarthiadau addasu dewisol neu arddulliau arferol. Nid yw pob arddull bwrdd wedi'i etifeddu yn Bootstrap, sy'n golygu y gellir steilio unrhyw fyrddau nythu yn annibynnol ar y rhiant.

Gan ddefnyddio'r marcio tabl mwyaf sylfaenol, dyma sut mae .tabletablau yn seiliedig ar edrych yn Bootstrap.

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@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>

Amrywiadau

Defnyddio dosbarthiadau cyd-destunol i liwio tablau, rhesi tablau neu gelloedd unigol.

Dosbarth	Pennawd	Pennawd
Diofyn	Cell	Cell
Cynradd	Cell	Cell
Uwchradd	Cell	Cell
Llwyddiant	Cell	Cell
Perygl	Cell	Cell
Rhybudd	Cell	Cell
Gwybodaeth	Cell	Cell
Ysgafn	Cell	Cell
Tywyll	Cell	Cell

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

Cyfleu ystyr i dechnolegau cynorthwyol

Mae defnyddio lliw i ychwanegu ystyr yn rhoi arwydd gweledol yn unig, na fydd yn cael ei gyfleu i ddefnyddwyr technolegau cynorthwyol - megis darllenwyr sgrin. Sicrhewch fod gwybodaeth a ddynodir gan y lliw naill ai'n amlwg o'r cynnwys ei hun (ee y testun gweladwy), neu'n cael ei chynnwys trwy ddulliau amgen, megis testun ychwanegol wedi'i guddio gyda'r .visually-hiddendosbarth.

Byrddau acennog

Rhesi streipiog

Defnyddiwch .table-stripedi ychwanegu stribedi sebra at unrhyw res tabl o fewn y <tbody>.

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

Gellir ychwanegu'r dosbarthiadau hyn at amrywiadau tablau hefyd:

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

Rhesi hofran

Ychwanegu .table-hoveri alluogi cyflwr hofran ar resi tabl o fewn <tbody>.

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

Gellir cyfuno'r rhesi hofran hyn hefyd â'r amrywiad streipiog:

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

Byrddau gweithredol

Amlygwch res bwrdd neu gell trwy ychwanegu .table-activedosbarth.

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@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>

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@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>

Sut mae'r amrywiadau a'r tablau ag acenion yn gweithio?

Ar gyfer y tablau acennog ( rhesi streipiog , rhesi hofranadwy , a thablau gweithredol ) , defnyddiwyd rhai technegau i wneud i'r effeithiau hyn weithio ar gyfer ein holl amrywiadau tablau :

Rydym yn dechrau trwy osod cefndir cell bwrdd gyda'r --bs-table-bgpriodwedd arferiad. Yna mae pob amrywiad tabl yn gosod yr eiddo arfer hwnnw i liwio'r celloedd bwrdd. Fel hyn, nid ydym yn mynd i drafferth os defnyddir lliwiau lled-dryloyw fel cefndiroedd bwrdd.
Yna rydym yn ychwanegu cysgod blwch mewnosod ar y celloedd bwrdd gyda box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);i haen ar ben unrhyw penodedig background-color. Oherwydd ein bod yn defnyddio gwasgariad enfawr a dim aneglurder, bydd y lliw yn undonog. Gan nad --bs-table-accent-bgyw wedi'i osod yn ddiofyn, nid oes gennym gysgod blwch rhagosodedig.
Pan ychwanegir naill ai .table-striped, .table-hoverneu .table-activeddosbarthiadau, --bs-table-accent-bgcaiff ei osod i liw lled-dryloyw i liwio'r cefndir.
Ar gyfer pob amrywiad tabl, rydym yn cynhyrchu --bs-table-accent-bglliw gyda'r cyferbyniad uchaf yn dibynnu ar y lliw hwnnw. Er enghraifft, mae'r lliw acen ar gyfer .table-primaryyn dywyllach tra bod .table-darkganddo liw acen ysgafnach.
Cynhyrchir lliwiau testun a border yr un ffordd, ac mae eu lliwiau'n cael eu hetifeddu yn ddiofyn.

Y tu ôl i'r llenni mae'n edrych fel hyn:

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

Ffiniau tabl

Byrddau ymylol

Ychwanegwch .table-borderedar gyfer borderi ar bob ochr i'r bwrdd a'r celloedd.

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

Gellir ychwanegu cyfleustodau lliw ffin i newid lliwiau:

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

Byrddau heb ffiniau

Ychwanegu .table-borderlessar gyfer bwrdd heb ffiniau.

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

Byrddau bach

Ychwanegwch .table-smi wneud unrhyw .tablefwy cryno trwy dorri'r holl gell paddingyn ei hanner.

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

Aliniad fertigol

Mae celloedd tabl <thead>bob amser wedi'u halinio'n fertigol i'r gwaelod. Mae celloedd tabl yn <tbody>etifeddu eu haliniad o'r <table>brig ac yn cael eu halinio i'r brig yn ddiofyn. Defnyddiwch y dosbarthiadau alinio fertigol i ail-alinio lle bo angen.

Pennawd 1	Pennawd 2	Pennawd 3	Pennawd 4
Mae'r gell hon yn etifeddu `vertical-align: middle;`o'r tabl	Mae'r gell hon yn etifeddu `vertical-align: middle;`o'r tabl	Mae'r gell hon yn etifeddu `vertical-align: middle;`o'r tabl	Dyma rywfaint o destun dalfan, y bwriedir iddo gymryd cryn dipyn o ofod fertigol, i ddangos sut mae'r aliniad fertigol yn gweithio yn y celloedd blaenorol.
Mae'r gell hon yn etifeddu `vertical-align: bottom;`o'r rhes tabl	Mae'r gell hon yn etifeddu `vertical-align: bottom;`o'r rhes tabl	Mae'r gell hon yn etifeddu `vertical-align: bottom;`o'r rhes tabl	Dyma rywfaint o destun dalfan, y bwriedir iddo gymryd cryn dipyn o ofod fertigol, i ddangos sut mae'r aliniad fertigol yn gweithio yn y celloedd blaenorol.
Mae'r gell hon yn etifeddu `vertical-align: middle;`o'r tabl	Mae'r gell hon yn etifeddu `vertical-align: middle;`o'r tabl	Mae'r gell hon wedi'i halinio i'r brig.	Dyma rywfaint o destun dalfan, y bwriedir iddo gymryd cryn dipyn o ofod fertigol, i ddangos sut mae'r aliniad fertigol yn gweithio yn y celloedd blaenorol.

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

Nythu

Nid yw tablau nythu yn etifeddu arddulliau ffin, arddulliau gweithredol, ac amrywiadau bwrdd.

Yn gyntaf

Diweddaf

Trin

Marc

Otto

@mdo

Pennawd	Pennawd	Pennawd
A	Yn gyntaf	Diweddaf
B	Yn gyntaf	Diweddaf
C	Yn gyntaf	Diweddaf

Larry

yr Aderyn

@twitter

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

Sut mae nythu'n gweithio

Er mwyn atal unrhyw arddulliau rhag gollwng i fyrddau nythu, rydyn ni'n defnyddio'r >dewisydd combinator ( ) plentyn yn ein CSS. Gan fod angen i ni dargedu'r holl tds ac ths yn y thead, tbody, a tfoot, byddai ein dewiswr yn edrych yn eithaf hir hebddo. O'r herwydd, rydym yn defnyddio'r dewisydd sy'n edrych braidd yn od .table > :not(caption) > * > *i dargedu pob un o'r tablau nythu tda'r thrhai .table, ond dim un o unrhyw dablau nythu posibl.

Sylwch, os ydych chi'n ychwanegu <tr>s fel plant uniongyrchol i fwrdd, bydd y rheini'n <tr>cael eu lapio mewn tabl yn <tbody>ddiofyn, gan wneud i'n dewiswyr weithio yn ôl y bwriad.

Anatomeg

Pen bwrdd

Yn debyg i dablau a thablau tywyll, defnyddiwch y dosbarthiadau addasydd .table-lightneu .table-darki wneud i <thead>s ymddangos yn llwyd golau neu dywyll.

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry	yr Aderyn	@twitter

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

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry	yr Aderyn	@twitter

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

Troed bwrdd

#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry	yr Aderyn	@twitter
Troedyn	Troedyn	Troedyn	Troedyn

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

Capsiynau

Mae <caption>swyddogaeth fel pennawd ar gyfer bwrdd. Mae'n helpu defnyddwyr gyda darllenwyr sgrin i ddod o hyd i dabl a deall beth mae'n ei olygu a phenderfynu a ydyn nhw am ei ddarllen.

Rhestr o ddefnyddwyr
#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

Gallwch hefyd roi'r <caption>ar ben y bwrdd gyda .caption-top.

Rhestr o ddefnyddwyr
#	Yn gyntaf	Diweddaf	Trin
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry	yr Aderyn	@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>

Tablau ymatebol

Mae tablau ymatebol yn caniatáu i dablau gael eu sgrolio'n llorweddol yn rhwydd. Gwnewch unrhyw fwrdd yn ymatebol ar draws yr holl fannau gwylio trwy lapio .tableâ .table-responsive. Neu, dewiswch dorbwynt uchaf i gael bwrdd ymatebol hyd ato trwy ddefnyddio .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Tocio fertigol / cwtogi

Mae tablau ymatebol yn defnyddio overflow-y: hidden, sy'n clipio oddi ar unrhyw gynnwys sy'n mynd y tu hwnt i ymylon gwaelod neu frig y tabl. Yn benodol, gall hyn dorri i ffwrdd dewislenni a widgets trydydd parti eraill.

Bob amser yn ymatebol

Ar draws pob torbwynt, defnyddiwch .table-responsivear gyfer tablau sgrolio llorweddol.

#	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

Penodol torbwynt

Defnyddiwch .table-responsive{-sm|-md|-lg|-xl|-xxl}yn ôl yr angen i greu tablau ymatebol hyd at dorbwynt penodol. O'r torbwynt hwnnw ac i fyny, bydd y bwrdd yn ymddwyn yn normal ac nid yn sgrolio'n llorweddol.

Mae'n bosibl y bydd y tablau hyn yn ymddangos wedi torri nes bod eu harddulliau ymatebol yn berthnasol ar led gwylfannau penodol.

#	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd	Pennawd
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<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

Newidynnau

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

Dolen

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

Addasu

Y newidynnau ffactor ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) i bennu'r cyferbyniad mewn amrywiadau tabl.
Ar wahân i'r amrywiadau bwrdd golau a thywyll, mae lliwiau thema'n cael eu hysgafnhau gan y $table-bg-levelnewidyn.