Source

Tebụl

Akwụkwọ na ihe atụ maka ịkebe ịke tebụl (nyere ha na-ejikarị na Javascript plugins) na Bootstrap.

Ihe atụ

N'ihi iji tebụl eme ihe n'ofe wijetị ndị ọzọ dị ka kalenda na ndị na- ahọrọ ụbọchị, anyị haziri tebụl anyị ka ọ bụrụ nbanye . Naanị tinye klas isi na nke .tableọ bụla <table>, wee gbasaa na ụdị omenala ma ọ bụ klaasị modifier gụnyere dị iche iche.

N'iji akara nrịbama tebụl kachasị, nke a bụ ka .tabletebụl dabere na Bootstrap. A na-eketa ụdị tebụl niile na Bootstrap 4 , nke pụtara na a ga-edozi tebụl ọ bụla akwụ ụgwọ n'otu ụzọ ahụ nne na nna.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry Nnụnụ ahụ @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>

Ị nwekwara ike tụgharịa agba—nwere ederede dị mfe na nzụlite gbara ọchịchịrị—jiri .table-dark.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry Nnụnụ ahụ @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>

Nhọrọ isi tebụl

Yiri tebụl na tebụl gbara ọchịchịrị, jiri klaasị modifier .thead-lightma ọ bụ .thead-darkmee ka <thead>s yie ìhè ma ọ bụ isi awọ gbara ọchịchịrị.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry Nnụnụ ahụ @twitter
# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry Nnụnụ ahụ @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>

Ahịrị ndị dọwara adọwa

Jiri .table-stripedtinye eriri zebra na ahịrị tebụl ọ bụla n'ime <tbody>.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry Nnụnụ ahụ @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>
# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry Nnụnụ ahụ @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>

Tebụl gbara oke ókè

Tinye .table-borderedmaka oke n'akụkụ niile nke tebụl na sel.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @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>
# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @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>

Tebụl enweghị oke

Tinye .table-borderlessmaka tebụl na-enweghị oke.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @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-borderlessnwekwara ike iji na tebụl gbara ọchịchịrị.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @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>

Ahịrị ndị nwere ike imegharị

Tinye .table-hoveriji mee ka ọnọdụ hover na ahịrị tebụl n'ime a <tbody>.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @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>
# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @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>

Obere okpokoro

Tinye .table-smka tebụl dịkwuo kọmpat site na ibelata ihe mgbochi cell na ọkara.

# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @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>
# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry The Bird @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>

Klaasị ihe atụ

Jiri klaasị okirikiri mee ka ahịrị tebụl agba agba ma ọ bụ sel nke ọ bụla.

Klas Isi Isi
Na-arụ ọrụ Cell Cell
Ọdabara Cell Cell
Isi Cell Cell
Secondary Cell Cell
Ihe ịga nke ọma Cell Cell
Ihe egwu Cell Cell
Ịdọ aka ná ntị Cell Cell
Ozi Cell Cell
Ìhè Cell Cell
Ọchịchịrị Cell Cell 
<!-- 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>

Ọdịiche dị n'okirikiri tebụl oge niile adịghị na tebụl gbara ọchịchịrị, agbanyeghị, ịnwere ike iji ederede ma ọ bụ akụrụngwa ndabere iji nweta ụdịrị ahụ.

# Isi Isi
1 Cell Cell
2 Cell Cell
3 Cell Cell
4 Cell Cell
5 Cell Cell
6 Cell Cell
7 Cell Cell
8 Cell Cell
9 Cell Cell 
<!-- 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>
Na-eme ka ọ pụta ìhè na teknụzụ enyemaka

Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (dịka ederede a na-ahụ anya), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .sr-onlyklaasị.

Mepụta tebụl ndị na-anabata ya site na ijikọ nke ọ bụla , .tablena .table-responsive{-sm|-md|-lg|-xl}-eme ka tebụl pịgharịa n'ụzọ kwụ ọtọ n'ebe max-widthnkwụsịtụ nke ọ bụla ruru (ma ọ bụghị gụnyere) 576px, 768px, 992px, na 1120px, otu n'otu.

Rịba ama na ebe ọ bụ na ihe nchọgharị anaghị akwado ajụjụ ọnọdụ ọnọdụ dị ugbu a , anyị na-arụ ọrụ na njedebe nke prefixes min-namax- viewport nwere obosara akụkụ (nke nwere ike ime n'okpuru ọnọdụ ụfọdụ na ngwaọrụ dpi dị elu, dịka ọmụmaatụ) site na iji ụkpụrụ nwere nkenke dị elu maka ntụnyere ndị a. .

Nkọwa okwu

A <caption>na-arụ ọrụ dị ka isi maka tebụl. Ọ na-enyere ndị ọrụ na ndị na-agụ ihuenyo aka ịchọta tebụl ma ghọta ihe ọ bụ ma kpebie ma ha chọrọ ịgụ ya.

Ndepụta ndị ọrụ
# Mbụ Ikpeazụ Jikwaa
1 Mark Otto @mdo
2 Jekọb Thornton @abụba
3 Larry Nnụnụ ahụ @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>

Tebụl na-anabata

Tebụl ndị na-anabata ihe na-enye ohere ka a pịgharịa tebụl n'ahịrị n'ụzọ dị mfe. Mee ka tebụl ọ bụla na-anabata n'ofe ebe nlele niile site na .tableiji .table-responsive. Ma ọ bụ, họrọ ebe nkwụsịtụ kacha nke ị ga-eji nwee tebụl na-anabata ya site na iji .table-responsive{-sm|-md|-lg|-xl}.

Mkpọchi/ mkpọtu kwụ ọtọ

Tebụl na-anabata ihe na-eji overflow-y: hidden, nke na-ewepụ ọdịnaya ọ bụla na-agafe n'akụkụ ala ma ọ bụ elu nke tebụl. Karịsịa, nke a nwere ike ihichapụ menus dropdown na wijetị ndị ọzọ.

Na-anabata mgbe niile

N'ofe ebe nkwụsịtụ ọ bụla, jiri .table-responsivemaka tebụl mpịakọta kwụ ọtọ.

# Isi Isi Isi Isi Isi Isi Isi Isi Isi
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint kpọmkwem

Jiri .table-responsive{-sm|-md|-lg|-xl}dị ka ọ dị mkpa iji mepụta tebụl na-anabata ihe ruo otu ebe nkwụsịtụ. Site n'ebe nkwụsịtụ ahụ na elu, tebụl ga-akpa àgwà ka ọ na-adịghị pịgharịa na kehoraizin.

Tebụl ndị a nwere ike ịdị ka agbajiri agbaji ruo mgbe ụdị anabatara ha na-emetụta na obosara ihe nlele.

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