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>

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.

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

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

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

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

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