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.

Ar an leathanach seo

Forbhreathnú

Mar gheall ar úsáid fhorleathan na n- eilimintí thar ghiuirléidí tríú páirtí cosúil le féilirí agus roghnóirí dáta, is rogha an diúltaithe<table> iad táblaí Bootstrap . Cuir an bunrang le haon , ansin leathnaigh lenár ranganna mionathraithe roghnacha nó ár stíleanna saincheaptha. Ní fhaightear gach stíl tábla le hoidhreacht i Bootstrap, rud a chiallaíonn gur féidir aon táblaí neadaithe a stíl neamhspleách ón tuismitheoir..table<table>

Ag baint úsáide as an marcáil tábla is bunúsaí, seo conas .tablea bhreathnaíonn táblaí bunaithe i Bootstrap.

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

Leaganacha

Úsáid ranganna comhthéacsúla chun táblaí, sraitheanna táblaí nó cealla aonair a dhathú.

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

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 .visually-hiddenrang.

Táblaí accented

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">
  ...
</table>

Is féidir na ranganna seo a chur le leaganacha táblaí freisin:

#	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 table-striped">
  ...
</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-success table-striped">
  ...
</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">
  ...
</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-dark table-hover">
  ...
</table>

Is féidir na sraitheanna inchorraithe seo a chomhcheangal leis an leagan stríocach freisin:

#	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-hover">
  ...
</table>

Táblaí gníomhacha

Aibhsigh sraith tábla nó cill trí .table-activerang a chur leis.

#	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>
    ...
  </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>

#	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>
    ...
  </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>

Conas a oibríonn na malairtí agus táblaí accented?

Maidir leis na táblaí accented ( sraitheanna stiallacha , sraitheanna inchorraithe , agus táblaí gníomhacha ) , úsáideamar roinnt teicníochtaí chun na héifeachtaí seo a chur ag obair dár leagan táblaí go léir :

Tosaímid trí chúlra cille tábla a shocrú leis an --bs-table-bgmaoin saincheaptha. Socraíonn gach leagan tábla an t-airí saincheaptha sin chun na cealla tábla a dhathú. Ar an mbealach seo, ní féidir linn a bheith i dtrioblóid má úsáidtear dathanna leath-trédhearcacha mar chúlraí tábla.
Ansin cuirimid scáth bhosca inset ar na cealla boird agus cuirimid an box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ciseal ar bharr aon cheann sonraithe background-color. Toisc go n-úsáideann muid leathadh ollmhór agus gan aon doiléir, beidh an dath monotone. Ós rud --bs-table-accent-bgé nach bhfuil sé socraithe de réir réamhshocraithe, níl scáth bhosca réamhshocraithe againn.
Nuair a chuirtear ceachtar .table-striped, .table-hovernó .table-activeranganna leis, --bs-table-accent-bgsocraítear an dath go leath-thrédhearcach chun an cúlra a dhathú.
I gcás gach malairt tábla, ginimid --bs-table-accent-bgdath leis an gcodarsnacht is airde ag brath ar an dath sin. Mar shampla, tá an dath accent do .table-primaryníos dorcha agus .table-darktá dath accent níos éadroime.
Gintear dathanna téacs agus teorann ar an mbealach céanna, agus faightear a gcuid dathanna le hoidhreacht de réir réamhshocraithe.

Taobh thiar de na radhairc tá sé mar seo:

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

Teorainneacha tábla

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">
  ...
</table>

Is féidir fóntais dath teorann a chur leis chun dathanna a athrú:

#	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 border-primary">
  ...
</table>

Táblaí gan teorainneacha

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">
  ...
</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-dark table-borderless">
  ...
</table>

Táblaí beaga

Cuir .table-smle haon .tableníos dlúithe a dhéanamh trí gach cille a ghearradh paddingina 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">
  ...
</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-dark table-sm">
  ...
</table>

Ailíniú ingearach

Tá cealla tábla <thead>ailínithe ingearach leis an mbun i gcónaí. Tá na cealla tábla in <tbody>oidhreacht a n-ailínithe ón <table>mbarr mar réamhshocrú agus ailínithe leis an mbarr. Úsáid na haicmí ailínithe ingearacha chun athailíniú a dhéanamh nuair is gá.

Ceannteideal 1	Ceannteideal 2	Ceannteideal 3	Ceannteideal 4
Faigheann an chill seo oidhreacht `vertical-align: middle;`ón tábla	Faigheann an chill seo oidhreacht `vertical-align: middle;`ón tábla	Faigheann an chill seo oidhreacht `vertical-align: middle;`ón tábla	Seo cuid de théacs coinneálaí áitribh, atá beartaithe chun go leor spáis ingearach a thógáil, chun a léiriú conas a oibríonn an t-ailíniú ingearach sna cealla roimhe seo.
Faigheann an chill seo oidhreacht `vertical-align: bottom;`ón tsraith tábla	Faigheann an chill seo oidhreacht `vertical-align: bottom;`ón tsraith tábla	Faigheann an chill seo oidhreacht `vertical-align: bottom;`ón tsraith tábla	Seo cuid de théacs coinneálaí áitribh, atá beartaithe chun go leor spáis ingearach a thógáil, chun a léiriú conas a oibríonn an t-ailíniú ingearach sna cealla roimhe seo.
Faigheann an chill seo oidhreacht `vertical-align: middle;`ón tábla	Faigheann an chill seo oidhreacht `vertical-align: middle;`ón tábla	Tá an chill seo ailínithe leis an mbarr.	Seo cuid de théacs coinneálaí áitribh, atá beartaithe chun go leor spáis ingearach a thógáil, chun a léiriú conas a oibríonn an t-ailíniú ingearach sna cealla roimhe seo.

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

Neadaithe

Ní fhaigheann táblaí neadaithe stíleanna teorann, stíleanna gníomhacha, agus leagan táblaí le hoidhreacht.

Ar dtús

seo caite

Láimhseáil

Marcáil

Otto

@mdo

Ceanntásc	Ceanntásc	Ceanntásc
A	Ar dtús	seo caite
b	Ar dtús	seo caite
c	Ar dtús	seo caite

Larry

an t-éan

@twitter

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

Conas a oibríonn neadú

Chun aon stíleanna a chosc ó sceitheadh go táblaí neadaithe, bainimid úsáid as an >roghnóir combinator ( ) leanaí inár CSS. Ós rud é go gcaithfimid díriú ar na tds agus ths go léir sa thead, tbody, agus tfoot, bheadh cuma fhada ar ár roghnóir gan é. Mar sin, bainimid úsáid as an roghnóir cuma aisteach .table > :not(caption) > * > *chun díriú ar gach tdcuid thden .table, ach níl aon cheann de na táblaí neadaithe féideartha.

Tabhair faoi deara má chuireann tú <tr>s isteach mar leanaí díreacha boird, <tr>déanfar iad sin a fhilleadh i bhfoirm <tbody>réamhshocraithe, rud a fhágann go n-oibreoidh ár roghnóirí mar a bhí beartaithe.

Anatamaíocht

Ceann tábla

Cosúil le táblaí agus táblaí dorcha, bain úsáid as na haicmí mionathraithe .table-lightnó .table-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

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </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">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Cos boird

#	Ar dtús	seo caite	Láimhseáil
1	Marcáil	Otto	@mdo
2	Iacób	Thornton	@saille
3	Larry	an t-éan	@twitter
Buntásc	Buntásc	Buntásc	Buntásc

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

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 table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Is féidir leat freisin an <caption>ar bharr an tábla le .caption-top.

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

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

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

#	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

#	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

#	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

#	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

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

Athróga

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

Lúb

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

Saincheapadh

Úsáidtear na hathróga fachtóir ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) chun an chodarsnacht i leagan táblaí a aimsiú.
Seachas na leaganacha táblaí éadroma agus dorcha, déantar dathanna téama a éadromú leis an $table-bg-levelathróg.