Source

Táblaí

Doiciméadú agus samplaí do stíleáil táblaí rogha an diúltaithe (i bhfianaise a n-úsáide forleithne i mbreiseáin JavaScript) le Bootstrap.

Samplaí

Mar gheall ar úsáid fhorleathan na dtáblaí ar fud ghiuirléidí tríú páirtí cosúil le féilirí agus roghnóirí dáta, dhearamar ár gcuid táblaí le bheith rogha an diúltaithe . Just a chur leis an rang bonn .tablele haon <table>, ansin a leathnú le stíleanna saincheaptha nó ár ranganna modhnóirí éagsúla san áireamh.

Ag baint úsáide as an marcáil tábla is bunúsaí, seo conas .tablea bhreathnaíonn táblaí bunaithe i Bootstrap. Faightear na stíleanna boird go léir le hoidhreacht i Bootstrap 4 , rud a chiallaíonn go mbeidh aon tábla neadaithe stílithe ar an mbealach céanna leis an tuismitheoir.

# Ar dtús seo caite Láimhseáil
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @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>

Is féidir leat na dathanna a inbhéartú freisin - le téacs éadrom ar chúlra dorcha - le .table-dark.

# Ar dtús seo caite Láimhseáil
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @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>

Roghanna ceann tábla

Cosúil le táblaí agus táblaí dorcha, bain úsáid as na haicmí mionathraithe .thead-lightnó .thead-darkchun <thead>cuma liath éadrom nó liath a chur ar s.

# Ar dtús seo caite Láimhseáil
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @twitter
# Ar dtús seo caite Láimhseáil
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @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>

Sraitheanna stiallacha

Bain úsáid as .table-stripedchun stiallacha séabra a chur le haon ró tábla laistigh den <tbody>.

# Ar dtús seo caite Láimhseáil
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @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>
# Ar dtús seo caite Láimhseáil
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @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>

Tábla teorann

Cuir .table-borderedle haghaidh teorainneacha ar gach taobh den tábla agus cealla.

# Ar dtús seo caite Láimhseáil
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @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>
# Ar dtús seo caite Láimhseáil
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @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>

Bord gan teorainn

Cuir .table-borderlessle haghaidh tábla gan teorainneacha.

# Ar dtús seo caite Láimhseáil
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @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-borderlessis féidir é a úsáid freisin ar táblaí dorcha.

# Ar dtús seo caite Láimhseáil
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @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>

Sraitheanna inchorraithe

Cuir .table-hoverleis chun staid ainlithe a chumasú ar na sraitheanna boird laistigh de <tbody>.

# Ar dtús seo caite Láimhseáil
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @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>
# Ar dtús seo caite Láimhseáil
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @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>

Tábla beag

Cuir .table-smleis na táblaí a dhéanamh níos dlúithe trí stuáil cille a ghearradh ina dhá leath.

# Ar dtús seo caite Láimhseáil
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @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>
# Ar dtús seo caite Láimhseáil
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @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>

Ranganna comhthéacsúla

Úsáid ranganna comhthéacsúla chun sraitheanna boird nó cealla aonair a dhathú.

Aicme Ceannteideal Ceannteideal
Gníomhach cill cill
Réamhshocrú cill cill
Bunscoile cill cill
Tánaisteach cill cill
Rath cill cill
Contúirt cill cill
Rabhadh cill cill
Eolas cill cill
Solas cill cill
Dorcha cill cill 
<!-- 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>

Níl malairtí cúlra tábla rialta ar fáil leis an tábla dorcha, áfach, is féidir leat úsáid a bhaint as fóntais téacs nó chúlra chun stíleanna comhchosúla a bhaint amach.

# Ceannteideal Ceannteideal
1 cill cill
2 cill cill
3 cill cill
4 cill cill
5 cill cill
6 cill cill
7 cill cill
8 cill cill
9 cill cill 
<!-- 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>
Brí a chur in iúl do theicneolaíochtaí cúnta

Ní thugann úsáid dath chun brí a chur leis ach tásc amhairc, nach gcuirfear in iúl d’úsáideoirí na dteicneolaíochtaí cúnta – mar léitheoirí scáileáin. Cinntigh go bhfuil an t-eolas atá sainaitheanta leis an dath soiléir ón ábhar féin (m.sh. an téacs infheicthe), nó go n-áirítear í ar mhodhanna eile, mar théacs breise i bhfolach leis an .sr-onlyrang.

Cruthaigh táblaí sofhreagracha trí aon cheann a fhilleadh .tablele .table-responsive{-sm|-md|-lg|-xl}, rud a fhágann go scrollaíonn an tábla go cothrománach ag gach max-widthbrisphointe suas go dtí (ach gan a bheith san áireamh) 576px, 768px, 992px, agus 1120px, faoi seach.

Tabhair faoi deara ós rud é nach dtacaíonn brabhsálaithe le fiosruithe comhthéacs raoin faoi láthair , oibrímid timpeall ar na teorainneacha min-agus na max-réimíreanna agus na hamharcphointí le leithead codánach (is féidir a bheith ann faoi choinníollacha áirithe ar ghléasanna ard-spásanna, mar shampla) trí luachanna le cruinneas níos airde a úsáid le haghaidh na gcomparáidí seo .

Fotheidil

Feidhmíonn A <caption>cosúil le ceannteideal le haghaidh tábla. Cabhraíonn sé le húsáideoirí le léitheoirí scáileáin tábla a aimsiú agus a thuiscint cad atá i gceist leis agus cinneadh a dhéanamh an bhfuil siad ag iarraidh é a léamh.

Liosta na n-úsáideoirí
# Ar dtús seo caite Láimhseáil
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @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>

Táblaí sofhreagracha

Ligeann táblaí sofhreagracha táblaí a scrollú go cothrománach gan stró. Déan tábla ar bith sofhreagrach thar gach radharc trí fhillteán a fhilleadh .tablele .table-responsive. Nó, roghnaigh brisphointe uasta chun tábla sofhreagrach a bheith agat suas go dtí trí úsáid a bhaint as .table-responsive{-sm|-md|-lg|-xl}.

Gearradh ingearach / teascadh

Baineann táblaí sofhreagracha úsáid as overflow-y: hidden, a ghearrann amach aon ábhar a théann thar imeall bun nó barr an tábla. Go háirithe, is féidir leis seo roghchláir anuas agus giuirléidí tríú páirtí eile a ghearradh amach.

I gcónaí sofhreagrach

Thar gach brisphointe, bain úsáid as .table-responsivele haghaidh táblaí scrollaithe cothrománach.

# Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal
1 cill cill cill cill cill cill cill cill cill
2 cill cill cill cill cill cill cill cill cill
3 cill cill cill cill cill cill cill cill cill 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Brisphointe sonrach

Bain úsáid as .table-responsive{-sm|-md|-lg|-xl}mar is gá chun táblaí sofhreagracha a chruthú suas go brisphointe ar leith. Ón brisphointe sin agus suas, iompróidh an tábla féin de ghnáth agus ní scrollóidh sé go cothrománach.

Seans go mbeidh cuma briste ar na táblaí seo go dtí go mbeidh a stíleanna freagrúla i bhfeidhm ar leithid an amhairc ar leith.

# Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal
1 cill cill cill cill cill cill cill cill
2 cill cill cill cill cill cill cill cill
3 cill cill cill cill cill cill cill cill 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal
1 cill cill cill cill cill cill cill cill
2 cill cill cill cill cill cill cill cill
3 cill cill cill cill cill cill cill cill 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal
1 cill cill cill cill cill cill cill cill
2 cill cill cill cill cill cill cill cill
3 cill cill cill cill cill cill cill cill 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal Ceannteideal
1 cill cill cill cill cill cill cill cill
2 cill cill cill cill cill cill cill cill
3 cill cill cill cill cill cill cill cill 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>