Source

Byrddau

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

Enghreifftiau

Oherwydd y defnydd eang o dablau ar draws teclynnau trydydd parti fel calendrau a chodwyr dyddiadau, rydym wedi dylunio ein tablau i fod yn optio i mewn . Ychwanegwch y dosbarth sylfaen .tablei unrhyw <table>, yna ymestyn gydag arddulliau arferol neu ein dosbarthiadau addaswyr amrywiol.

Gan ddefnyddio'r marcio tabl mwyaf sylfaenol, dyma sut mae .tabletablau yn seiliedig ar edrych yn Bootstrap. Mae pob arddull bwrdd yn cael ei etifeddu yn Bootstrap 4 , sy'n golygu y bydd unrhyw fyrddau nythu yn cael eu steilio yn yr un modd â'r rhiant.

#	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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Gallwch hefyd wrthdroi'r lliwiau - gyda thestun ysgafn ar gefndiroedd tywyll - gyda .table-dark.

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

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

Opsiynau pen bwrdd

Yn debyg i dablau a thablau tywyll, defnyddiwch y dosbarthiadau addasydd .thead-lightneu .thead-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

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

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

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

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

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

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

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

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

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

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

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

Bwrdd bach

Ychwanegwch .table-smi wneud byrddau'n fwy cryno trwy dorri padin celloedd yn ei hanner.

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

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

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

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

Dosbarthiadau cyd-destunol

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

Dosbarth	Pennawd	Pennawd
Actif	Cell	Cell
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 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>

Nid oes amrywiadau cefndir tabl rheolaidd ar gael gyda'r tabl tywyll, fodd bynnag, gallwch ddefnyddio cyfleustodau testun neu gefndir i gyflawni arddulliau tebyg.

#	Pennawd	Pennawd
1	Cell	Cell
2	Cell	Cell
3	Cell	Cell
4	Cell	Cell
5	Cell	Cell
6	Cell	Cell
7	Cell	Cell
8	Cell	Cell
9	Cell	Cell

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

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 .sr-onlydosbarth.

Creu tablau ymatebol trwy lapio unrhyw un .tableâ .table-responsive{-sm|-md|-lg|-xl}, gan wneud i'r tabl sgrolio'n llorweddol ar bob max-widthtorbwynt hyd at (ond heb gynnwys) 576px, 768px, 992px, a 1120px, yn y drefn honno.

Sylwch, gan nad yw porwyr ar hyn o bryd yn cefnogi ymholiadau cyd-destun ystod , rydym yn gweithio o amgylch cyfyngiadau min-a max-rhagddodiaid a phyrth gwylio gyda lled ffracsiynol (a all ddigwydd o dan amodau penodol ar ddyfeisiau dpi uchel, er enghraifft) trwy ddefnyddio gwerthoedd gyda manylder uwch ar gyfer y cymariaethau hyn .

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">
  <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}.

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

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

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

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

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

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