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>

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

.table-borderlessgellir ei ddefnyddio hefyd ar fyrddau tywyll.

# Yn gyntaf Diweddaf Trin
1 Marc Otto @mdo
2 Jacob Thornton @braster
3 Larry yr Aderyn @twitter 
<table class="table table-borderless 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.

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 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# 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-md">
  <table class="table">
    ...
  </table>
</div>
# 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-lg">
  <table class="table">
    ...
  </table>
</div>
# 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-xl">
  <table class="table">
    ...
  </table>
</div>