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>

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

# .	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba
1.	Sele	Sele	Sele	Sele	Sele
2.	Sele	Sele	Sele	Sele	Sele
3.	Sele	Sele	Sele	Sele	Sele

# .	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba
1.	Sele	Sele	Sele	Sele	Sele
2.	Sele	Sele	Sele	Sele	Sele
3.	Sele	Sele	Sele	Sele	Sele

# .	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba
1.	Sele	Sele	Sele	Sele	Sele
2.	Sele	Sele	Sele	Sele	Sele
3.	Sele	Sele	Sele	Sele	Sele

# .	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba	Hlogo ya ditaba
1.	Sele	Sele	Sele	Sele	Sele
2.	Sele	Sele	Sele	Sele	Sele
3.	Sele	Sele	Sele	Sele	Sele

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