ទិដ្ឋភាពទូទៅ
ដោយសារតែការប្រើប្រាស់យ៉ាងទូលំទូលាយនៃ <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 របស់យើង។ ដោយសារយើងត្រូវកំណត់គោលដៅ td
s និង th
s ទាំងអស់នៅក្នុង thead
, tbody
និង tfoot
, selector របស់យើងនឹងមើលទៅយូរណាស់ដោយគ្មានវា។ ដូច្នេះហើយ យើងប្រើ .table > :not(caption) > * > *
ឧបករណ៍ជ្រើសរើសដែលមើលទៅចម្លែក ដើម្បីកំណត់គោលដៅ td
s និង th
s .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 : .5 rem ;
$table-cell-padding-x : .5 rem ;
$table-cell-padding-y-sm : .25 rem ;
$table-cell-padding-x-sm : .25 rem ;
$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
អថេរ។