Source

តុ

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

ឧទាហរណ៍

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

ដោយប្រើការសម្គាល់តារាងជាមូលដ្ឋានបំផុត នេះជារបៀបដែល .tableតារាងដែលមានមូលដ្ឋានលើ Bootstrap ។ រចនាប័ទ្មតារាងទាំងអស់ត្រូវបានទទួលមរតកនៅក្នុង Bootstrap 4 មានន័យថាតារាងដែលដាក់ជាប់គ្នានឹងត្រូវបានកំណត់រចនាប័ទ្មដូចគ្នាទៅនឹងមេ។

# ទីមួយ ចុងក្រោយ ដៃ
១ ម៉ាក អូតូ @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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

អ្នកក៏អាចដាក់បញ្ច្រាសពណ៌ — ជាមួយអត្ថបទស្រាលនៅលើផ្ទៃខាងក្រោយងងឹត — ជាមួយ .table-dark.

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

ជម្រើសក្បាលតុ

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

# ទីមួយ ចុងក្រោយ ដៃ
១ ម៉ាក អូតូ @mdo
២ យ៉ាកុប ថនតុន @ខ្លាញ់
៣ ឡារី បក្សី @twitter
# ទីមួយ ចុងក្រោយ ដៃ
១ ម៉ាក អូតូ @mdo
២ យ៉ាកុប ថនតុន @ខ្លាញ់
៣ ឡារី បក្សី @twitter 
<table class="table">
  <thead class="thead-dark">
    <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 class="table">
  <thead class="thead-light">
    <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-stripedដើម្បីបន្ថែមការឆ្នូតសេះបង្កង់ទៅជួរតារាងណាមួយនៅក្នុង <tbody>.

# ទីមួយ ចុងក្រោយ ដៃ
១ ម៉ាក អូតូ @mdo
២ យ៉ាកុប ថនតុន @ខ្លាញ់
៣ ឡារី បក្សី @twitter 
<table class="table table-striped">
  <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>
# ទីមួយ ចុងក្រោយ ដៃ
១ ម៉ាក អូតូ @mdo
២ យ៉ាកុប ថនតុន @ខ្លាញ់
៣ ឡារី បក្សី @twitter 
<table class="table table-striped table-dark">
  <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-borderedសម្រាប់ស៊ុមនៅគ្រប់ជ្រុងទាំងអស់នៃតារាង និងក្រឡា។

# ទីមួយ ចុងក្រោយ ដៃ
១ ម៉ាក អូតូ @mdo
២ យ៉ាកុប ថនតុន @ខ្លាញ់
៣ ឡារី បក្សី @twitter 
<table class="table table-bordered">
  <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>
# ទីមួយ ចុងក្រោយ ដៃ
១ ម៉ាក អូតូ @mdo
២ យ៉ាកុប ថនតុន @ខ្លាញ់
៣ ឡារី បក្សី @twitter 
<table class="table table-bordered table-dark">
  <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>

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

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

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

.table-borderlessក៏អាចប្រើនៅលើតុងងឹតផងដែរ។

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

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

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

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

តុតូច

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

# ទីមួយ ចុងក្រោយ ដៃ
១ ម៉ាក អូតូ @mdo
២ យ៉ាកុប ថនតុន @ខ្លាញ់
៣ ឡារី បក្សី @twitter 
<table class="table table-sm">
  <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>
# ទីមួយ ចុងក្រោយ ដៃ
១ ម៉ាក អូតូ @mdo
២ យ៉ាកុប ថនតុន @ខ្លាញ់
៣ ឡារី បក្សី @twitter 
<table class="table table-sm table-dark">
  <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 rows -->
<tr class="table-active">...</tr>

<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-active">...</td>

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

វ៉ារ្យ៉ង់ផ្ទៃខាងក្រោយតារាងធម្មតាមិនមានជាមួយតារាងងងឹតទេ ទោះជាយ៉ាងណាក៏ដោយ អ្នកអាចប្រើឧបករណ៍ប្រើប្រាស់ អត្ថបទ ឬផ្ទៃខាងក្រោយ ដើម្បីសម្រេចបានរចនាប័ទ្មស្រដៀងគ្នា។

# ក្បាល ក្បាល
១ ក្រឡា ក្រឡា
២ ក្រឡា ក្រឡា
៣ ក្រឡា ក្រឡា
៤ ក្រឡា ក្រឡា
៥ ក្រឡា ក្រឡា
៦ ក្រឡា ក្រឡា
៧ ក្រឡា ក្រឡា
៨ ក្រឡា ក្រឡា
៩ ក្រឡា ក្រឡា 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
ការ​បង្ហាញ​អត្ថន័យ​ទៅ​កាន់​បច្ចេកវិទ្យា​ជំនួយ

ការប្រើពណ៌ដើម្បីបន្ថែមអត្ថន័យផ្តល់នូវការចង្អុលបង្ហាញដែលមើលឃើញតែប៉ុណ្ណោះ ដែលនឹងមិនត្រូវបានបញ្ជូនទៅកាន់អ្នកប្រើប្រាស់នៃបច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ជាដើម។ ត្រូវប្រាកដថាព័ត៌មានដែលតំណាងដោយពណ៌គឺច្បាស់ពីខ្លឹមសារខ្លួនវា (ឧ. អត្ថបទដែលមើលឃើញ) ឬត្រូវបានរួមបញ្ចូលតាមរយៈមធ្យោបាយជំនួស ដូចជាអត្ថបទបន្ថែមដែលលាក់ជាមួយ .sr-onlyថ្នាក់។

បង្កើតតារាងឆ្លើយតបដោយរុំណាមួយ .tableជាមួយ .table-responsive{-sm|-md|-lg|-xl}ធ្វើឱ្យតារាងរមូរផ្ដេកនៅចំនុច max-widthបំបែកនីមួយៗរហូតដល់ (ប៉ុន្តែមិនរាប់បញ្ចូល) 576px, 768px, 992px, និង 1120px រៀងគ្នា។

សូមចំណាំថា ចាប់តាំងពីកម្មវិធីរុករកតាមអ៊ីនធឺណិតបច្ចុប្បន្នមិនគាំទ្រ សំណួរបរិបទជួរ នោះយើងធ្វើការជុំវិញដែនកំណត់ min-និង max-បុព្វបទ និងច្រកទិដ្ឋភាពដែលមានទទឹងប្រភាគ (ដែលអាចកើតឡើងក្រោមលក្ខខណ្ឌមួយចំនួននៅលើឧបករណ៍ដែលមានឌីភីភីខ្ពស់ ជាឧទាហរណ៍) ដោយប្រើតម្លៃដែលមានភាពជាក់លាក់ខ្ពស់សម្រាប់ការប្រៀបធៀបទាំងនេះ។ .

ចំណងជើង

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

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

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

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

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

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

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

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

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

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

# ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល ក្បាល
១ ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
២ ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា
៣ ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា ក្រឡា 
<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>