Holo i ka ʻike nui Holo i ka hoʻokele docs
Check
in English

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.

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 lawe ʻ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 ka waihoʻoluʻu i ʻike ʻia mai ka maʻiʻo 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>

Nā kolamu kaha

E hoʻohana .table-striped-columnse hoʻohui i ka zebra-striping i kekahi kolamu papaʻaina.

# Ka mua hope loa Kalima
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka Manu @twitter
<table class="table table-striped-columns">
  ...
</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-dark table-striped-columns">
  ...
</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>
# 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-columns">
  ...
</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 nā ʻano ʻokoʻa o nā lālani kaha:

# 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 , nā kolamu ʻoniʻoni , 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 kala i nā cell papa. 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 ʻōlelo ʻ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, .table-striped-columns, 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 pākaukau, 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 ka 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));
    $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);
  }
}

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>

Māhele pūʻulu papa

Hoʻohui i kahi palena mānoanoa, ʻeleʻele ma waena o nā pūʻulu papa— <thead>, <tbody>, a <tfoot>me —me .table-group-divider. Hoʻopilikino i ka waihoʻoluʻu ma ka hoʻololi ʻana i ka border-top-color(ʻaʻole mākou e hāʻawi i kahi papa pono no kēia manawa).

# Ka mua hope loa Kalima
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka Manu @twitter
html
<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>

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 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
1 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
3 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 ʻano ʻano mai ka hū ʻ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
html
<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ā papa 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 i nā ʻāpana ʻike ā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 ma ka hoʻohana ʻana i .table-responsive{-sm|-md|-lg|-xl|-xxl}.

ʻoki ʻoki/ʻoki ʻia

Hoʻohana nā papa pane i ka overflow-y: hidden, kahi e hoʻopaʻa 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 ʻauʻau ā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 no ka hana ʻana i nā papa pane a hiki i kahi breakpoint. 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ā ākea 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:                 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%;

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 ʻ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-scaleloli.