ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
Check
in English

මේස

බූට්ස්ට්‍රැප් සමඟ වගු තෝරා ගැනීම සඳහා ප්‍රලේඛනය සහ උදාහරණ (ජාවාස්ක්‍රිප්ට් ප්ලගීනවල ඒවායේ ප්‍රචලිත භාවිතය අනුව).

දළ විශ්ලේෂණය

<table>දින දර්ශන සහ දින පිකර් වැනි තෙවන පාර්ශ්ව විජට් හරහා මුලද්‍රව්‍ය බහුලව භාවිතා වීම හේතුවෙන් , Bootstrap හි වගු තෝරා ඇත . .tableඕනෑම දෙයකට මූලික පන්තිය එක් කරන්න <table>, ඉන්පසු අපගේ විකල්ප විකරණයක පන්ති හෝ අභිරුචි මෝස්තර සමඟින් දිගු කරන්න. සියලුම වගු විලාසයන් Bootstrap හි උරුම නොවේ, එනම් ඕනෑම කැදලි වගු දෙමාපියන්ගෙන් ස්වාධීනව හැඩගස්වාගත හැක.

.tableවඩාත්ම මූලික වගු සලකුණු භාවිතා කරමින්, Bootstrap හි පදනම් වගු පෙනෙන ආකාරය මෙන්න .

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<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>

ප්රභේද

වගු, වගු පේළි හෝ තනි සෛල වර්ණ කිරීමට සන්දර්භීය පන්ති භාවිතා කරන්න.

පන්තිය ශීර්ෂය ශීර්ෂය
පෙරනිමිය සෛලය සෛලය
ප්රාථමික සෛලය සෛලය
ද්විතියික සෛලය සෛලය
සාර්ථකත්වය සෛලය සෛලය
අනතුර සෛලය සෛලය
අවවාදයයි සෛලය සෛලය
තොරතුරු සෛලය සෛලය
ආලෝකය සෛලය සෛලය
අඳුරු සෛලය සෛලය
<!-- 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>
උපකාරක තාක්ෂණයන් සඳහා අර්ථය ලබා දීම

අර්ථය එකතු කිරීම සඳහා වර්ණය භාවිතා කිරීම දෘශ්‍ය ඇඟවීමක් පමණක් සපයයි, එය තිර කියවනය වැනි ආධාරක තාක්ෂණයන් භාවිතා කරන්නන්ට ලබා නොදේ. වර්ණයෙන් දැක්වෙන තොරතුරු එක්කෝ අන්තර්ගතයෙන්ම පැහැදිලි බව (උදා: දෘශ්‍ය පෙළ) හෝ .visually-hiddenපන්තිය සමඟ සඟවා ඇති අතිරේක පෙළ වැනි විකල්ප ක්‍රම මගින් ඇතුළත් කර ඇති බව සහතික කර ගන්න.

උච්චාරණ වගු

ඉරි සහිත පේළි

.table-stripedතුළ ඇති ඕනෑම වගු පේළියකට සීබ්‍රා-ඉරි එකතු කිරීමට භාවිතා කරන්න <tbody>.

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-striped">
  ...
</table>

ඉරි සහිත තීරු

.table-striped-columnsඕනෑම වගු තීරුවකට සීබ්‍රා-ඉරි එකතු කිරීමට භාවිතා කරන්න .

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-striped-columns">
  ...
</table>

මෙම පන්ති මේස ප්‍රභේදවලට ද එක් කළ හැක:

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-dark table-striped">
  ...
</table>
# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-dark table-striped-columns">
  ...
</table>
# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-success table-striped">
  ...
</table>
# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-success table-striped-columns">
  ...
</table>

චලනය කළ හැකි පේළි

.table-hovera තුළ වගු පේළි මත hover තත්වයක් සක්‍රීය කිරීමට එක් කරන්න <tbody>.

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-hover">
  ...
</table>
# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-dark table-hover">
  ...
</table>

මෙම ගමන් කළ හැකි පේළි ඉරි සහිත පේළි ප්‍රභේදය සමඟ ද ඒකාබද්ධ කළ හැකිය:

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-striped table-hover">
  ...
</table>

ක්රියාකාරී වගු

.table-activeපන්තියක් එක් කිරීමෙන් වගු පේළියක් හෝ කොටුවක් උද්දීපනය කරන්න .

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<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>
# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<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>

ප්‍රභේද සහ උච්චාරණ වගු ක්‍රියා කරන්නේ කෙසේද?

උච්චාරණ වගු සඳහා ( ඉරි සහිත පේළි , ඉරි සහිත තීරු , සැරිසැරීමට හැකි පේළි සහ සක්‍රිය වගු ), අපගේ සියලුම වගු ප්‍රභේද සඳහා මෙම බලපෑම් ක්‍රියාත්මක කිරීමට අපි යම් තාක්ෂණික ක්‍රම භාවිතා කළෙමු :

  • --bs-table-bgඅභිරුචි දේපල සමඟ වගු කොටුවක පසුබිම සැකසීමෙන් අපි ආරම්භ කරමු . සියලුම වගු ප්‍රභේද පසුව එම අභිරුචි ගුණය වගු සෛල වර්ණ ගැන්වීමට සකසයි. මේ ආකාරයෙන්, මේස පසුබිම් ලෙස අර්ධ විනිවිද පෙනෙන වර්ණ භාවිතා කළහොත් අපි අමාරුවේ වැටෙන්නේ නැත.
  • box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ඉන්පසුව අපි මේස කොටු මත ඉන්සෙට් පෙට්ටි සෙවනැල්ලක් එක් කරන්නෙමු background-color. අපි විශාල පැතිරීමක් භාවිතා කරන අතර නොපැහැදිලි නොවන නිසා, වර්ණය ඒකාකාරී වනු ඇත. පෙරනිමියෙන් සකසා නොමැති බැවින් --bs-table-accent-bg, අපට පෙරනිමි කොටු සෙවනැල්ලක් නොමැත.
  • .table-striped, .table-striped-columns, .table-hoverහෝ .table-activeපන්ති එකතු කළ විට --bs-table-accent-bg, පසුබිම වර්ණවත් කිරීම සඳහා අර්ධ විනිවිද පෙනෙන වර්ණයකට සකසා ඇත.
  • සෑම වගු ප්‍රභේදයක් සඳහාම, අපි එම --bs-table-accent-bgවර්ණය මත පදනම්ව ඉහළම වෙනස සහිත වර්ණයක් ජනනය කරමු. උදාහරණයක් ලෙස, සඳහා උච්චාරණ වර්ණය .table-primaryඅඳුරු වන අතර .table-darkසැහැල්ලු උච්චාරණ වර්ණයක් ඇත.
  • පෙළ සහ මායිම් වර්ණ එකම ආකාරයෙන් ජනනය වන අතර, ඒවායේ වර්ණ පෙරනිමියෙන් උරුම වේ.

තිරය ​​පිටුපස එය මෙසේ පෙනේ:

@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-borderedමේසයේ සහ සෛලවල සියලුම පැතිවල මායිම් සඳහා එකතු කරන්න .

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-bordered">
  ...
</table>

වර්ණ වෙනස් කිරීමට මායිම් වර්ණ උපයෝගිතා එකතු කළ හැක:

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-bordered border-primary">
  ...
</table>

මායිම් නොමැති වගු

.table-borderlessමායිම් නොමැති මේසයක් සඳහා එකතු කරන්න .

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-borderless">
  ...
</table>
# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-dark table-borderless">
  ...
</table>

කුඩා මේස

සියලුම සෛල අඩකින් කැපීමෙන් වඩාත් සංයුක්ත .table-smකිරීමට එක් කරන්න ..tablepadding

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-sm">
  ...
</table>
# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-dark table-sm">
  ...
</table>

මේස කණ්ඩායම් බෙදුම්කරුවන්

මේස කණ්ඩායම් අතර තද ඝන මායිමක් එක් කරන්න— <thead>, <tbody>, සහ <tfoot>—with .table-group-divider. border-top-color(අපි දැනට උපයෝගිතා පන්තියක් ලබා නොදෙන) වෙනස් කිරීමෙන් වර්ණය අභිරුචිකරණය කරන්න .

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
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>

සිරස් පෙළගැස්ම

හි වගු සෛල <thead>සෑම විටම සිරස් අතට පහළට පෙළගස්වා ඇත. වගු සෛල <tbody>ඔවුන්ගේ පෙළගැස්ම උරුම කර ගන්නා <table>අතර පෙරනිමියෙන් ඉහළට පෙළගස්වනු ලැබේ. අවශ්‍ය තැන නැවත පෙළගැස්වීමට සිරස් පෙළගස්වන පන්ති භාවිතා කරන්න .

ශීර්ෂය 1 ශීර්ෂය 2 ශීර්ෂය 3 ශීර්ෂය 4
මෙම සෛලය vertical-align: middle;මේසයෙන් උරුම වේ මෙම සෛලය vertical-align: middle;මේසයෙන් උරුම වේ මෙම සෛලය vertical-align: middle;මේසයෙන් උරුම වේ මෙය පෙර සෛලවල සිරස් පෙළගැස්ම ක්‍රියා කරන ආකාරය නිරූපණය කිරීමට සිරස් ඉඩ ප්‍රමාණයක් ගැනීමට අදහස් කරන තැන් දරණ පෙළකි.
මෙම කොටුව vertical-align: bottom;වගු පේළියෙන් උරුම වේ මෙම කොටුව vertical-align: bottom;වගු පේළියෙන් උරුම වේ මෙම කොටුව vertical-align: bottom;වගු පේළියෙන් උරුම වේ මෙය පෙර සෛලවල සිරස් පෙළගැස්ම ක්‍රියා කරන ආකාරය නිරූපණය කිරීමට සිරස් ඉඩ ප්‍රමාණයක් ගැනීමට අදහස් කරන තැන් දරණ පෙළකි.
මෙම සෛලය vertical-align: middle;මේසයෙන් උරුම වේ මෙම සෛලය vertical-align: middle;මේසයෙන් උරුම වේ මෙම කොටුව ඉහළට පෙළගස්වා ඇත. මෙය පෙර සෛලවල සිරස් පෙළගැස්ම ක්‍රියා කරන ආකාරය නිරූපණය කිරීමට සිරස් ඉඩ ප්‍රමාණයක් ගැනීමට අදහස් කරන තැන් දරණ පෙළකි.
<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>

කූඩු කිරීම

මායිම් විලාසයන්, ක්‍රියාකාරී මෝස්තර සහ මේස ප්‍රභේද කැදැලි වගු මගින් උරුම නොවේ.

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
ශීර්ෂකය ශීර්ෂකය ශීර්ෂකය
පළමුවන අවසන්
බී පළමුවන අවසන්
සී පළමුවන අවසන්
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

කූඩු වැඩ කරන ආකාරය

කැදැලි වගු වෙත කිසියම් මෝස්තරයක් කාන්දු වීම වැළැක්වීමට , අපි >අපගේ CSS හි ළමා සංයෝජන ( ) තේරීම්කාරකය භාවිතා කරමු. අපට , , සහ , හි ඇති සියලුම tds සහ ths ඉලක්ක කිරීමට අවශ්‍ය බැවින් , එය නොමැතිව අපගේ තේරීම්කරු ඉතා දිගු ලෙස පෙනෙනු ඇත. ඒ අනුව, අපි ගේ සියලුම s සහ s ඉලක්ක කිරීමට තරමක් අමුතු පෙනුමක් ඇති තේරීම්කාරකය භාවිතා කරමු , නමුත් විභව කැදැලි වගු කිසිවක් නැත.theadtbodytfoot.table > :not(caption) > * > *tdth.table

<tr>ඔබ මේසයක සෘජු දරුවන් ලෙස s එකතු කළහොත් , ඒවා පෙරනිමියෙන් <tr>ඔතා ඇති බව සලකන්න <tbody>, එමඟින් අපගේ තේරීම්කරුවන් අදහස් කරන පරිදි ක්‍රියා කරයි.

ව්‍යුහ විද්‍යාව

මේස හිස

වගු සහ අඳුරු වගු වලට සමානව, විකරණකාරක පන්ති භාවිතා කරන්න හෝ .table-lights ලා හෝ තද අළු පැහැයක් ඇති කිරීමට..table-dark<thead>

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

මේස පාදය

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
පාදකය පාදකය පාදකය පාදකය
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

සිරස්තල

මේසයක් සඳහා <caption>ශීර්ෂයක් ලෙස ක්‍රියා කරයි. එය තිර කියවනය සහිත පරිශීලකයින්ට වගුවක් සොයා ගැනීමට සහ එය කුමක්ද යන්න තේරුම් ගැනීමට සහ එය කියවීමට අවශ්‍ය දැයි තීරණය කිරීමට උදවු කරයි.

පරිශීලක ලැයිස්තුව
# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<caption>ඔබට මේසයේ මුදුනේ ද තැබිය හැකිය .caption-top.

පරිශීලක ලැයිස්තුව
# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
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>

ප්රතිචාරාත්මක වගු

ප්‍රතිචාරාත්මක වගු මඟින් වගු පහසුවෙන් තිරස් අතට අනුචලනය කිරීමට ඉඩ සලසයි. .tableසමඟ එතීමෙන් ඕනෑම වගුවක් සියලුම දර්ශන තොට හරහා ප්‍රතිචාරාත්මක කරන්න .table-responsive. නැතහොත්, භාවිතා කිරීමෙන් ප්‍රතිචාරාත්මක වගුවක් ඇති උපරිම කඩඉමක් තෝරන්න .table-responsive{-sm|-md|-lg|-xl|-xxl}.

සිරස් කැපීම / කප්පාදු කිරීම

ප්‍රතිචාරාත්මක වගු භාවිතා කරයි overflow-y: hidden, එය මේසයේ පහළ හෝ ඉහළ දාරවලින් ඔබ්බට යන ඕනෑම අන්තර්ගතයක් ක්ලිප් කරයි. විශේෂයෙන්, මෙය පතන මෙනු සහ අනෙකුත් තෙවන පාර්ශවීය විජට් කපා හැරිය හැක.

සෑම විටම ප්රතිචාර දක්වයි

සෑම කඩඉමක් හරහාම, .table-responsiveතිරස් අනුචලන වගු සඳහා භාවිතා කරන්න.

# ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය
1 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
2 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
3 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

බිඳුම් ලක්ෂ්‍යය විශේෂිත

.table-responsive{-sm|-md|-lg|-xl|-xxl}විශේෂිත කඩඉමක් දක්වා ප්‍රතිචාරාත්මක වගු සෑදීමට අවශ්‍ය පරිදි භාවිතා කරන්න . එම කඩඉම් ලක්ෂ්‍යයෙන් සහ ඉහළට, මේසය සාමාන්‍ය ලෙස හැසිරෙන අතර තිරස් අතට අනුචලනය නොවේ.

මෙම වගු ඒවායේ ප්‍රතිචාරාත්මක විලාසයන් නිශ්චිත දර්ශන තොටුපල පළලට අදාළ වන තෙක් කැඩී ඇති බවක් පෙනෙන්නට තිබේ.

# ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය
1 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
2 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
3 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
# ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය
1 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
2 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
3 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
# ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය
1 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
2 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
3 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
# ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය
1 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
2 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
3 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
# ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය
1 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
2 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
3 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
# ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය ශීර්ෂය
1 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
2 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
3 සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය සෛලය
<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>

සාස්

විචල්යයන්

$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%;

ලූප්

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

අභිරුචිකරණය

  • වගු ප්‍රභේදවල ප්‍රතිවිරුද්ධතාව තීරණය කිරීමට සාධක විචල්‍ය ( $table-striped-bg-factor, $table-active-bg-factor& ) භාවිතා වේ.$table-hover-bg-factor
  • ආලෝකය සහ අඳුරු වගු ප්‍රභේද හැරුණු විට, තේමා වර්ණ $table-bg-scaleවිචල්‍යය මගින් සැහැල්ලු වේ.