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>

Itafula elingenamngcele

Engeza .table-borderlesskutafula elingenayo imingcele.

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

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

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 afinyelele endaweni ethile yokuhlukana. Kusukela kuleyo ndawo yokuhlukana kuya phezulu, ithebula lizoziphatha ngendlela evamile futhi lingaskroli ngokuvundlile.

Lawa mathebula angase abonakale ephukile kuze kube yilapho izitayela zawo zokusabela zisebenza kububanzi obuthile bokubuka.

# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>