Téigh ar aghaidh chuig an bpríomhábhar Scipeáil chuig nascleanúint docs
in English

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.

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-hover.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 le hoidhreachtvertical-align: middle; ón tábla Faigheann an chill seo le hoidhreachtvertical-align: middle; ón tábla Faigheann an chill seo le hoidhreachtvertical-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 le hoidhreachtvertical-align: bottom; ón tsraith tábla Faigheann an chill seo le hoidhreachtvertical-align: bottom; ón tsraith tábla Faigheann an chill seo le hoidhreachtvertical-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 le hoidhreachtvertical-align: middle; ón tábla Faigheann an chill seo le hoidhreachtvertical-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
1 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
3 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-light.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

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