តុ
ឯកសារ និងឧទាហរណ៍សម្រាប់ជ្រើសរើសរចនាប័ទ្មតារាង (ដែលបានផ្តល់ឱ្យការប្រើប្រាស់ជាទូទៅរបស់ពួកគេនៅក្នុងកម្មវិធីជំនួយ JavaScript) ជាមួយ Bootstrap ។
ដោយសារតែការប្រើប្រាស់តារាងយ៉ាងទូលំទូលាយនៅទូទាំងធាតុក្រាហ្វិកភាគីទីបីដូចជាប្រតិទិន និងកម្មវិធីជ្រើសរើសកាលបរិច្ឆេទ យើងបានរចនាតារាងរបស់យើងដើម្បី ជ្រើសរើសចូល ។ គ្រាន់តែបន្ថែមថ្នាក់មូលដ្ឋាន .table
ទៅណាមួយ <table>
បន្ទាប់មកពង្រីកជាមួយរចនាប័ទ្មផ្ទាល់ខ្លួន ឬថ្នាក់កែប្រែរួមបញ្ចូលផ្សេងៗរបស់យើង។
ដោយប្រើការសម្គាល់តារាងជាមូលដ្ឋានបំផុត នេះជារបៀបដែល .table
តារាងដែលមានមូលដ្ឋានលើ Bootstrap ។ រចនាប័ទ្មតារាងទាំងអស់ត្រូវបានទទួលមរតកនៅក្នុង Bootstrap 4 មានន័យថាតារាងដែលដាក់ជាប់គ្នានឹងត្រូវបានកំណត់រចនាប័ទ្មដូចគ្នាទៅនឹងមេ។
# | ទីមួយ | ចុងក្រោយ | ដៃ |
---|---|---|---|
១ | ម៉ាក | អូតូ | @mdo |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី | បក្សី |
<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 |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី | បក្សី |
<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 |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី | បក្សី |
# | ទីមួយ | ចុងក្រោយ | ដៃ |
---|---|---|---|
១ | ម៉ាក | អូតូ | @mdo |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី | បក្សី |
<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 |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី | បក្សី |
<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 |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី | បក្សី |
<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 |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី បក្សី |
<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 |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី បក្សី |
<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 |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី បក្សី |
<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 |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី បក្សី |
<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 |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី បក្សី |
<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 |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី បក្សី |
<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 |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី បក្សី |
<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 |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី បក្សី |
<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 |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី | បក្សី |
<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>