Source

Matebulo

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

Zitsanzo

Chifukwa cha kuchuluka kwa matebulo pama widget a gulu lachitatu monga makalendala ndi osankha masiku, tapanga matebulo athu kuti asalowemo . Ingowonjezerani kalasi yoyambira .tableku iliyonse <table>, kenako onjezerani masitayelo anu kapena makalasi athu osiyanasiyana ophatikizidwa.

Pogwiritsa ntchito zolembera zoyambira kwambiri patebulo, nayi momwe .table-matebulo amawonekera mu Bootstrap. Mitundu yonse ya matebulo imatengera ku Bootstrap 4 , kutanthauza kuti matebulo aliwonse omwe ali ndi zisa adzalembedwa mofanana ndi kholo.

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

Mutha kutembenuzanso mitunduyo ndi mawu opepuka pamasamba akuda ndi .table-dark.

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

Zosankha zamutu wa tebulo

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

# Choyamba Pomaliza Chogwirizira
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter
# Choyamba Pomaliza Chogwirizira
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter 
<table class="table">
  <thead class="thead-dark">
    <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>

<table class="table">
  <thead class="thead-light">
    <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>

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">
  <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>
# Choyamba Pomaliza Chogwirizira
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter 
<table class="table table-striped table-dark">
  <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>

Gome lokhala 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">
  <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>
# Choyamba Pomaliza Chogwirizira
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter 
<table class="table table-bordered table-dark">
  <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>

Gome lopanda 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">
  <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>

.table-borderlessitha kugwiritsidwanso ntchito pamatebulo akuda.

# Choyamba Pomaliza Chogwirizira
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter 
<table class="table table-borderless table-dark">
  <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>

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">
  <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>
# Choyamba Pomaliza Chogwirizira
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter 
<table class="table table-hover table-dark">
  <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>

Tebulo laling'ono

Onjezani .table-smkuti ma tebulo azikhala ophatikizika podula ma cell padding pakati.

# Choyamba Pomaliza Chogwirizira
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter 
<table class="table table-sm">
  <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>
# Choyamba Pomaliza Chogwirizira
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter 
<table class="table table-sm table-dark">
  <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>

Maphunziro a Contextual

Gwiritsani ntchito makalasi okhazikika kuti musankhe mizere yamatebulo kapena ma cell amodzi.

Kalasi Mutu Mutu
Yogwira Selo Selo
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 rows -->
<tr class="table-active">...</tr>

<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-active">...</td>

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

Zosintha zanthawi zonse patebulo sizipezeka ndi tebulo lakuda, komabe, mutha kugwiritsa ntchito zolemba kapena zakumbuyo kuti mukwaniritse masitayelo ofanana.

# Mutu Mutu
1 Selo Selo
2 Selo Selo
3 Selo Selo
4 Selo Selo
5 Selo Selo
6 Selo Selo
7 Selo Selo
8 Selo Selo
9 Selo Selo 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</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 .sr-onlykalasi.

Pangani matebulo omvera mwa kukulunga iliyonse .tablendi .table-responsive{-sm|-md|-lg|-xl}, ndikupanga tebulo kuti liziyenda mozungulira pagawo lililonse max-widthmpaka (koma osaphatikiza) 576px, 768px, 992px, ndi 1120px, motsatana.

Zindikirani kuti popeza asakatuli sakuthandiza pano mafunso osiyanasiyana , timagwiritsa ntchito malire a ma min-prefixes max-ndi mawonedwe okhala ndi m'lifupi mwake (omwe amatha kuchitika pazida zamtundu wapamwamba wa dpi, mwachitsanzo) pogwiritsa ntchito milingo yolondola kwambiri poyerekezera izi. .

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

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}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 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# 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-md">
  <table class="table">
    ...
  </table>
</div>
# 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-lg">
  <table class="table">
    ...
  </table>
</div>
# 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-xl">
  <table class="table">
    ...
  </table>
</div>