Source

Nnwinnade ahorow

Nwoma ne nhwɛsoɔ a ɛfa opt-in styling of tables (esiane wɔn a wɔde di dwuma abu so wɔ JavaScript plugins mu nti) ne Bootstrap.

Nhwɛso ahorow

Esiane sɛ wɔde tables di dwuma kɛse wɔ third-party widgets te sɛ kalenda ne date pickers so nti, yɛayɛ yɛn tables no sɛ ɛbɛyɛ opt-in . Just add the base class .tableto any <table>, afei trɛw mu ne custom styles anaa yɛn ahorow ahorow a ɛka ho modifier classes.

Sɛ wode table markup a ɛyɛ mfitiaseɛ paa di dwuma a, ɛha na .table-gyina tables hwɛ wɔ Bootstrap mu. Table styles nyinaa wɔ agyapadeɛ wɔ Bootstrap 4 , a ɛkyerɛ sɛ nested tables biara bɛ styled wɔ ɔkwan korɔ no ara so sɛdeɛ ɔwofoɔ no yɛ no.

# . Deɛ ɛdi kan Twa toɔ Di ho dwuma
1. 1. Marko Otto na ɔkyerɛwee @mdo na ɔkyerɛwee
2. 2. Yakob Thornton na ɔkyerɛwee @kɛseɛ
3. 3 Larry na ɔkyerɛwee Anomaa no @twitter so 
<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>

Wubetumi nso adan kɔla ahorow no—a wode nsɛm a emu yɛ hare ahyɛ akyi a ɛyɛ sum—de .table-dark.

# . Deɛ ɛdi kan Twa toɔ Di ho dwuma
1. 1. Marko Otto na ɔkyerɛwee @mdo na ɔkyerɛwee
2. 2. Yakob Thornton na ɔkyerɛwee @kɛseɛ
3. 3 Larry na ɔkyerɛwee Anomaa no @twitter so 
<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>

Table ti a wobetumi apaw

Te sɛ tables ne tables tuntum no, fa modifier classes no di dwuma .thead-lightanaasɛ .thead-darkma <thead>s yɛ hann anaa tuntum gray.

# . Deɛ ɛdi kan Twa toɔ Di ho dwuma
1. 1. Marko Otto na ɔkyerɛwee @mdo na ɔkyerɛwee
2. 2. Yakob Thornton na ɔkyerɛwee @kɛseɛ
3. 3 Larry na ɔkyerɛwee Anomaa no @twitter so
# . Deɛ ɛdi kan Twa toɔ Di ho dwuma
1. 1. Marko Otto na ɔkyerɛwee @mdo na ɔkyerɛwee
2. 2. Yakob Thornton na ɔkyerɛwee @kɛseɛ
3. 3 Larry na ɔkyerɛwee Anomaa no @twitter so 
<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>

Ntrɛwmu a ɛwɔ nsensanee

Fa di dwuma .table-stripedde zebra-striping ka table row biara a ɛwɔ <tbody>.

# . Deɛ ɛdi kan Twa toɔ Di ho dwuma
1. 1. Marko Otto na ɔkyerɛwee @mdo na ɔkyerɛwee
2. 2. Yakob Thornton na ɔkyerɛwee @kɛseɛ
3. 3 Larry na ɔkyerɛwee Anomaa no @twitter so 
<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>
# . Deɛ ɛdi kan Twa toɔ Di ho dwuma
1. 1. Marko Otto na ɔkyerɛwee @mdo na ɔkyerɛwee
2. 2. Yakob Thornton na ɔkyerɛwee @kɛseɛ
3. 3 Larry na ɔkyerɛwee Anomaa no @twitter so 
<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>

Ɔpon a ɛwɔ hye so

Fa ka ho .table-borderedma borders wɔ table no afã nyinaa ne cells.

# . Deɛ ɛdi kan Twa toɔ Di ho dwuma
1. 1. Marko Otto na ɔkyerɛwee @mdo na ɔkyerɛwee
2. 2. Yakob Thornton na ɔkyerɛwee @kɛseɛ
3. 3 Larry Anomaa no @twitter so 
<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>
# . Deɛ ɛdi kan Twa toɔ Di ho dwuma
1. 1. Marko Otto na ɔkyerɛwee @mdo na ɔkyerɛwee
2. 2. Yakob Thornton na ɔkyerɛwee @kɛseɛ
3. 3 Larry Anomaa no @twitter so 
<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>

Hoverable row ahorow

Fa ka .table-hoverho na ama hover tebea bi ayɛ adwuma wɔ table rows a ɛwɔ a <tbody>.

# . Deɛ ɛdi kan Twa toɔ Di ho dwuma
1. 1. Marko Otto na ɔkyerɛwee @mdo na ɔkyerɛwee
2. 2. Yakob Thornton na ɔkyerɛwee @kɛseɛ
3. 3 Larry Anomaa no @twitter so 
<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>
# . Deɛ ɛdi kan Twa toɔ Di ho dwuma
1. 1. Marko Otto na ɔkyerɛwee @mdo na ɔkyerɛwee
2. 2. Yakob Thornton na ɔkyerɛwee @kɛseɛ
3. 3 Larry Anomaa no @twitter so 
<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>

Pon ketewaa bi

Fa ka .table-smho na ama pon ahorow no ayɛ ketewaa denam cell padding a wubetwitwa mu abien no so.

# . Deɛ ɛdi kan Twa toɔ Di ho dwuma
1. 1. Marko Otto na ɔkyerɛwee @mdo na ɔkyerɛwee
2. 2. Yakob Thornton na ɔkyerɛwee @kɛseɛ
3. 3 Larry Anomaa no @twitter so 
<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>
# . Deɛ ɛdi kan Twa toɔ Di ho dwuma
1. 1. Marko Otto na ɔkyerɛwee @mdo na ɔkyerɛwee
2. 2. Yakob Thornton na ɔkyerɛwee @kɛseɛ
3. 3 Larry Anomaa no @twitter so 
<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>

Adesua ahorow a ɛfa nsɛm a ɛfa ho

Fa nsɛm a ɛfa ho adesua ahorow di dwuma de kɔla pon row anaa nkwammoaa ankorankoro.

Klaase Asɛmti Asɛmti
Asɔ Nnaduafie Nnaduafie
Mfiaseɛ Nnaduafie Nnaduafie
Mfiaseɛ Nnaduafie Nnaduafie
Nea ɛto so abien Nnaduafie Nnaduafie
Nkunimdie Nnaduafie Nnaduafie
Ɔhaw a ɛbɛtumi aba Nnaduafie Nnaduafie
Kɔkɔbɔ Nnaduafie Nnaduafie
Info Nnaduafie Nnaduafie
Kanea Nnaduafie Nnaduafie
Sum Nnaduafie Nnaduafie 
<!-- 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>

Daa table akyi variants nni hɔ ne dark table, nanso, wubetumi de text anaa background utilities adi dwuma de anya styles a ɛte saa ara.

# . Asɛmti Asɛmti
1. 1. Nnaduafie Nnaduafie
2. 2. Nnaduafie Nnaduafie
3. 3 Nnaduafie Nnaduafie
4. 4. Nnaduafie Nnaduafie
5. 5 Nnaduafie Nnaduafie
6. 6 Nnaduafie Nnaduafie
7. 7 Nnaduafie Nnaduafie
8 Nnaduafie Nnaduafie
9. 9 Nnaduafie Nnaduafie 
<!-- 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>
Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa

Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .sr-onlyadesuakuw no mu.

Yɛ mmuaeɛ pon denam biara .tablea wode .table-responsive{-sm|-md|-lg|-xl}, ma pon no nkɔ soro tẽẽ wɔ max-widthbreakpoint biara a ɛkɔ (nanso ɛnka ho) 576px, 768px, 992px, ne 1120px, sɛnea ɛte biara.

Hyɛ no nsow sɛ esiane sɛ mprempren browser ahorow ntumi mmoa range context queries , yɛyɛ adwuma twa anohyeto ahorow a ɛwɔ min-ne max-prefixes ne viewports a ɛwɔ fractional widths (a ebetumi aba wɔ tebea horow bi mu wɔ high-dpi mfiri ahorow so, sɛ nhwɛso no) ho dwuma denam values ​​a ɛwɔ pɛpɛɛpɛyɛ a ɛkorɔn a yɛde di dwuma ma saa ntotoho ahorow yi so .

Nsɛm a wɔakyerɛw wɔ ase

A <caption>yɛ adwuma te sɛ asɛmti a wɔde kyerɛ pon bi. Ɛboa wɔn a wɔde di dwuma a wɔwɔ screen readers no ma wonya pon na wɔte nea ɛfa ho ase na wosi gyinae sɛ wɔpɛ sɛ wɔkenkan anaa.

Kyerɛw wɔn a wɔde di dwuma no din
# . Deɛ ɛdi kan Twa toɔ Di ho dwuma
1. 1. Marko Otto na ɔkyerɛwee @mdo na ɔkyerɛwee
2. 2. Yakob Thornton na ɔkyerɛwee @kɛseɛ
3. 3 Larry na ɔkyerɛwee Anomaa no @twitter so 
<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>

Nnwom a wɔde bua nsɛm

Table ahorow a ɛyɛ mmuae ma wotumi twetwe table ahorow no tẽẽ a ɛnyɛ den. Ma pon biara nyɛ adwuma wɔ viewports nyinaa so denam a wode bɛkyekyere .tableso .table-responsive. Anaasɛ, paw breakpoint a ɛsen biara a wode benya pon a ɛyɛ mmuae denam .table-responsive{-sm|-md|-lg|-xl}.

Vertical clipping/twitwa mu

Responsive tables make use of overflow-y: hidden, a ɛtwitwa nsɛm biara a ɛkɔ akyiri sen table no ase anaa atifi anoano. Titiriw no, eyi betumi atwitwa dropdown menus ne afoforo widgets afoforo so.

Bere nyinaa yɛ aso

Wɔ breakpoint biara mu no, fa di dwuma .table-responsivema pon ahorow a ɛrekɔ soro no.

# . Asɛmti Asɛmti Asɛmti Asɛmti Asɛmti Asɛmti Asɛmti Asɛmti Asɛmti
1. 1. Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie
2. 2. Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie
3. 3 Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint pɔtee bi

Fa di dwuma .table-responsive{-sm|-md|-lg|-xl}sɛnea ɛho hia de yɛ mmuae pon ahorow kosi breakpoint pɔtee bi. Efi saa breakpoint no ne soro no, pon no bɛyɛ n’ade sɛnea ɛsɛ na ɛrentwetwe nkɔ soro.

# . Asɛmti Asɛmti Asɛmti Asɛmti Asɛmti
1. 1. Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie
2. 2. Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie
3. 3 Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie
# . Asɛmti Asɛmti Asɛmti Asɛmti Asɛmti
1. 1. Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie
2. 2. Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie
3. 3 Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie
# . Asɛmti Asɛmti Asɛmti Asɛmti Asɛmti
1. 1. Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie
2. 2. Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie
3. 3 Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie
# . Asɛmti Asɛmti Asɛmti Asɛmti Asɛmti
1. 1. Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie
2. 2. Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie
3. 3 Nnaduafie Nnaduafie Nnaduafie Nnaduafie Nnaduafie 
<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>