Source

Amathebula

Amadokhumenti nezibonelo zokukhetha ukungena kwisitayela samathebula (uma kubhekwa ukusetshenziswa kwawo okuvame kakhulu kuma-plugin e-JavaScript) nge-Bootstrap.

Izibonelo

Ngenxa yokusetshenziswa kabanzi kwamathebula kuwo wonke amawijethi ezinkampani zangaphandle njengamakhalenda nezikhethi zezinsuku, siklame amathebula ethu ukuthi angene . Vele ungeze ikilasi lesisekelo .tablekunoma iyiphi <table>, bese unweba ngezitayela zangokwezifiso noma amakilasi ethu ahlukahlukene afakiwe ahlanganisiwe.

Usebenzisa imakhaphu yethebula eyisisekelo, nansi indlela .tableamathebula asekelwe ngayo abukeka ngayo ku-Bootstrap. Zonke izitayela zethebula zizuzwa njengefa ku-Bootstrap 4 , okusho ukuthi noma yimaphi amathebula afakwe esidlekeni azobhalwa ngendlela efanayo neyomzali.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry	uNyoni	@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>

Ungakwazi futhi ukuguqula imibala—ngombhalo okhanyayo kungemuva elimnyama—nge- .table-dark.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry	uNyoni	@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>

Izinketho zekhanda lethebula

Ngokufana namathebula namathebula amnyama, sebenzisa amakilasi okulungisa .thead-lightnoma .thead-darkukwenza u- <thead>s abonakale ekhanyayo noma empunga emnyama.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry	uNyoni	@twitter

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry	uNyoni	@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>

Imigqa enemigqa

Sebenzisa .table-stripedukwengeza i-zebra-striping kunoma yimuphi umugqa wethebula ngaphakathi kwe- <tbody>.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry	uNyoni	@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>

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry	uNyoni	@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>

Itafula elinemingcele

Engeza .table-borderedimingcele kuzo zonke izinhlangothi zetafula namaseli.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@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>

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@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>

Imigqa enyakazayo

Engeza .table-hoverukuze unike amandla isimo sokuhambisa phezulu emigqeni yethebula ngaphakathi kwe- <tbody>.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@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>

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@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>

Itafula elincane

Engeza .table-smukuze wenze amatafula ahlangane kakhudlwana ngokusika ama-cell padding phakathi.

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@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>

#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry Inyoni		@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>

Amakilasi omongo

Sebenzisa amakilasi anomongo ukuze ufake imibala yemigqa yethebula noma amaseli ngamanye.

Ikilasi	Isihloko	Isihloko
Iyasebenza	Iseli	Iseli
Okuzenzakalelayo	Iseli	Iseli
Okuyinhloko	Iseli	Iseli
Okwesibili	Iseli	Iseli
Impumelelo	Iseli	Iseli
Ingozi	Iseli	Iseli
Isexwayiso	Iseli	Iseli
Ulwazi	Iseli	Iseli
Ukukhanya	Iseli	Iseli
Kumnyama	Iseli	Iseli

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

Okuhlukile kwengemuva lethebula elivamile akutholakali ngethebula elimnyama, nokho-ke, ungasebenzisa umbhalo noma izinto ezingemuva ukuze uzuze izitayela ezifanayo.

#	Isihloko	Isihloko
1	Iseli	Iseli
2	Iseli	Iseli
3	Iseli	Iseli
4	Iseli	Iseli
5	Iseli	Iseli
6	Iseli	Iseli
7	Iseli	Iseli
8	Iseli	Iseli
9	Iseli	Iseli

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

Ukudlulisa incazelo kubuchwepheshe obusizayo

Ukusebenzisa umbala ukwengeza incazelo kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (isb umbhalo obonakalayo), noma lufakwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .sr-onlynekilasi.

Dala amathebula aphendulayo ngokugoqa noma yimaphi .tablengokuthi .table-responsive{-sm|-md|-lg|-xl}, wenze ithebula lisonge ngokuvundlile endaweni ngayinye max-widthyokuhlukana kufika (kodwa ungafaki) 576px, 768px, 992px, kanye no-1120px, ngokulandelana.

Qaphela ukuthi njengoba iziphequluli okwamanje zingayisekeli imibuzo yokuqukethwe kobubanzi , sisebenza eduze kwemikhawulo min-kanye max-neziqalo nezinkundla zokubuka ezinobubanzi obuyingxenyana (okungenzeka ngaphansi kwezimo ezithile kumadivayisi e-dpi ephezulu, isibonelo) ngokusebenzisa amanani anembe kakhulu kulokhu kuqhathanisa. .

Amazwibela

Isebenza <caption>njengesihloko setafula. Isiza abasebenzisi abanezifundi zesikrini ukuthi bathole ithebula futhi baqonde ukuthi limayelana nani futhi banqume ukuthi bafuna ukulifunda yini.

Uhlu lwabasebenzisi
#	Okokuqala	Okokugcina	Bamba
1	Maka	Otto	@mdo
2	uJakobe	Thornton	@amafutha
3	Larry	uNyoni	@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>

Amathebula asabelayo

Amathebula aphendulayo avumela amathebula ukuthi asongwe ngokuvundlile kalula. Yenza noma yiliphi ithebula liphendule kuzo zonke izinkundla zokubuka ngokusonga .tablengokuthi .table-responsive. Noma, khetha indawo enkulu yokunqamula lapho ungathola khona ithebula eliphendulayo ngokusebenzisa .table-responsive{-sm|-md|-lg|-xl}.

Ukusika okuqondile/ukunciphisa

Amathebula aphendulayo asebenzisa overflow-y: hiddenokuthi , okusika noma yikuphi okuqukethwe okudlulela ngale kwangaphansi noma imiphetho ephezulu yethebula. Ikakhulukazi, lokhu kunganqamula amamenyu okwehlayo namanye amawijethi ezinkampani zangaphandle.

Ihlale iphendula

Kuwo wonke ama-breakpoint, sebenzisa .table-responsiveamathebula okuskrola avundlile.

#	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko
1	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
2	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli
3	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli	Iseli

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

I-Breakpoint ethize

Sebenzisa .table-responsive{-sm|-md|-lg|-xl}njengoba kudingeka ukuze udale amathebula asabelayo kuze kufike endaweni ethile yokuhlukana. Kusukela kuleyo ndawo yokuhlukana kuya phezulu, ithebula lizoziphatha ngendlela evamile futhi lingaskroli ngokuvundlile.

#	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko
1	Iseli	Iseli	Iseli	Iseli	Iseli
2	Iseli	Iseli	Iseli	Iseli	Iseli
3	Iseli	Iseli	Iseli	Iseli	Iseli

#	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko
1	Iseli	Iseli	Iseli	Iseli	Iseli
2	Iseli	Iseli	Iseli	Iseli	Iseli
3	Iseli	Iseli	Iseli	Iseli	Iseli

#	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko
1	Iseli	Iseli	Iseli	Iseli	Iseli
2	Iseli	Iseli	Iseli	Iseli	Iseli
3	Iseli	Iseli	Iseli	Iseli	Iseli

#	Isihloko	Isihloko	Isihloko	Isihloko	Isihloko
1	Iseli	Iseli	Iseli	Iseli	Iseli
2	Iseli	Iseli	Iseli	Iseli	Iseli
3	Iseli	Iseli	Iseli	Iseli	Iseli

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