in English

Imbonerahamwe

Inyandiko n'ingero zo guhitamo-imbonerahamwe yimbonerahamwe (ukurikije imikoreshereze yabo muri plugin ya JavaScript) hamwe na Bootstrap.

Kuriyi page

Incamake

Bitewe no gukoresha <table>ibintu byinshi mugice cya gatatu cya widget nka kalendari hamwe nabatoranya amatariki, imbonerahamwe ya Bootstrap irahitamo . Ongeraho urwego shingiro .tablekuri buriwese <table>, hanyuma wagure hamwe nibyifuzo byacu byo guhindura cyangwa uburyo bwihariye. Imiterere yimeza yose ntabwo yarazwe muri Bootstrap, bivuze ko ameza yose yatondetse ashobora kwandikwa yigenga kubabyeyi.

Ukoresheje urutonde rwibanze rwibanze, dore uko .table-bishingiye kumeza reba muri Bootstrap.

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@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>

Ibihinduka

Koresha amasomo ajyanye n'amabara kumeza, umurongo wameza cyangwa selile zitandukanye.

Icyiciro	Umutwe	Umutwe
Mburabuzi	Akagari	Akagari
Ibanze	Akagari	Akagari
Secondary	Akagari	Akagari
Intsinzi	Akagari	Akagari
Akaga	Akagari	Akagari
Iburira	Akagari	Akagari
Amakuru	Akagari	Akagari
Umucyo	Akagari	Akagari
Umwijima	Akagari	Akagari

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

Gutanga ibisobanuro kubuhanga bufasha

Gukoresha ibara kugirango wongere ibisobanuro bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (urugero: inyandiko igaragara), cyangwa bigashyirwa muburyo butandukanye, nk'inyandiko y'inyongera ihishe hamwe .visually-hiddenn'ishuri.

Imbonerahamwe yemewe

Imirongo ikurikiranye

Koresha .table-stripedkugirango wongereho zebra-gukuramo kumurongo uwo ariwo wose kumurongo muri <tbody>.

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@twitter

<table class="table table-striped">
  ...
</table>

Aya masomo arashobora kandi kongerwaho muburyo bwo kumeza:

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@twitter

<table class="table table-dark table-striped">
  ...
</table>

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@twitter

<table class="table table-success table-striped">
  ...
</table>

Imirongo yemewe

Ongeraho .table-hoverkugirango ushoboze kugendagenda kumurongo kumurongo kumeza muri a <tbody>.

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@twitter

<table class="table table-hover">
  ...
</table>

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@twitter

<table class="table table-dark table-hover">
  ...
</table>

Iyi mirongo ishobora kugendana irashobora kandi guhuzwa hamwe nimirongo ihindagurika:

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@twitter

<table class="table table-striped table-hover">
  ...
</table>

Imbonerahamwe ifatika

Shyira kumurongo kumeza cyangwa selile wongeyeho urwego .table-active.

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@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>

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@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>

Nigute impinduka hamwe nameza ashimangira gukora?

Ku mbonerahamwe ishimangirwa ( umurongo ucagaguye , umurongo uhindagurika , hamwe nimbonerahamwe ikora ), twakoresheje tekinike zimwe kugirango izo ngaruka zikore kumeza yacu yose ameza :

Dutangira dushiraho inyuma yama selire hamwe --bs-table-bgnumutungo wihariye. Imbonerahamwe zose zahinduwe hanyuma ushireho umutungo wihariye kugirango uhindure amabara selile. Ubu buryo, ntabwo twinjira mubibazo niba igice-kibonerana amabara akoreshwa nkameza yimbere.
Noneho twongeyeho inset agasanduku igicucu kumeza ya selile hamwe box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);na layer hejuru yicyerekezo icyo aricyo cyose background-color. Kuberako dukoresha gukwirakwira cyane kandi nta guhubuka, ibara rizaba monotone. Kubera --bs-table-accent-bgko bidahwitse byanze bikunze, ntabwo dufite agasanduku gasanzwe.
Mugihe kimwe .table-striped, .table-hovercyangwa .table-activeibyiciro byongeweho, i --bs-table-accent-bgyashizwe kumurongo wa semitransparent ibara kugirango ibara inyuma.
Kuri buri mbonerahamwe ihindagurika, dukora --bs-table-accent-bgibara rifite itandukaniro rinini bitewe nibara. Kurugero, ibara ryibara rya .table-primaryni ryijimye mugihe .table-darkrifite ibara ryoroheje ryerekana.
Amabara yumupaka nimbibi byakozwe muburyo bumwe, kandi amabara yabo yarazwe muburyo budasanzwe.

Inyuma yinyuma birasa nkibi:

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

Imipaka

Imbonerahamwe ihana imbibi

Ongeraho .table-borderedimipaka kumpande zose zameza na selile.

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@twitter

<table class="table table-bordered">
  ...
</table>

Imipaka yibara ryibikoresho irashobora kongerwaho kugirango uhindure amabara:

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@twitter

<table class="table table-bordered border-primary">
  ...
</table>

Imbonerahamwe idafite imipaka

Ongeraho .table-borderlesskumeza idafite imipaka.

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@twitter

<table class="table table-borderless">
  ...
</table>

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@twitter

<table class="table table-dark table-borderless">
  ...
</table>

Ameza mato

Ongeraho .table-smkugirango ukore ikindi kintu cyose .tableukata selile zose mo paddingkabiri.

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@twitter

<table class="table table-sm">
  ...
</table>

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@twitter

<table class="table table-dark table-sm">
  ...
</table>

Guhuza neza

Imbonerahamwe yama selire <thead>ihora ihagaritse hepfo. Imbonerahamwe yimeza mu <tbody>kuzungura guhuza kuva <table>kandi ihujwe hejuru hejuru kubisanzwe. Koresha vertical align amasomo kugirango wongere uhuze aho bikenewe.

Umutwe 1	Umutwe 2	Umutwe 3	Umutwe 4
Iyi selile iragwa `vertical-align: middle;`kumeza	Iyi selile iragwa `vertical-align: middle;`kumeza	Iyi selile iragwa `vertical-align: middle;`kumeza	Hano hano hari inyandiko yumwanya, igamije gufata umwanya muto uhagaze, kugirango werekane uburyo guhuza vertical ikora muri selile zabanjirije iyi.
Aka kagari karazwe `vertical-align: bottom;`kumurongo wameza	Aka kagari karazwe `vertical-align: bottom;`kumurongo wameza	Aka kagari karazwe `vertical-align: bottom;`kumurongo wameza	Hano hano hari inyandiko yumwanya, igamije gufata umwanya muto uhagaze, kugirango werekane uburyo guhuza vertical ikora muri selile zabanjirije iyi.
Iyi selile iragwa `vertical-align: middle;`kumeza	Iyi selile iragwa `vertical-align: middle;`kumeza	Aka kagari kahujwe hejuru.	Hano hano hari inyandiko yumwanya, igamije gufata umwanya muto uhagaze, kugirango werekane uburyo guhuza vertical ikora muri selile zabanjirije iyi.

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

Icyari

Imipaka yimipaka, uburyo bukora, nuburyo bwo kumeza ntibiragwa kumeza yashizwemo.

Ubwa mbere

Icya nyuma

Koresha

Ikimenyetso

Otto

@mdo

Umutwe	Umutwe	Umutwe
A.	Ubwa mbere	Icya nyuma
B.	Ubwa mbere	Icya nyuma
C.	Ubwa mbere	Icya nyuma

Larry

Inyoni

@twitter

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

Ukuntu ibyari bikora

Kugirango tubuze uburyo ubwo aribwo bwose gutemba kumeza yashizwemo, dukoresha utoranya abana ( >) utoranya muri CSS yacu. Kuva dukeneye intego zose tds na ths muri thead,, tbodyna tfoot, uwatoranije yagaragara neza cyane tutayifite. Nkiyo, dukoresha uburyo .table > :not(caption) > * > *budasanzwe busa nuwatoranije kugirango tugere kuri tds na ths zose za .table, ariko ntanumwe mubishobora guterwa kumeza.

Menya ko niba wongeyeho <tr>s nkabana bayobora kumeza, ibyo <tr>bizapfunyika muburyo <tbody>budasanzwe, bityo abaduhitamo bakora nkuko byateganijwe.

Anatomy

Umutwe wameza

Bisa nameza hamwe nameza yijimye, koresha ibyiciro bihindura .table-lightcyangwa .table-darkkugirango <thead>ugaragare urumuri cyangwa umukara wijimye.

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Larry	Inyoni	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Larry	Inyoni	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Ikirenge

#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Larry	Inyoni	@twitter
Umutwe	Umutwe	Umutwe	Umutwe

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

Ibisobanuro

Imikorere <caption>nkumutwe kumeza. Ifasha abakoresha hamwe nabasomyi ba ecran kubona imbonerahamwe no kumva icyo ivuga no guhitamo niba bashaka kuyisoma.

Urutonde rwabakoresha
#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Inyoni		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Urashobora kandi gushira <caption>hejuru hejuru yimeza hamwe .caption-top.

Urutonde rwabakoresha
#	Ubwa mbere	Icya nyuma	Koresha
1	Ikimenyetso	Otto	@mdo
2	Yakobo	Thornton	@fat
3	Larry	Inyoni	@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>

Imbonerahamwe isubiza

Imbonerahamwe isubiza yemerera imbonerahamwe kuzenguruka mu buryo butambitse kandi byoroshye. Kora imbonerahamwe iyo ari yo yose isubiza ibintu byose ureba .tablehamwe .table-responsive. Cyangwa, hitamo intera ntarengwa yo kugira imbonerahamwe isubiza hejuru ukoresheje .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Gukata neza / guhagarika

Imbonerahamwe ishubije ikoresha overflow-y: hidden, ikuraho ibintu byose birenze hepfo cyangwa hejuru yimeza. By'umwihariko, ibi birashobora gukuramo ibice byamanutse hamwe nandi mashyaka ya gatatu.

Buri gihe witabira

Hirya no hino, koresha .table-responsivekumeza utambitse.

#	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe
1	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari
2	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari
3	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Ibice byihariye

Koresha .table-responsive{-sm|-md|-lg|-xl|-xxl}nkuko bikenewe kugirango ukore imbonerahamwe yishura kugeza kumurongo runaka. Uhereye kuri ibyo bice no hejuru, imbonerahamwe izitwara bisanzwe kandi ntizunguruka.

Izi mbonerahamwe zishobora kugaragara nkizimenetse kugeza uburyo bwo gusubiza bwakoreshejwe mubugari bwihariye bwo kureba.

#	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe
1	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari
2	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari
3	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari

#	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe
1	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari
2	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari
3	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari

#	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe
1	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari
2	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari
3	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari

#	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe
1	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari
2	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari
3	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari

#	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe
1	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari
2	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari
3	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari

#	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe	Umutwe
1	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari
2	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari
3	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari	Akagari

<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

Ibihinduka

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

Umuzingi

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

Guhitamo

Ibintu bihinduka ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) bikoreshwa mukumenya itandukaniro muburyo butandukanye.
Usibye urumuri & umwijima wameza ahinduka, insanganyamatsiko yamabara yoroherezwa nimpinduka $table-bg-level.