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

Tafula leri nga riki na ndzilakano

Engetelani .table-borderlesstafula leri nga riki na mindzilakano.

# . Sungula Hetelela Khoma
1. Marka Otto @mdo
2. Yakobe Thornton @mafurha
3. Larry wa Xinyenyana @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-borderlessyi nga ha tlhela yi tirhisiwa eka matafula lama nga ni munyama.

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

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
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark 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>

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

# Heading Heading
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>
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Create responsive tables by wrapping any .table with .table-responsive{-sm|-md|-lg|-xl}, making the table scroll horizontally at each max-width breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.

Note that since browsers do not currently support range context queries, we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.

Captions

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @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>

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
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 specific

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.

Matafula lawa ya nga ha vonaka ya tshovekile ku kondza switayele swa wona swo hlamula swi tirha eka ku anama ko karhi ka xivono.

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