Source

Kplɔ̃wo

Nuŋlɔɖiwo kple kpɔɖeŋuwo na kplɔ̃wo ƒe atsyãwɔwɔ ƒe tiatiawɔwɔ (le woƒe zazã si bɔ le JavaScript ƒe kpeɖeŋutɔwo me ta) kple Bootstrap.

Kpɔɖeŋuwo

Le kplɔ̃wo zazã le afisiafi le ame etɔ̃lia ƒe dɔwɔnuwo abe ɣletigbalẽwo kple ŋkeke tiatiawɔlawo ene ta la, míewɔ míaƒe kplɔ̃wo be woanye tiatiawɔblɔɖe . Ðeko nàtsɔ gɔmeɖoanyi ƒe hatsotso la akpe .tableɖe ɖesiaɖe ŋu <table>, emegbe nàkekee ɖe enu kple atsyã tɔxɛwo alo míaƒe tɔtrɔ ƒe hatsotso vovovo siwo le eme.

Ne èzã kplɔ̃ ƒe dzesi vevitɔ kekeake la, alesi .table-dzi kplɔ̃wo le le Bootstrap mee nye esi. Wonyi kplɔ̃ ƒe atsyãwo katã ƒe dome le Bootstrap 4 , si fia be woawɔ kplɔ̃ ɖesiaɖe si wotsɔ ƒo ƒui ƒe atsyã le mɔ ma ke nu abe dzila ene.

# . Gbã Nᴐ anyi didi Alᴐ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry ye nye esia Xe lae @twitter dzi 
<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>

Àte ŋu atrɔ amadedeawo hã—kple nuŋɔŋlɔ siwo me kɔ le megbenya siwo do viviti dzi—kple .table-dark.

# . Gbã Nᴐ anyi didi Alᴐ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry ye nye esia Xe lae @twitter dzi 
<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>

Tabla ƒe ta ƒe tiatiawɔblɔɖe

Abe alesi wòle le kplɔ̃wo kple kplɔ̃ viviwo gome ene la, zã tɔtrɔ ƒe hatsotsowo .thead-lightalo .thead-darknàna <thead>s nadze abe ɖe wòle keklẽm alo le ɣie ene.

# . Gbã Nᴐ anyi didi Alᴐ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry ye nye esia Xe lae @twitter dzi
# . Gbã Nᴐ anyi didi Alᴐ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry ye nye esia Xe lae @twitter dzi 
<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>

Fli siwo ŋu fli le

Zãe nàtsɔ .table-stripedakpe zebra-striping ɖe kplɔ̃ ƒe fli ɖesiaɖe si le <tbody>.

# . Gbã Nᴐ anyi didi Alᴐ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry ye nye esia Xe lae @twitter dzi 
<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>
# . Gbã Nᴐ anyi didi Alᴐ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry ye nye esia Xe lae @twitter dzi 
<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>

Kplɔ̃ si ŋu liƒo le

Tsɔe kpe ɖe eŋu .table-borderedna liƒowo le kplɔ̃a ƒe akpawo katã kple lãmenugbagbeviwo.

# . Gbã Nᴐ anyi didi Alᴐ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry Xevi la @twitter dzi 
<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>
# . Gbã Nᴐ anyi didi Alᴐ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry Xevi la @twitter dzi 
<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>

Fli siwo woate ŋu aʋuʋu

Tsɔ kpe ɖe eŋu .table-hoverbe wòana hover nɔnɔme nawɔ dɔ le kplɔ̃ ƒe fliwo dzi le a <tbody>.

# . Gbã Nᴐ anyi didi Alᴐ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry Xevi la @twitter dzi 
<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>
# . Gbã Nᴐ anyi didi Alᴐ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry Xevi la @twitter dzi 
<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>

Kplɔ̃ sue aɖe

Tsɔe kpe .table-smɖe eŋu be kplɔ̃wo nanɔ sue wu to lãmenugbagbevi siwo wotsɔ blaa nu ɖe ​​wo nɔewo ŋu la ɖeɖe ɖe afã me.

# . Gbã Nᴐ anyi didi Alᴐ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry Xevi la @twitter dzi 
<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>
# . Gbã Nᴐ anyi didi Alᴐ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry Xevi la @twitter dzi 
<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>

Klass siwo ku ɖe nya siwo ƒo xlãe ŋu

Zã nya siwo ƒo xlãe ƒe klasswo tsɔ de ama kplɔ̃ ƒe fliwo alo lãmenugbagbevi ɖekaɖekawo.

Nusrɔ̃ƒe Tanya ƒe tanya Tanya ƒe tanya
Le dɔwɔm Gaxɔ Gaxɔ
Gᴐmedzeƒe Gaxɔ Gaxɔ
Gɔmedzeƒe Gaxɔ Gaxɔ
Sekɛndrisuku Gaxɔ Gaxɔ
Dzidzedzekpᴐkpᴐ Gaxɔ Gaxɔ
Ŋɔdzi Gaxɔ Gaxɔ
Kpɔnyuiedodo Gaxɔ Gaxɔ
Nyatakaka Gaxɔ Gaxɔ
Kekeli Gaxɔ Gaxɔ
Nyrɔ Gaxɔ Gaxɔ 
<!-- 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>

Edziedzi kplɔ̃ ƒe megbe tɔtrɔwo mele kplɔ̃ viviti la ŋu o, ke hã, àteŋu azã nuŋɔŋlɔ alo megbe dɔwɔnuwo atsɔ aɖo atsyã mawo tɔgbe gbɔ.

# . Tanya ƒe tanya Tanya ƒe tanya
1. Gaxɔ Gaxɔ
2. Gaxɔ Gaxɔ
3. Gaxɔ Gaxɔ
4. Gaxɔ Gaxɔ
5. Gaxɔ Gaxɔ
6. Gaxɔ Gaxɔ
7. 7.1 Gaxɔ Gaxɔ
8 Gaxɔ Gaxɔ
9. 9 Gaxɔ Gaxɔ 
<!-- 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>
Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu

Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (le kpɔɖeŋu me, nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla kple .sr-onlyklass la ene.

Wɔ kplɔ̃ siwo ɖoa nya ŋu to ɖesiaɖe babla .tablekple .table-responsive{-sm|-md|-lg|-xl}, na kplɔ̃a naʋuʋu le tsia dzi le vovototo ɖesiaɖe max-widthsi ade (gake metsɔe de eme o) 576px, 768px, 992px, kple 1120px, ɖe wo nɔewo yome.

De dzesii be esi wònye be browsers doa alɔ range context queries fifia o ta la , míewɔa dɔ tso seɖoƒewo min-kple max-prefixes kple viewports kple fractional widths (si ate ŋu adzɔ le nɔnɔme aɖewo me le high-dpi devices dzi, le kpɔɖeŋu me) to asixɔxɔ siwo le pɛpɛpɛ wu zazã me na tsɔtsɔ sɔ kple wo nɔewo siawo .

Nya siwo woŋlɔ ɖe agbalẽa te

A <caption>wɔa dɔ abe tanya na kplɔ̃ ene. Ekpena ɖe ezãla siwo si screen reader le ŋu be woake ɖe kplɔ̃ ŋu ahase nusi ŋu wòku ɖo gɔme eye woatso nya me ne wodi be yewoaxlẽe.

Ŋlɔ ezãlawo ƒe ŋkɔwo ɖi
# . Gbã Nᴐ anyi didi Alᴐ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry ye nye esia Xe lae @twitter dzi 
<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>

Kplɔ̃ siwo ɖoa nya ŋu

Tabla siwo ɖoa nya ŋu la wɔnɛ be woate ŋu aʋuʋu kplɔ̃wo le tsia dzi bɔbɔe. Na kplɔ̃ ɖesiaɖe nawɔ dɔ le nukpɔkpɔwo katã dzi to a babla .tablekple .table-responsive. Alo, tia breakpoint si sɔ gbɔ wu si dzi nàto akpɔ kplɔ̃ si ɖoa nya ŋu vaseɖe to .table-responsive{-sm|-md|-lg|-xl}.

Tsitrenu ƒe lãɖeɖe/tsoɖeɖe

Tabla siwo ɖoa nya ŋu la zãa overflow-y: hidden, si ɖea nyatakaka ɖesiaɖe si yi ŋgɔ wu kplɔ̃a ƒe akpa siwo le ete alo etame la ɖa. Vevietɔ esia ate ŋu atso nuɖuɖu siwo le fli dzi kple ame bubuwo ƒe dɔwɔnu bubuwo ɖa.

Wowɔa nu ɖe ​​ame ŋu ɣesiaɣi

Le breakpoint ɖesiaɖe dzi la, zãe .table-responsivena kplɔ̃ siwo le ʋuʋum le tsia dzi.

# . Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya
1. Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ
2. Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ
3. Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint tɔxɛ aɖe

Zãe .table-responsive{-sm|-md|-lg|-xl}alesi wòhiãe nàtsɔ awɔ kplɔ̃ siwo ɖoa nya ŋu vaseɖe ɖiɖiɖemeƒe aɖe koŋ. Tso gbagbãƒe ma dzi va ɖo dzi la, kplɔ̃a awɔ nu abe alesi wòle ene eye maʋuʋu le tsia dzi o.

# . Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya
1. Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ
2. Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ
3. Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ
# . Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya
1. Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ
2. Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ
3. Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ
# . Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya
1. Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ
2. Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ
3. Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ
# . Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya Tanya ƒe tanya
1. Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ
2. Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ
3. Gaxɔ Gaxɔ Gaxɔ Gaxɔ Gaxɔ 
<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>