Source

Matafula

Matsalwa na swikombiso swa ku hlawula ku endla xitayili xa matafula (hi ku nyikiwa ku tirhisiwa ka wona loku tolovelekeke eka ti-plugin ta JavaScript) na Bootstrap.

Swikombiso

Hikwalaho ka ku tirhisiwa lokukulu ka matafula eka switirhisiwa swa vanhu va vunharhu ku fana na tikhalendara na vahlawuri va masiku, hi endlile matafula ya hina leswaku ya va yo hlawula ku nghena . Just add the base class .tableto any <table>, kutani u andlala hi switayele swa ntolovelo kumbe titlilasi ta hina to hambana-hambana leti katsiweke ta vacinci.

Hi ku tirhisa xikombiso xa tafula xa xisekelo swinene, hi leyi ndlela leyi .tablematafula lama simekiweke eka -based ma langutekaka ha yona eka Bootstrap. Switayili hinkwaswo swa matafula swi dya ndzhaka eka Bootstrap 4 , leswi vulaka leswaku matafula wahi na wahi lama pfanganisiweke ya ta endliwa hi ndlela leyi fanaka na ya mutswari.

# . Sungula Hetelela Khoma
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry Xinyenyana @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>

U nga ha tlhela u hundzuluxa mihlovo—hi matsalwa yo olova eka swivumbeko swa ntima—hi .table-dark.

# . Sungula Hetelela Khoma
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry Xinyenyana @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>

Swihlawulekisi swa nhloko ya tafula

Ku fana na matafula na matafula ya ntima, tirhisa titlilasi ta swihundzuluxi .thead-lightkumbe .thead-darkku endla leswaku <thead>s yi vonaka yi ri ya grey yo vonikela kumbe ya ntima.

# . Sungula Hetelela Khoma
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry Xinyenyana @twitter
# . Sungula Hetelela Khoma
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry Xinyenyana @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>

Tilayini leti nga ni mitila

Tirhisa .table-stripedku engetela zebra-striping eka layini yihi na yihi ya tafula endzeni ka <tbody>.

# . Sungula Hetelela Khoma
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry Xinyenyana @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>
# . Sungula Hetelela Khoma
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry Xinyenyana @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>

Tafula leri nga ni ndzilakano

Engetelani .table-borderedku kuma mindzilakano eka matlhelo hinkwawo ya tafula na tisele.

# . Sungula Hetelela Khoma
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry wa Xinyenyana @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>
# . Sungula Hetelela Khoma
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry wa Xinyenyana @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>

Tilayini leti nga hoverable

Engetela .table-hoverku endla leswaku xiyimo xa hover xi tirha eka tilayini ta tafula endzeni ka <tbody>.

# . Sungula Hetelela Khoma
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry wa Xinyenyana @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>
# . Sungula Hetelela Khoma
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry wa Xinyenyana @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>

Tafula leritsongo

Engetelani .table-smku endla leswaku matafula ya hlangana swinene hiku tsema cell padding hi hafu.

# . Sungula Hetelela Khoma
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry wa Xinyenyana @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>
# . Sungula Hetelela Khoma
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry wa Xinyenyana @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>

Titlilasi ta mongo

Tirhisa titlilasi ta mongo ku penda tilayini ta tafula kumbe tisele ha yin’we.

Tlilasi Nhlokomhaka Nhlokomhaka
Hanya Sele Sele
Ku tlula Sele Sele
Phurayimari Sele Sele
Xikolo xa vumbirhi Sele Sele
Humelela Sele Sele
Nghozi Sele Sele
Xilemukisi Sele Sele
Info Sele Sele
Rivoni Sele Sele
Xinyama 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>

Swihlawulekisi swa le ndzhaku swa tafula swa nkarhi na nkarhi a swi kumeki na tafula ra munyama, hambiswiritano, u nga tirhisa switirhisiwa swa tsalwa kumbe swa le ndzhaku ku fikelela switayele leswi fanaka.

# . Nhlokomhaka Nhlokomhaka
1. Sele Sele
2. Sele Sele
3. Sele Sele
4. Sele Sele
5. Sele Sele
6. Sele Sele
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>
Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta

Ku tirhisa muvala ku engetela nhlamuselo swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku mahungu lama kombisiweke hi muvala ya le rivaleni eka nhundzu hi yoxe (xikombiso tsalwa leri vonakaka), kumbe ya katsiwile hi tindlela tin’wana, ku fana na tsalwa ro engetela leri fihliweke na .sr-onlytlilasi.

Endla matafula lama hlamulaka hi ku phutsela rin’wana ni rin’wana .tablehi .table-responsive{-sm|-md|-lg|-xl}, u endla leswaku tafula ri rhendzeleka hi ndlela yo olova eka ndhawu yin’wana ni yin’wana max-widthyo tsemakanya ku fika eka (kambe ku nga katsi) 576px, 768px, 992px, na 1120px, hi ku landzelelana.

Xiya leswaku tanihileswi swihlamusela-marito sweswi swi nga seketeliki swivutiso swa xiyimo xa rhengu , hi tirha ku rhendzela swipimelo swa min-na max-swirhangi na swivono leswi nga na ku anama ka xiphemu (leswi nga humelelaka ehansi ka swiyimo swo karhi eka switirhisiwa swa dpi ya le henhla, hi xikombiso) hi ku tirhisa mimpimo leyi nga na vukheta bya le henhla eka ku pimanisiwa loku .

Swifaniso swa le hansi

A <caption>yi tirha ku fana na nhlokomhaka ya tafula. Yi pfuna vatirhisi lava nga ni swihlaya-swikirini leswaku va kuma tafula ni ku twisisa leswaku ri vulavula hi yini ni ku endla xiboho xa loko va lava ku ri hlaya.

Nxaxamelo wa vatirhisi
# . Sungula Hetelela Khoma
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry Xinyenyana @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>

Matafula lama hlamulaka

Matafula lama hlamulaka ma pfumelela matafula ku rhendzeleka hi ndlela yo olova hi ku olova. Endla tafula rihi na rihi ri hlamula eka swivono hinkwaswo hi ku phutsela a .tablehi .table-responsive. Kumbe, hlawula ndhawu leyikulu yo wisa leyi u nga ta va ni tafula leri hlamulaka ha yona hi ku tirhisa .table-responsive{-sm|-md|-lg|-xl}.

Ku tsemiwa/ku tsemiwa loku yimisiweke

Matafula lama hlamulaka ma tirhisa overflow-y: hidden, lama tsemaka rungula rihi na rihi leri hundzaka emakumu ya le hansi kumbe ya le henhla ya tafula. Ngopfu-ngopfu, leswi swi nga tsema timenyu leti nga ehansi ni switirhisiwa swin’wana swa vanhu van’wana.

Minkarhi hinkwayo u hlamula

Ku tsemakanya ndhawu yin’wana ni yin’wana yo wisa, tirhisa .table-responsiveeka matafula lama rhendzelekaka hi ndlela leyi nga etlhelo.

# . Nhlokomhaka Nhlokomhaka Nhlokomhaka Nhlokomhaka Nhlokomhaka Nhlokomhaka Nhlokomhaka Nhlokomhaka Nhlokomhaka
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 leyi kongomeke

Tirhisa .table-responsive{-sm|-md|-lg|-xl}hilaha swi lavekaka hakona ku tumbuluxa matafula lama hlamulaka ku fikela eka ndhawu yo karhi yo wisa. Ku suka eka ndhawu yoleyo yo tshoveka ku ya ehenhla, tafula ri ta tikhoma hi ndlela leyi tolovelekeke naswona ri nga rhendzeleki hi ndlela leyi nga etlhelo.

# . Nhlokomhaka Nhlokomhaka Nhlokomhaka Nhlokomhaka Nhlokomhaka
1. Sele Sele Sele Sele Sele
2. Sele Sele Sele Sele Sele
3. Sele Sele Sele Sele Sele
# . Nhlokomhaka Nhlokomhaka Nhlokomhaka Nhlokomhaka Nhlokomhaka
1. Sele Sele Sele Sele Sele
2. Sele Sele Sele Sele Sele
3. Sele Sele Sele Sele Sele
# . Nhlokomhaka Nhlokomhaka Nhlokomhaka Nhlokomhaka Nhlokomhaka
1. Sele Sele Sele Sele Sele
2. Sele Sele Sele Sele Sele
3. Sele Sele Sele Sele Sele
# . Nhlokomhaka Nhlokomhaka Nhlokomhaka Nhlokomhaka Nhlokomhaka
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>