Pitani kuzinthu zazikulu Pitani kumayendedwe adocs
in English

Matebulo

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

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 mosadalira 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 kuwonjezedwanso kumitundu yosiyanasiyana yamatebulo:

# 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 ku mtundu wowonekera pang'ono 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
1 Mark Otto @mdo
Mutu Mutu Mutu
A Choyamba Pomaliza
B Choyamba Pomaliza
C Choyamba Pomaliza
3 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 kumatebulo omwe ali mu 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 kuti mupange 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 ma tebulo.
  • Kupatula pamitundu yowala & yakuda, mitundu yamutu imawunikiridwa ndi $table-bg-levelkusinthika.