រំលងទៅមាតិកាសំខាន់ រំលងទៅការរុករកឯកសារ
in English

តុ

ឯកសារ និងឧទាហរណ៍សម្រាប់ការជ្រើសរើសរចនាប័ទ្មនៃតារាង (ដែលបានផ្តល់ឱ្យការប្រើប្រាស់ជាទូទៅរបស់ពួកគេនៅក្នុងកម្មវិធីជំនួយ JavaScript) ជាមួយ Bootstrap ។

ទិដ្ឋភាពទូទៅ

ដោយសារតែការប្រើប្រាស់យ៉ាងទូលំទូលាយនៃ <table>ធាតុនៅលើធាតុក្រាហ្វិកភាគីទីបីដូចជា ប្រតិទិន និងកម្មវិធីជ្រើសរើសកាលបរិច្ឆេទ តារាងរបស់ Bootstrap ត្រូវបាន ជ្រើសរើសចូល ។ បន្ថែមថ្នាក់មូលដ្ឋាន .tableទៅណាមួយ <table>បន្ទាប់មកពង្រីកជាមួយនឹងថ្នាក់កែប្រែជម្រើស ឬរចនាប័ទ្មផ្ទាល់ខ្លួនរបស់យើង។ រចនាប័ទ្មតារាងទាំងអស់មិនត្រូវបានទទួលមរតកនៅក្នុង Bootstrap ទេ មានន័យថាតារាងដែលដាក់នៅជាប់គ្នាអាចត្រូវបានកំណត់រចនាប័ទ្មដោយឯករាជ្យពីមេ។

ដោយប្រើការសម្គាល់តារាងជាមូលដ្ឋានបំផុត នេះជារបៀបដែល .tableតារាងដែលមានមូលដ្ឋានលើ Bootstrap ។

# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @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>

វ៉ារ្យ៉ង់

ប្រើថ្នាក់បរិបទទៅតារាងពណ៌ ជួរតារាង ឬក្រឡានីមួយៗ។

ថ្នាក់ ក្បាល ក្បាល
លំនាំដើម ក្រឡា ក្រឡា
បឋមសិក្សា ក្រឡា ក្រឡា
អនុវិទ្យាល័យ ក្រឡា ក្រឡា
ជោគជ័យ ក្រឡា ក្រឡា
គ្រោះថ្នាក់ ក្រឡា ក្រឡា
ការព្រមាន ក្រឡា ក្រឡា
ព័ត៌មាន ក្រឡា ក្រឡា
ពន្លឺ ក្រឡា ក្រឡា
ងងឹត ក្រឡា ក្រឡា
<!-- 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>.

# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<table class="table table-striped">
  ...
</table>

ថ្នាក់ទាំងនេះក៏អាចត្រូវបានបន្ថែមទៅវ៉ារ្យ៉ង់តារាងផងដែរ៖

# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<table class="table table-dark table-striped">
  ...
</table>
# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<table class="table table-success table-striped">
  ...
</table>

ជួរដែលអាចដាក់បាន

បន្ថែម .table-hoverដើម្បីបើកស្ថានភាពដាក់នៅលើជួរតារាងក្នុង <tbody>.

# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<table class="table table-hover">
  ...
</table>
# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<table class="table table-dark table-hover">
  ...
</table>

ជួរ​ដែល​អាច​ដាក់​បាន​ទាំង​នេះ​ក៏​អាច​ត្រូវ​បាន​រួម​បញ្ចូល​ជាមួយ​ជម្រើស​ឆ្នូត​ដែរ៖

# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<table class="table table-striped table-hover">
  ...
</table>

តារាងសកម្ម

បន្លិចជួរតារាង ឬក្រឡាដោយបន្ថែម .table-activeថ្នាក់។

# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @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>
# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @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>

តើវ៉ារ្យ៉ង់និងតារាងសង្កត់សំឡេងដំណើរការយ៉ាងដូចម្តេច?

សម្រាប់តារាងសង្កត់សំឡេង ( ជួរឆ្នូត ជួរដេក ដែលអាចដាក់ បាន និង តារាងសកម្ម ) យើងបានប្រើបច្ចេកទេសមួយចំនួនដើម្បីធ្វើឱ្យផលប៉ះពាល់ទាំងនេះដំណើរការសម្រាប់ វ៉ារ្យ៉ង់តារាង ទាំងអស់របស់យើង ៖

  • យើងចាប់ផ្តើមដោយកំណត់ផ្ទៃខាងក្រោយនៃក្រឡាតារាងជាមួយនឹង --bs-table-bgលក្ខណៈសម្បត្តិផ្ទាល់ខ្លួន។ វ៉ារ្យ៉ង់តារាងទាំងអស់បន្ទាប់មកកំណត់លក្ខណសម្បត្តិផ្ទាល់ខ្លួននោះដើម្បីធ្វើពណ៌ក្រឡាតារាង។ វិធីនេះ យើងនឹងមិនមានបញ្ហាទេ ប្រសិនបើពណ៌ពាក់កណ្តាលថ្លាត្រូវបានប្រើជាផ្ទៃខាងក្រោយតារាង។
  • បន្ទាប់​មក​យើង​បន្ថែម​ស្រមោល​ប្រអប់​បញ្ចូល​មួយ​នៅ​លើ​ក្រឡា​តារាង​ជាមួយ box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);​នឹង​ស្រទាប់​នៅ​ពីលើ​ដែល​បាន​បញ្ជាក់ background-color។ ដោយសារ​យើង​ប្រើ​ការ​រាលដាល​យ៉ាង​ធំ ហើយ​មិន​មាន​ភាព​ព្រិលៗ ពណ៌​នឹង​ជា​ពណ៌​ឯកតា។ ដោយសារ --bs-table-accent-bgមិនត្រូវបានកំណត់តាមលំនាំដើម យើងមិនមានស្រមោលប្រអប់លំនាំដើមទេ។
  • នៅពេលដែលទាំង .table-striped.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));

    --#{$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));
  }
}

ព្រំដែនតារាង

តារាងជាប់ព្រំដែន

បន្ថែម .table-borderedសម្រាប់ស៊ុមនៅគ្រប់ជ្រុងទាំងអស់នៃតារាង និងក្រឡា។

# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<table class="table table-bordered">
  ...
</table>

ឧបករណ៍ប្រើប្រាស់ពណ៌ព្រំដែន អាចត្រូវបានបន្ថែមដើម្បីផ្លាស់ប្តូរពណ៌៖

# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<table class="table table-bordered border-primary">
  ...
</table>

តារាងគ្មានព្រំដែន

បន្ថែម .table-borderlessសម្រាប់តារាងដោយគ្មានព្រំដែន។

# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<table class="table table-borderless">
  ...
</table>
# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<table class="table table-dark table-borderless">
  ...
</table>

តុតូច

បន្ថែម .table-smដើម្បីធ្វើឱ្យ .tableបង្រួមបន្ថែមទៀតដោយកាត់ក្រឡាទាំងអស់ paddingជាពាក់កណ្តាល។

# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<table class="table table-sm">
  ...
</table>
# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<table class="table table-dark table-sm">
  ...
</table>

ការតម្រឹមបញ្ឈរ

ក្រឡាតារាង <thead>តែងតែតម្រឹមបញ្ឈរទៅបាត។ ក្រឡាតារាងនៅក្នុង <tbody>មរតកការតម្រឹមរបស់ពួកគេពី <table>និងត្រូវបានតម្រឹមទៅកំពូលតាមលំនាំដើម។ ប្រើ ថ្នាក់ តម្រឹមបញ្ឈរ ដើម្បីតម្រឹមឡើងវិញតាមតម្រូវការ។

ចំណងជើង 1 ក្បាល 2 ចំណងជើង ៣ ក្បាល ៤
ក្រឡានេះទទួលមរតក 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>

សំបុក

រចនាប័ទ្មព្រំដែន រចនាប័ទ្មសកម្ម និងវ៉ារ្យ៉ង់តារាងមិនត្រូវបានទទួលមរតកដោយតារាងដែលដាក់ជាប់គ្នាទេ។

# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
បឋមកថា បឋមកថា បឋមកថា
ទីមួយ ចុងក្រោយ
ទីមួយ ចុងក្រោយ
ទីមួយ ចុងក្រោយ
ឡារី បក្សី @twitter
<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 ទាំងអស់នៅក្នុង thead, tbodyនិង tfoot, selector របស់យើងនឹងមើលទៅយូរណាស់ដោយគ្មានវា។ ដូច្នេះហើយ យើងប្រើ .table > :not(caption) > * > *ឧបករណ៍ជ្រើសរើសដែលមើលទៅចម្លែក ដើម្បីកំណត់គោលដៅ tds និង ths .tableទាំងអស់ ប៉ុន្តែមិនមានតារាងដែលមានសក្តានុពលណាមួយឡើយ។

ចំណាំថាប្រសិនបើអ្នកបន្ថែម <tr>s ជាកូនផ្ទាល់នៃតារាង នោះ <tr>នឹងត្រូវបានរុំ <tbody>ដោយលំនាំដើម ដូច្នេះធ្វើឱ្យអ្នកជ្រើសរើសរបស់យើងដំណើរការដូចបំណង។

កាយវិភាគសាស្ត្រ

ក្បាលតុ

ស្រដៀងទៅនឹងតារាង និងតារាងងងឹត ប្រើថ្នាក់កែប្រែ .table-light.table-darkដើម្បីធ្វើឱ្យ <thead>s មើលទៅស្រាល ឬពណ៌ប្រផេះងងឹត។

# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

ជើងតុ

# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
បាតកថា បាតកថា បាតកថា បាតកថា
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

ចំណងជើង

មុខងារ <caption>ដូចជាក្បាលសម្រាប់តុ។ វាជួយអ្នកប្រើប្រាស់ដែលមានកម្មវិធីអានអេក្រង់ដើម្បីស្វែងរកតារាង និងយល់ពីអ្វីដែលវានិយាយអំពី ហើយសម្រេចចិត្តថាតើពួកគេចង់អានវាដែរឬទេ។

បញ្ជីអ្នកប្រើប្រាស់
# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

អ្នកក៏អាចដាក់ <caption>នៅលើកំពូលតារាងជាមួយ .caption-top.

បញ្ជីអ្នកប្រើប្រាស់
# ទីមួយ ចុងក្រោយ ដៃ
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @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>

តារាងឆ្លើយតប

តារាងឆ្លើយតបអនុញ្ញាតឱ្យតារាងត្រូវបានរមូរផ្ដេកយ៉ាងងាយស្រួល។ ធ្វើឱ្យតារាងណាមួយឆ្លើយតបនៅគ្រប់ច្រកចូលមើលទាំងអស់ដោយរុំ .tableជាមួយ .table-responsive. ឬជ្រើសរើសចំណុចឈប់អតិបរមាដែលនឹងមានតារាងឆ្លើយតបដោយប្រើ .table-responsive{-sm|-md|-lg|-xl|-xxl}.

ការកាត់/កាត់បញ្ឈរ

តារាង​ដែល​មាន​ការ​ឆ្លើយ​តប​ប្រើ​ប្រាស់ overflow-y: hiddenដែល​បិទ​មាតិកា​ណា​មួយ​ដែល​ហួស​ពី​គែម​ខាង​ក្រោម ឬ​កំពូល​តារាង។ ជាពិសេស វាអាចបិទម៉ឺនុយទម្លាក់ចុះ និងធាតុក្រាហ្វិកភាគីទីបីផ្សេងទៀត។

ឆ្លើយតបជានិច្ច

ឆ្លងកាត់រាល់ចំណុចឈប់ ប្រើ .table-responsiveសម្រាប់តារាងរមូរផ្ដេក។

# ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ចំណុចបំបែកជាក់លាក់

ប្រើ .table-responsive{-sm|-md|-lg|-xl|-xxl}តាមតម្រូវការដើម្បីបង្កើតតារាងឆ្លើយតបរហូតដល់ចំណុចឈប់ជាក់លាក់មួយ។ ចាប់ពីចំណុចបំបែកនោះឡើង តារាងនឹងដំណើរការជាធម្មតា និងមិនរមូរផ្ដេកទេ។

តារាងទាំងនេះអាចហាក់ដូចជាខូចរហូតដល់រចនាប័ទ្មឆ្លើយតបរបស់ពួកគេអនុវត្តនៅទទឹងទិដ្ឋភាពជាក់លាក់។

# ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
# ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
# ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
# ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
# ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
# ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
<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:                 $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%;

រង្វិលជុំ

$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-levelអថេរ។