Nā papaʻaina

ʻO ka palapala a me nā laʻana no ke koho ʻana i nā papa (e hāʻawi ʻia i kā lākou hoʻohana maʻamau i nā plugins JavaScript) me Bootstrap.

Ma kēia ʻaoʻao

Nānā nui

Ma muli o ka hoʻohana nui ʻana o nā mea ma waena o nā hāmeʻa ʻaoʻao ʻekolu e like me nā kalena a me nā mea koho lā, koho<table> ʻia nā papa ʻaina o Bootstrap . E hoʻohui i ka papa kumu i kekahi , a laila e hoʻonui me kā mākou mau papa hoʻololi koho a i ʻole nā ʻano maʻamau. ʻAʻole i hoʻoili ʻia nā ʻano papa ʻaina a pau ma Bootstrap, ʻo ia hoʻi, hiki ke kapa ʻia nā papa pūnana a pau mai ka makua..table<table>

Ke hoʻohana nei i ka hōʻailona papa maʻamau, eia ke ʻano o ka .tablenānā ʻana o nā papa ma Bootstrap.

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Nā ʻano like ʻole

E hoʻohana i nā papa pōʻaiapili e kala i nā papa ʻaina, nā lālani pākaukau a i ʻole nā pūnaewele pākahi.

Papa	Poʻomanaʻo	Poʻomanaʻo
Default	Kelepona	Kelepona
Papahana	Kelepona	Kelepona
lua	Kelepona	Kelepona
Pōmaikaʻi	Kelepona	Kelepona
ʻO ka pōʻino	Kelepona	Kelepona
ʻŌlelo aʻo	Kelepona	Kelepona
ʻIke	Kelepona	Kelepona
Māmā	Kelepona	Kelepona
Poʻeleʻele	Kelepona	Kelepona

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

Ka hōʻike ʻana i ka manaʻo i nā ʻenehana kōkua

ʻO ka hoʻohana ʻana i ke kala e hoʻohui i ka manaʻo e hāʻawi wale i kahi hōʻailona ʻike, ʻaʻole e hāʻawi ʻia i nā mea hoʻohana i nā ʻenehana kōkua - e like me nā mea heluhelu pale. E hōʻoia i ka ʻike i hōʻike ʻia e ke kala i ʻike ʻia mai ka ʻike ponoʻī (e laʻa i ke kikokikona ʻike ʻia), a i ʻole e hoʻokomo ʻia ma o nā ala ʻē aʻe, e like me nā kikokikona hou i hūnā ʻia me ka .visually-hiddenpapa.

Nā papa kuhikuhi

Nā lālani kaha

E hoʻohana .table-stripede hoʻohui i ka zebra-striping i kēlā me kēia lālani pākaukau i loko o ka <tbody>.

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

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

Hiki ke hoʻohui ʻia kēia mau papa i nā ʻano ʻano papa:

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

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

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

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

Nā lālani hoverable

Hoʻohui .table-hoveri mea e hiki ai i kahi kūlana hover ma nā lālani pākaukau i loko o kahi <tbody>.

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

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

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

<table class="table table-dark table-hover">
  ...
</table>

Hiki ke hoʻohui pū ʻia kēia mau lālani hoverable me ka ʻano ʻano ʻoniʻoni:

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

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

Nā papa hana

E kaila i ka lālani papaʻaina a i ʻole ke kelepona ma ka hoʻohui ʻana i kahi .table-activepapa.

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

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

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

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

Pehea ka hana ʻana o nā ʻano like ʻole a me nā papa i hoʻopaʻa ʻia?

No nā papa i hoʻopaʻa ʻia ( nā lālani kaha ʻia , nā lālani hoverable , a me nā papa hana ), ua hoʻohana mākou i kekahi mau ʻenehana e hana i kēia mau hopena no nā ʻano like ʻole o kā mākou papaʻaina :

Hoʻomaka mākou ma ka hoʻonohonoho ʻana i ke kāʻei o kahi cell table me ka --bs-table-bgwaiwai maʻamau. A laila hoʻonoho nā ʻano ʻano papa ʻaina a pau i kēlā waiwai maʻamau e waihoʻoluʻu i nā cell table. Ma kēia ala, ʻaʻole mākou e pilikia inā hoʻohana ʻia nā kala semi-transparent ma ke ʻano he papa ʻaina.
A laila hoʻohui mākou i kahi aka pahu hoʻokomo ma luna o ka papa ʻaina me box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ka papa ma luna o nā mea i kuhikuhi ʻia background-color. No ka mea, hoʻohana mākou i kahi pālahalaha nui a ʻaʻohe blur, e monotone ke kala. No --bs-table-accent-bgka mea ʻaʻole i hoʻonohonoho ʻia e ka paʻamau, ʻaʻohe o mākou pahu pahu paʻamau.
Ke hoʻohui ʻia nā .table-striped, a i .table-hoverʻole .table-activenā papa, --bs-table-accent-bgua hoʻonohonoho ʻia ka kala semitransparent e kala i ke kua.
No kēlā me kēia ʻano papaʻaina, hana mākou i kahi --bs-table-accent-bgkala me ka ʻokoʻa kiʻekiʻe loa e pili ana i kēlā kala. No ka laʻana, ʻoi aku ka ʻeleʻele o ka leo no .table-primaryka mea, ʻoi aku .table-darkka māmā o ke kala leo.
Hana ʻia nā waihoʻoluʻu kikokikona a me nā palena ma ke ʻano like, a ua hoʻoili ʻia ko lākou mau kala ma ke ʻano paʻamau.

Ma hope o nā hiʻohiʻona e like me kēia:

@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));

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

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Palena papa

Nā papaʻaina palena

Hoʻohui .table-borderedno nā palena ma nā ʻaoʻao a pau o ka pākaukau a me nā cell.

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

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

Hiki ke hoʻohui ʻia nā pono kala palena no ka hoʻololi ʻana i nā kala:

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

<table class="table table-bordered border-primary">
  ...
</table>

Nā papa ʻaina ʻole

Hoʻohui .table-borderlessno kahi papa ʻaina ʻole palena ʻole.

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

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

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

<table class="table table-dark table-borderless">
  ...
</table>

Nā papa liʻiliʻi

E hoʻohui .table-smi .tablemea paʻa hou aʻe ma o ka ʻoki ʻana i nā cell āpau paddingi ka hapalua.

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

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

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

<table class="table table-dark table-sm">
  ...
</table>

Hoʻopololei pololei

Hoʻopololei mau <thead>ʻia nā pūnaepapa papa i lalo. Ua hoʻoili ʻia nā ʻāpana papa i <tbody>ko lākou alignment mai <table>a hoʻopaʻa ʻia i ka luna ma ke ʻano paʻamau. E hoʻohana i nā papa align vertical e hoʻoponopono hou i kahi e pono ai.

Poʻomanaʻo 1	Poʻomanaʻo 2	Poʻomanaʻo 3	Poʻomanaʻo 4
Loaʻa kēia cell `vertical-align: middle;`mai ka papaʻaina	Loaʻa kēia cell `vertical-align: middle;`mai ka papaʻaina	Loaʻa kēia cell `vertical-align: middle;`mai ka papaʻaina	Eia kekahi wahi kikokikona, i manaʻo ʻia e lawe i kahi ākea ākea, e hōʻike i ke ʻano o ka hana ʻana o ka hoʻopololei kū i nā keena ma mua.
Loaʻa kēia cell `vertical-align: bottom;`mai ka lālani papaʻaina	Loaʻa kēia cell `vertical-align: bottom;`mai ka lālani papaʻaina	Loaʻa kēia cell `vertical-align: bottom;`mai ka lālani papaʻaina	Eia kekahi wahi kikokikona, i manaʻo ʻia e lawe i kahi ākea ākea, e hōʻike i ke ʻano o ka hana ʻana o ka hoʻopololei kū i nā keena ma mua.
Loaʻa kēia cell `vertical-align: middle;`mai ka papaʻaina	Loaʻa kēia cell `vertical-align: middle;`mai ka papaʻaina	Hoʻopili ʻia kēia kelepona i luna.	Eia kekahi wahi kikokikona, i manaʻo ʻia e lawe i kahi ākea ākea, e hōʻike i ke ʻano o ka hana ʻana o ka hoʻopololei kū i nā keena ma mua.

<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ʻole hoʻoili ʻia nā kaila palena, nā ʻano hana, a me nā ʻano ʻano papaʻaina e nā papa pūnana.

Ka mua

hope loa

Kalima

Maka

Otto

@mdo

Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo
A	Ka mua	hope loa
B	Ka mua	hope loa
C	Ka mua	hope loa

Larry

ka Manu

@twitter

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

Pehea ka hana pūnana

No ka pale ʻana i nā ʻano ʻano mai ka lele ʻana i nā pākaukau pūnana, hoʻohana mākou i ka >mea koho keiki combinator ( ) ma kā mākou CSS. No ka mea pono mākou e hoʻopaʻa i nā tds a me nā s a thpau i loko o ka thead, tbody, a me tfoot, e nānā lōʻihi loa kā mākou mea koho me ka ʻole o ia. No laila, hoʻohana mākou i ka mea .table > :not(caption) > * > *koho ʻano ʻē aʻe e hoʻopaʻa i nā tds a me nā s a thpau o ka .table, akā ʻaʻohe o nā papa hoʻopaʻa ʻia.

E hoʻomaopopo inā hoʻohui ʻoe i <tr>s ma ke ʻano he keiki pololei o ka papaʻaina, <tr>e hoʻopili ʻia ia mau mea i kahi <tbody>maʻamau, no laila e hana ai kā mākou mea koho e like me ka mea i manaʻo ʻia.

Anatomy

Poʻo papaʻaina

E like me nā papa ʻaina a me nā papa ʻeleʻele, e hoʻohana i nā papa hoʻololi a i .table-lightʻole .table-darke <thead>hoʻomāmā a ʻeleʻele paha.

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry	ka Manu	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry	ka Manu	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Ka wāwae papaʻaina

#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry	ka Manu	@twitter
wāwae wāwae	wāwae wāwae	wāwae wāwae	wāwae wāwae

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

Nā huaʻōlelo

ʻO kahi <caption>hana e like me ke poʻo no kahi papaʻaina. Kōkua ia i nā mea hoʻohana me nā mea heluhelu pale e ʻimi i kahi papaʻaina a hoʻomaopopo i ke ʻano o ia mea a hoʻoholo inā makemake lākou e heluhelu.

Papa inoa o nā mea hoʻohana
#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry ka Manu		@twitter

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

Hiki iā ʻoe ke kau i ka <caption>ma luna o ka papaʻaina me .caption-top.

Papa inoa o nā mea hoʻohana
#	Ka mua	hope loa	Kalima
1	Maka	Otto	@mdo
2	ʻO Iakoba	Thornton	@momona
3	Larry	ka Manu	@twitter

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

Nā pākaukau pane

Hāʻawi nā papa pane i nā papa e ʻōwili ʻia me ka maʻalahi. E hana i kekahi papa ʻaina e pane mai ana ma nā wahi nānā a pau ma ke kāʻei ʻana i kahi .tableme .table-responsive. A i ʻole, e koho i kahi haʻihaʻi kiʻekiʻe loa e loaʻa ai kahi papa pane a hiki i ka hoʻohana ʻana .table-responsive{-sm|-md|-lg|-xl|-xxl}.

ʻoki ʻoki/ʻoki ʻia

Hoʻohana nā papa pane i ka overflow-y: hidden, ka mea e ʻoki ai i nā ʻike ma waho aʻe o nā ʻaoʻao lalo a i luna paha o ka papaʻaina. ʻO ka mea kūikawā, hiki i kēia ke ʻoki i nā menus dropdown a me nā widget ʻaoʻao ʻekolu.

Pane mau

Ma kēlā me kēia wahi haʻihaʻi, e hoʻohana .table-responsiveno nā papa ʻōwili ākea.

#	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo
1	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona
2	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona
3	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona

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

Kūkākūkā haʻihaʻi

E hoʻohana .table-responsive{-sm|-md|-lg|-xl|-xxl}e like me ka mea e pono ai e hana i nā papa pane a hiki i kahi haʻihaʻi. Mai kēlā haʻihaʻi a piʻi aʻe, e hana maʻamau ka papaʻaina a ʻaʻole e ʻōwili i ka pae.

Ua haki paha kēia mau papa ʻaina a hiki i ka hoʻohana ʻana o ko lākou mau ʻano pane i nā laula ʻike kikoʻī.

#	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo
1	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona
2	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona
3	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona

#	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo
1	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona
2	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona
3	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona

#	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo
1	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona
2	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona
3	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona

#	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo
1	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona
2	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona
3	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona

#	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo
1	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona
2	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona
3	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona

#	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo	Poʻomanaʻo
1	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona
2	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona
3	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona	Kelepona

<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

Nā mea hoʻololi

$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:                 $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:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

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

$table-bg-scale:              -80%;

Loop

$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,
);

Hoʻopilikino

Hoʻohana ʻia nā mea hoʻololi kumu ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) no ka hoʻoholo ʻana i ka ʻokoʻa o nā ʻano papa.
Ma waho aʻe o nā ʻano papa ʻaina māmā a me nā pōʻeleʻele, hoʻomālamalama ʻia nā kala kumuhana e ka $table-bg-levelloli.