Source

Ditafola

Ditokomane le mehlala ya go kgetha-ka setaele sa ditafola (ge go fiwa tšhomišo ya tšona ye e atilego ka go di-plugin tša JavaScript) ka Bootstrap.

Mehlala

Ka lebaka la tšhomišo ye e atilego ya ditafola go ralala le didirišwa tša mokgatlo wa boraro go swana le dialmanaka le dikgetho tša matšatšikgwedi, re hlamile ditafola tša rena gore e be tša go kgetha go tsena . E no tlaleletša sehlopha sa motheo .tablego efe goba efe <table>, ke moka o atološe ka mekgwa ya tlwaelo goba dihlopha tša rena tša go fapafapana tša sefetoši tše di akareditšwego.

Ka go šomiša go swaya tafola ga motheo kudu, mo ke ka fao .tableditafola tše di theilwego godimo di lebelegago ka gona ka go Bootstrap. Mekgwa ka moka ya tafola e abetšwe go Bootstrap 4 , go ra gore ditafola dife goba dife tše di tsentšwego ka gare di tla bewa setaele ka mokgwa wo o swanago le wa motswadi.

# . Mathomo Mafelelo Swara
1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry o ile a re Nonyana @ twitter e le 
<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>

Le gona o ka fetoša mebala—ka mongwalo o bofefo dilong tše lefsifsi—ka .table-dark.

# . Mathomo Mafelelo Swara
1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry o ile a re Nonyana @ twitter e le 
<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>

Dikgetho tša hlogo ya tafola

Go swana le ditafola le ditafola tše lefsifsi, šomiša diklase tša sefetoši .thead-lightgoba .thead-darkgo dira gore <thead>s e bonagale e le bohlokwa bjo bo bofefo goba bjo bo fifetšego.

# . Mathomo Mafelelo Swara
1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry o ile a re Nonyana @ twitter e le
# . Mathomo Mafelelo Swara
1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry o ile a re Nonyana @ twitter e le 
<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>

Methaladi ya methalo

Šomiša .table-stripedgo oketša zebra-striping go mothaladi ofe goba ofe wa tafola ka gare ga <tbody>.

# . Mathomo Mafelelo Swara
1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry o ile a re Nonyana @ twitter e le 
<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>
# . Mathomo Mafelelo Swara
1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry o ile a re Nonyana @ twitter e le 
<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>

Tafole e nang le mellwane

Oketša .table-borderedbakeng sa mellwane ka mahlakoreng ka moka a tafola le disele.

# . Mathomo Mafelelo Swara
1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry ya Nonyana @ twitter e le 
<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>
# . Mathomo Mafelelo Swara
1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry ya Nonyana @ twitter e le 
<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>

Tafole e se nang moeli

Oketša .table-borderlessbakeng sa tafola e se nago mellwane.

# . Mathomo Mafelelo Swara
1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry ya Nonyana @ twitter e le 
<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-borderlesse ka šomišwa gape ditafoleng tše lefsifsi.

# . Mathomo Mafelelo Swara
1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry ya Nonyana @ twitter e le 
<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>

Methaladi yeo e ka phaphametšego

Oketša .table-hovergo kgontšha seemo sa go hover godimo ga methaladi ya tafola ka gare ga <tbody>.

# . Mathomo Mafelelo Swara
1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry ya Nonyana @ twitter e le 
<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>
# . Mathomo Mafelelo Swara
1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry ya Nonyana @ twitter e le 
<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>

Tafole e nyenyane

Oketša .table-smgo dira gore ditafola di kopane kudu ka go sega padding ya disele ka bogare.

# . Mathomo Mafelelo Swara
1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry ya Nonyana @ twitter e le 
<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>
# . Mathomo Mafelelo Swara
1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry ya Nonyana @ twitter e le 
<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>

Diklase tša diteng

Šomiša diklase tša diteng go mebala methalo ya tafola goba disele ka botee.

Phapoši Hlogo ya ditaba Hlogo ya ditaba
Mafolofolo Sele Sele
Hlokomologa Sele Sele
Motheo Sele Sele
Bobedi Sele Sele
Katlego Sele Sele
Kotsi Sele Sele
Temošo Sele Sele
Info Sele Sele
Seetša Sele Sele
Leswiswi Sele Sele 
<!-- 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>

Diphetogo tša morago tša tafola tša ka mehla ga di hwetšagale ka tafola ye lefsifsi, le ge go le bjalo, o ka šomiša didirišwa tša sengwalwa goba tša morago go fihlelela mekgwa ye e swanago.

# . Hlogo ya ditaba Hlogo ya ditaba
1. Sele Sele
2. Sele Sele
3. Sele Sele
4. Sele Sele
5. 5. Sele Sele
6. Sele Sele
7. 7. Sele Sele
8. Sele Sele
9. Sele Sele 
<!-- 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>
Go fetišetša tlhalošo go theknolotši ya go thuša

Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .sr-onlysehlopha.

Hlama ditafola tše di arabelago ka go phuthela efe goba efe .tableka .table-responsive{-sm|-md|-lg|-xl}, o dira gore tafola e sepele ka go rapalala ntlheng ye nngwe le ye nngwe max-widthya go kgaotša ya go fihla go (eupša e sego go akaretša) 576px, 768px, 992px, le 1120px, ka go latelelana.

Hlokomela gore ka ge diphensele ga bjale ga di thekge dipotšišo tša seemo sa legoro , re šoma go dikologa mellwane ya min-le max-dihlongwapele le dipono tša go lebelela ka bophara bja karolwana (tšeo di ka diregago ka fase ga maemo a itšego go didirišwa tša dpi ya godimo, go fa mohlala) ka go šomiša dikelo tšeo di nago le go nepagala mo go phagamego bakeng sa dipapišo tše .

Ditlhaloso tša mantšu

A e <caption>šoma bjalo ka hlogo ya tafola. E thuša badiriši bao ba nago le dibadi tša skrine go hwetša tafola le go kwešiša gore e mabapi le eng le go tšea sephetho sa ge e ba ba nyaka go e bala.

Lenaneo la badiriši
# . Mathomo Mafelelo Swara
1. Mareka Otto o ile a re @mdo
2. Jakobo Thornton o ile a hlokomela @lekhura
3. Larry o ile a re Nonyana @ twitter e le 
<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>

Ditafola tše di arabelago

Ditafola tše di arabelago di dumelela ditafola go kgokološwa ka go rapalala gabonolo. Dira gore tafola efe goba efe e arabele go ralala le dipono ka moka ka go phuthela .tableka .table-responsive. Goba, kgetha palo e kgolo ya go kgaotša yeo o ka bago le tafola yeo e arabelago go fihla go yona ka go diriša .table-responsive{-sm|-md|-lg|-xl}.

Go kgaola/go kgaola ka go ema thwii

Ditafola tše di arabelago di diriša overflow-y: hidden, yeo e kgaolago diteng dife goba dife tšeo di fetago mapheko a ka tlase goba a godimo a tafola. Ka mo go kgethegilego, se se ka kgaola dimenu tša go theoga le didirišwa tše dingwe tša mokgatlo wa boraro.

Ka mehla o arabela

Go putla ntlha ye nngwe le ye nngwe ya go kgaotša, šomiša .table-responsivebakeng sa ditafola tša go kgokološa ka go rapalala.

# . Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba
1. Sele Sele Sele Sele Sele Sele Sele Sele Sele
2. Sele Sele Sele Sele Sele Sele Sele Sele Sele
3. Sele Sele Sele Sele Sele Sele Sele Sele Sele 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint e itšego

Šomiša .table-responsive{-sm|-md|-lg|-xl}ka moo go nyakegago go hlama ditafola tše di arabelago go fihla go ntlha ye e itšego ya go kgaotša. Go tloga ntlheng yeo ya go kgaotša go ya godimo, tafola e tla itshwara ka tlwaelo gomme e se ke ya sepelasepela ka go rapalala.

Ditafola tše di ka bonagala di senyegile go fihlela mekgwa ya tšona ya go arabela e šoma ka bophara bjo bo itšego bja lefelo la go lebelela.

# . Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba
1. Sele Sele Sele Sele Sele Sele Sele Sele
2. Sele Sele Sele Sele Sele Sele Sele Sele
3. Sele Sele Sele Sele Sele Sele Sele Sele 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# . Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba
1. Sele Sele Sele Sele Sele Sele Sele Sele
2. Sele Sele Sele Sele Sele Sele Sele Sele
3. Sele Sele Sele Sele Sele Sele Sele Sele 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# . Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba
1. Sele Sele Sele Sele Sele Sele Sele Sele
2. Sele Sele Sele Sele Sele Sele Sele Sele
3. Sele Sele Sele Sele Sele Sele Sele Sele 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# . Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba Hlogo ya ditaba
1. Sele Sele Sele Sele Sele Sele Sele Sele
2. Sele Sele Sele Sele Sele Sele Sele Sele
3. Sele Sele Sele Sele Sele Sele Sele Sele 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>