in English

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.

Wɔ kratafa yi so

Nsɛm a Wɔaka abom

Esiane sɛ wɔde nneɛma di dwuma kɛse wɔ <table>widget ahorow a ɛto so abiɛsa te sɛ kalenda ne date pickers so nti, Bootstrap no tables no yɛ opt-in . Fa base class .tableno ka biara ho <table>, afei fa yɛn optional modifier classes anaa custom styles no trɛw mu. Table styles nyinaa nnyi awo wɔ Bootstrap mu, a ɛkyerɛ sɛ wobetumi ayɛ nested tables biara a ɛde ne ho afi ɔwofo no ho.

Sɛ wode table markup a ɛyɛ mfitiaseɛ paa di dwuma a, ɛha na .table-gyina tables hwɛ wɔ Bootstrap mu.

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

Nsonsonoe ahorow

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

Klaase	Asɛmti	Asɛmti
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 tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>

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 .visually-hiddenadesuakuw no mu.

Nnwom a wɔde nnyigyei nkyerɛwde ahyɛ mu

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 Anomaa no		@twitter so

<table class="table table-striped">
  ...
</table>

Adum a ɛwɔ nsensanee

Fa di dwuma .table-striped-columnsde ka zebra-striping ka table column biara ho.

# .	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-striped-columns">
  ...
</table>

Wobetumi nso de saa adesua ahorow yi aka table variants ho:

# .	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-dark table-striped">
  ...
</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-dark table-striped-columns">
  ...
</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-success table-striped">
  ...
</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-success table-striped-columns">
  ...
</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">
  ...
</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-dark table-hover">
  ...
</table>

Saa hoverable rows yi nso wobetumi de abɔ striped rows variant no ho:

# .	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-striped table-hover">
  ...
</table>

Nnwom a ɛyɛ nnam

Twe adwene si table row anaa cell bi so denam .table-activeadesua bi a wode bɛka ho 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">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">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-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Ɔkwan bɛn so na variants ne accented tables no yɛ adwuma?

Wɔ accented tables ( striped rows , striped columns , hoverable rows , ne active tables ), yɛde akwan bi dii dwuma de maa saa nsunsuanso yi yɛɛ adwuma maa yɛn table variants nyinaa :

Yɛhyɛ aseɛ denam table cell bi akyi a yɛde --bs-table-bgcustom property no besi hɔ no so. Afei table variants nyinaa hyehyɛ saa custom property no ma ɛyɛ table cells no kɔla. Saa kwan yi so no, sɛ wɔde kɔla ahorow a ɛyɛ fã bi a ɛyɛ mmerɛw di dwuma sɛ pon akyi mfonini a, yɛrenkɔ ɔhaw mu.
Afei yɛde inset box shadow ka table cells no so a box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to layer wɔ biara a wɔakyerɛ no atifi background-color. Esiane sɛ yɛde spread kɛse bi di dwuma na yenni blur nti, kɔla no bɛyɛ monotone. Firi--bs-table-accent-bg ɛyɛ unset by default nti, yenni default box shadow.
Sɛ wɔde .table-striped, .table-striped-columns, .table-hoveranaa .table-activeadesua ahorow bi ka ho a, wɔde the --bs-table-accent-bgno si kɔla a ɛyɛ fã bi so de yɛ kɔla a ɛwɔ akyi no.
Wɔ table variant biara ho no, yɛyɛ --bs-table-accent-bgkɔla a ɛwɔ nsonsonoe a ɛkorɔn sen biara a egyina saa kɔla no so. Sɛ nhwɛso no, accent color for .table-primaryno yɛ tuntum bere .table-darka ɛwɔ accent kɔla a ɛyɛ hare no.
Wɔayɛ nsɛm ne hye so kɔla ahorow no ɔkwan koro no ara so, na wɔn kɔla ahorow no yɛ nea wonya fi awo mu default so.

Wɔ akyi no ɛte sɛ eyi:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
    $border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Table a ɛwɔ hye so

Nnwom 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">
  ...
</table>

Wobetumi de border color utilities aka ho de asesa kɔla ahorow:

# .	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 border-primary">
  ...
</table>

Tables a enni ahye

Fa ka ho .table-borderlessma pon a enni ahye.

# .	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-borderless">
  ...
</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-dark table-borderless">
  ...
</table>

Apon nketewa a wɔde di dwuma

Fa ka .table-smho ma ɛnyɛ .tableden bio denam nkwammoaa no nyinaa a wubetwitwa paddingmu 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">
  ...
</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-dark table-sm">
  ...
</table>

Table kuw a wɔkyekyɛ nneɛma mu

Fa ɔhye a ɛyɛ den, a ɛyɛ sum ka ho wɔ pon akuw ntam— <thead>, <tbody>, ne <tfoot>—ne .table-group-divider. Yɛ kɔla no sɛnea wopɛ denam border-top-color(a mprempren yɛmfa utility class mma mma saa bere yi) a wobɛsesa 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

html na ɛwɔ hɔ

<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 class="table-group-divider">
    <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>

Nhyiam a ɛda hɔ gyina hɔ

Table cells of <thead>no yɛ bere nyinaa vertical aligned to ase. Table cells wɔ <tbody>inherit wɔn alignment fi <table>na wɔde aligned kɔ soro default. Fa vertical align classes no di dwuma fa san hyɛ baabi a ɛho hia.

Asɛmti 1	Asɛmti 2	Asɛmti 3	Asɛmti 4
Saa nkwammoaa yi nya agyapade `vertical-align: middle;`fi pon no so	Saa nkwammoaa yi nya agyapade `vertical-align: middle;`fi pon no so	Saa nkwammoaa yi nya agyapade `vertical-align: middle;`fi pon no so	Eyi ha yɛ beae a wɔde hyɛ mu nsɛm bi, a wɔayɛ sɛ ɛbɛfa baabi a ɛda hɔ kakra, de akyerɛ sɛnea gyinabea a wɔde gyina hɔ no yɛ adwuma wɔ nkwammoaa a edi eyi anim no mu.
Saa cell yi nya agyapade `vertical-align: bottom;`fi table row no mu	Saa cell yi nya agyapade `vertical-align: bottom;`fi table row no mu	Saa cell yi nya agyapade `vertical-align: bottom;`fi table row no mu	Eyi ha yɛ beae a wɔde hyɛ mu nsɛm bi, a wɔayɛ sɛ ɛbɛfa baabi a ɛda hɔ kakra, de akyerɛ sɛnea gyinabea a wɔde gyina hɔ no yɛ adwuma wɔ nkwammoaa a edi eyi anim no mu.
Saa nkwammoaa yi nya agyapade `vertical-align: middle;`fi pon no so	Saa nkwammoaa yi nya agyapade `vertical-align: middle;`fi pon no so	Saa nkwammoaa yi hyia wɔ soro hɔ.	Eyi ha yɛ beae a wɔde hyɛ mu nsɛm bi, a wɔayɛ sɛ ɛbɛfa baabi a ɛda hɔ kakra, de akyerɛ sɛnea gyinabea a wɔde gyina hɔ no yɛ adwuma wɔ nkwammoaa a edi eyi anim no mu.

<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Nesting a wɔde yɛ buw

Border styles, active styles, ne table variants no, ɛnyɛ nested tables no nnya agyapadeɛ.

# .

Deɛ ɛdi kan

Twa toɔ

Di ho dwuma

1. 1.

Marko

Otto na ɔkyerɛwee

@mdo na ɔkyerɛwee

Titiriw	Titiriw	Titiriw
BI	Deɛ ɛdi kan	Twa toɔ
B. B.	Deɛ ɛdi kan	Twa toɔ
C. Ɔde ne nsa kyerɛɛ	Deɛ ɛdi kan	Twa toɔ

3. 3

Larry na ɔkyerɛwee

Anomaa no

@twitter so

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Sɛnea nesting yɛ adwuma

Sɛnea ɛbɛyɛ a style biara rentu nkɔ nested tables so no, yɛde child combinator ( >) selector no di dwuma wɔ yɛn CSS no mu. Esiane sɛ ɛsɛ sɛ yɛde yɛn ani si tds ne ths a ɛwɔ thead, tbody, ne , no nyinaa so tfootnti, yɛn selector no bɛyɛ tenten fɛfɛɛfɛ sɛ enni hɔ a. Sɛnea ɛte no, yɛde rather odd looking .table > :not(caption) > * > *selector no di dwuma de de yɛn ani si tds ne ths a ɛwɔ no nyinaa so.table , nanso ɛnyɛ nested table biara a ebetumi aba no mu biara.

Hyɛ no nsow sɛ sɛ wode <tr>s ka ho sɛ pon bi mma tẽẽ a, wɔbɛkyekyere wɔn <tr>no wɔ a <tbody>mu default so, na ɛnam so ama yɛn selectors no ayɛ adwuma sɛnea wɔahyɛ da ayɛ no.

Anatomy ho nimdeɛ

Table ti

Te sɛ tables ne tables tuntum no, fa modifier classes no di dwuma .table-lightanaasɛ .table-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

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </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">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Table nan ase

# .	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
Ase hɔ asɛm	Ase hɔ asɛm	Ase hɔ asɛm	Ase hɔ asɛm

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

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 Anomaa no		@twitter so

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Wubetumi nso de nea <caption>ɛwɔ pon no atifi no ahyɛ .caption-top.

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

html na ɛwɔ hɔ

<table class="table caption-top">
  <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|-xxl}.

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|-xxl}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.

Saa tables yi betumi ayɛ te sɛ nea abubu kosi sɛ wɔn mmuae kwan ahorow no bedi dwuma wɔ viewport ntrɛwmu pɔtee bi mu.

# .	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
2. 2.	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie
3. 3	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie

# .	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
2. 2.	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie
3. 3	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie

# .	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
2. 2.	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie
3. 3	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie

# .	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
2. 2.	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie
3. 3	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie

# .	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
2. 2.	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie
3. 3	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie

# .	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
2. 2.	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie
3. 3	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie	Nnaduafie

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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

<div class="table-responsive-xxl">
  <table class="table">
    ...
  </table>
</div>

Sass

Nneɛma a Ɛsakra

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 var(--#{$prefix}body-color);
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Ɛpɔ

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Nneɛma a Wɔyɛ no Sɛnea Wɔpɛ

Nneɛma a ɛsakra ( $table-striped-bg-factor, $table-active-bg-factor& .$table-hover-bg-factor ) no di dwuma de kyerɛ nsonsonoe a ɛwɔ table variants mu.
Sɛ hann & sum pon variants no to nkyɛn a, asɛmti kɔla ahorow no yɛ hann denam $table-bg-scalensakrae no so.