in English

Matebulo

Zolemba ndi zitsanzo zamakongoletsedwe a matebulo (kutengera momwe amagwiritsidwira ntchito mu JavaScript mapulagini) ndi Bootstrap.

Patsamba ili

Mwachidule

Chifukwa cha kufalikira kwa <table>zinthu pama widget a chipani chachitatu monga makalendala ndi osankha masiku, matebulo a Bootstrap alowa . Onjezani kalasi yoyambira .tableku iliyonse <table>, kenaka wonjezerani ndi makalasi athu osintha kapena masitayelo anu. Masitayilo onse amatebulo samatengera ku Bootstrap, kutanthauza kuti matebulo aliwonse okhala ndi zisa amatha kulembedwa mopanda kholo.

Pogwiritsa ntchito zolembera zoyambira kwambiri patebulo, nayi momwe .table-matebulo amawonekera mu Bootstrap.

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@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>

Zosintha

Gwiritsani ntchito makalasi okhudzana ndi magome amitundu, mizere yamatebulo kapena ma cell amodzi.

Kalasi	Mutu	Mutu
Zosasintha	Selo	Selo
Pulayimale	Selo	Selo
Sekondale	Selo	Selo
Kupambana	Selo	Selo
Ngozi	Selo	Selo
Chenjezo	Selo	Selo
Zambiri	Selo	Selo
Kuwala	Selo	Selo
Chakuda	Selo	Selo

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

Kupereka tanthauzo ku matekinoloje othandizira

Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti zomwe zatchulidwa ndi mtunduwo zikuwonekera kuchokera pazomwe zili (monga zolemba zowonekera), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .visually-hiddenkalasi.

Matebulo okoma

Mizere yamizeremizere

Gwiritsani .table-stripedntchito kuwonjezera mbidzi-mizere pamzere uliwonse wa tebulo mkati mwa <tbody>.

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@twitter

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

Makalasi awa atha kuwonjezedwa kumitundu yosiyanasiyana ya tebulo:

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@twitter

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

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@twitter

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

Mizere yosunthika

Onjezani .table-hoverkuti mutsegule chiwongolero pamizere ya tebulo mkati mwa <tbody>.

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@twitter

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

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@twitter

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

Mizere yosunthika iyi imathanso kuphatikizidwa ndi mitundu yamizeremizere:

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@twitter

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

Matebulo achangu

Onetsani mzere wa tebulo kapena selo powonjezera .table-activekalasi.

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@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>

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@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>

Kodi mitundu ndi ma accented tables amagwira ntchito bwanji?

Pamatebulo a kamvekedwe ka mawu ( mizere ya mizere , mizere yozungulira , ndi matebulo ogwira ntchito ), tinagwiritsa ntchito njira zina kuti izi zigwire ntchito pamitundu yathu yonse :

Timayamba ndikuyika maziko a tebulo la tebulo ndi --bs-table-bgkatundu wamba. Zosintha zonse zamatebulo kenako zimayika zomwe mwamakonda kuti zisinthe ma cell a tebulo. Mwanjira iyi, sitikhala m'mavuto ngati mitundu yowoneka bwino imagwiritsidwa ntchito ngati maziko a tebulo.
Kenako timawonjezera mthunzi wa bokosi lamkati pamaselo a tebulo box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ndikusanjikiza pamwamba pa chilichonse chomwe chatchulidwa background-color. Chifukwa timagwiritsa ntchito kufalikira kwakukulu komanso kosasunthika, mtunduwo udzakhala monotone. Popeza --bs-table-accent-bgsizinakhazikitsidwe mwachisawawa, tilibe mthunzi wa bokosi lokhazikika.
Zikawonjezedwa .table-striped, .table-hoverkapena .table-activemakalasi, --bs-table-accent-bgimayikidwa kuti ikhale yamtundu wowoneka bwino kuti isinthe chakumbuyo.
Pamtundu uliwonse wa tebulo, timapanga --bs-table-accent-bgmtundu womwe umasiyana kwambiri malinga ndi mtunduwo. Mwachitsanzo, mtundu wa kamvekedwe kake .table-primaryndi wakuda pomwe .table-darkuli ndi mtundu wopepuka.
Mitundu ya malemba ndi malire amapangidwa mofanana, ndipo mitundu yawo imatengedwa mwachibadwa.

Kumbuyo kwa mawonekedwe zikuwoneka motere:

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

M'malire a tebulo

Matebulo okhala ndi malire

Onjezani .table-borderedmalire kumbali zonse za tebulo ndi ma cell.

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@twitter

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

Zida zamtundu wa malire zitha kuwonjezeredwa kuti zisinthe mitundu:

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@twitter

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

Matebulo opanda malire

Onjezani .table-borderlesspa tebulo lopanda malire.

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@twitter

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

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@twitter

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

Matebulo ang'onoang'ono

Onjezani .table-smkuti mupange .tablechophatikizana podula ma cell onse paddingpakati.

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@twitter

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

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@twitter

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

Kuyanjanitsa koyima

Maselo a tebulo <thead>nthawi zonse amakhala ofukula pansi. Maselo a m'ndandanda <tbody>amatengera kutengera kwawo <table>ndipo amalumikizidwa pamwamba mwachisawawa. Gwiritsani ntchito makalasi oyimirira kuti muyanjanitsenso ngati pakufunika.

Mutu 1	Mutu 2	Mutu 3	Mutu 4
Selo iyi imatenga cholowa `vertical-align: middle;`kuchokera patebulo	Selo iyi imatenga cholowa `vertical-align: middle;`kuchokera patebulo	Selo iyi imatenga cholowa `vertical-align: middle;`kuchokera patebulo	Awa ndi mawu ogwirizira malo, olinganizidwa kuti atenge danga loyima pang'ono, kuti awonetse momwe kusanja koyimirira kumagwirira ntchito m'maselo am'mbuyomo.
Selo iyi imatenga `vertical-align: bottom;`kuchokera pamzere wa tebulo	Selo iyi imatenga `vertical-align: bottom;`kuchokera pamzere wa tebulo	Selo iyi imatenga `vertical-align: bottom;`kuchokera pamzere wa tebulo	Awa ndi mawu ogwirizira malo, olinganizidwa kuti atenge danga loyima pang'ono, kuti awonetse momwe kusanja koyimirira kumagwirira ntchito m'maselo am'mbuyomo.
Selo iyi imatenga cholowa `vertical-align: middle;`kuchokera patebulo	Selo iyi imatenga cholowa `vertical-align: middle;`kuchokera patebulo	Selo iyi imalumikizidwa pamwamba.	Awa ndi mawu ogwirizira malo, olinganizidwa kuti atenge danga loyima pang'ono, kuti awonetse momwe kusanja koyimirira kumagwirira ntchito m'maselo am'mbuyomo.

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

Nesting

Masitayelo am'malire, masitayelo omwe akugwira ntchito, ndi masitaelo amitundu sizitengera matebulo okhala.

Choyamba

Pomaliza

Chogwirizira

Mark

Otto

@mdo

Mutu	Mutu	Mutu
A	Choyamba	Pomaliza
B	Choyamba	Pomaliza
C	Choyamba	Pomaliza

Larry

Mbalame

@twitter

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

Momwe zisa zimagwirira ntchito

Kuti tipewe masitayelo aliwonse kuti asadutse kupita kumatebulo okhala zisa, timagwiritsa ntchito >chosankha cha ana ( ) mu CSS yathu. Popeza tiyenera kulunjika ma tds ndi ths onse mu thead, tbody, ndi tfoot, osankhidwa athu angawoneke motalika kwambiri popanda izo. .table > :not(caption) > * > *Mwakutero, timagwiritsa ntchito chosankha chowoneka modabwitsa kuti tiyang'ane ma tds ndi ma ths .table, koma palibe matebulo aliwonse omwe angakhalepo.

Zindikirani kuti ngati muwonjezera <tr>s monga ana achindunji a tebulo, iwo <tr>adzakulungidwa <tbody>mwachisawawa, motero kupangitsa osankhidwa athu kugwira ntchito monga momwe amafunira.

Anatomy

Mutu wa tebulo

Mofanana ndi matebulo ndi matebulo akuda, gwiritsani ntchito makalasi osintha .table-lightkapena .table-darkkupanga <thead>s kuwoneka yopepuka kapena imvi.

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	Mbalame	@twitter

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

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	Mbalame	@twitter

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

Phazi la tebulo

#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	Mbalame	@twitter
M'munsi	M'munsi	M'munsi	M'munsi

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

Mawu omasulira

A <caption>amagwira ntchito ngati mutu wa tebulo. Zimathandizira ogwiritsa ntchito omwe ali ndi zowonera kuti apeze tebulo ndikumvetsetsa zomwe akunena ndikusankha ngati akufuna kuliwerenga.

Mndandanda wa ogwiritsa ntchito
#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Mbalame		@twitter

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

Mukhozanso kuika <caption>pamwamba pa tebulo ndi .caption-top.

Mndandanda wa ogwiritsa ntchito
#	Choyamba	Pomaliza	Chogwirizira
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	Mbalame	@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>

Matebulo omvera

Matebulo omvera amalola kuti matebulo azipukutidwa mopingasa mosavuta. Pangani tebulo lililonse kuti liziyankha pamawonekedwe onse pokulunga .tablendi .table-responsive. Kapena, sankhani malo odumpha kwambiri omwe mungakhale ndi tebulo lomvera mpaka kugwiritsa ntchito .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Kudula molunjika/kudulira

Matebulo omvera amagwiritsa ntchito overflow-y: hidden, yomwe imadula chilichonse chomwe chimadutsa pansi kapena m'mphepete mwa tebulo. Makamaka, izi zitha kudulira mindandanda yotsitsa ndi ma widget ena a chipani chachitatu.

Nthawi zonse amayankha

Pamalo oduka aliwonse, gwiritsani ntchito .table-responsivemagome oyenda mopingasa.

#	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu
1	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo
2	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo
3	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo

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

Breakpoint mwachindunji

Gwiritsani ntchito .table-responsive{-sm|-md|-lg|-xl|-xxl}ngati pakufunika kupanga matebulo omvera mpaka pagawo linalake. Kuyambira pomwepa ndikupita mmwamba, tebulo liziyenda bwino osati kusuntha mopingasa.

Matebulowa atha kuwoneka osweka mpaka masitayilo awo amayankhidwa atagwiritsidwa ntchito pamawonekedwe enaake.

#	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu
1	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo
2	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo
3	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo

#	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu
1	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo
2	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo
3	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo

#	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu
1	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo
2	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo
3	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo

#	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu
1	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo
2	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo
3	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo

#	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu
1	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo
2	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo
3	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo

#	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu	Mutu
1	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo
2	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo
3	Selo	Selo	Selo	Selo	Selo	Selo	Selo	Selo

<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

Zosintha

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

Lupu

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

Kusintha mwamakonda

Zosintha za factor ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) amagwiritsidwa ntchito kuti adziwe kusiyana kwa tebulo.
Kupatula pamitundu yowala & yakuda, mitundu yamutu imawunikiridwa ndi $table-bg-levelkusinthika.