ภาพรวม
เนื่องจากมีการใช้<table>
องค์ประกอบอย่างแพร่หลายในวิดเจ็ตของบุคคลที่สาม เช่น ปฏิทินและเครื่องมือเลือกวันที่ ตารางของ Bootstrap จึงเป็นการเลือกเข้า ร่วม เพิ่มคลาสพื้นฐาน.table
ให้กับ any <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 >
คลาสเหล่านี้ยังสามารถเพิ่มลงในตัวแปรตารางได้:
#
อันดับแรก
ล่าสุด
รับมือ
1
เครื่องหมาย
อ็อตโต
@mdo
2
เจคอบ
ธอร์นตัน
@อ้วน
3
ลาร์รีเดอะเบิร์ด
@ทวิตเตอร์
สำเนา
< table class = "table table-dark table-striped" >
...
</ table >
#
อันดับแรก
ล่าสุด
รับมือ
1
เครื่องหมาย
อ็อตโต
@mdo
2
เจคอบ
ธอร์นตัน
@อ้วน
3
ลาร์รีเดอะเบิร์ด
@ทวิตเตอร์
สำเนา
< table class = "table table-success table-striped" >
...
</ table >
แถวที่เลื่อนได้
เพิ่ม.table-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 >
ตัวแปรและตารางเน้นเสียงทำงานอย่างไร
สำหรับตารางที่มีการเน้นเสียง ( striped rows , hoverable rows และactive tables ) เราใช้เทคนิคบางอย่างเพื่อทำให้เอฟเฟกต์เหล่านี้ใช้ได้กับตารางรูปแบบต่างๆ ของเรา :
เราเริ่มต้นด้วยการตั้งค่าพื้นหลังของเซลล์ตารางด้วย--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
เส้นขอบทุกด้านของตารางและเซลล์
#
อันดับแรก
ล่าสุด
รับมือ
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
เพื่อให้.table
กระชับยิ่งขึ้นโดยการตัดเซลล์ทั้งหมดpadding
ออกครึ่งหนึ่ง
#
อันดับแรก
ล่าสุด
รับมือ
1
เครื่องหมาย
อ็อตโต
@mdo
2
เจคอบ
ธอร์นตัน
@อ้วน
3
ลาร์รีเดอะเบิร์ด
@ทวิตเตอร์
สำเนา
< table class = "table table-sm" >
...
</ table >
#
อันดับแรก
ล่าสุด
รับมือ
1
เครื่องหมาย
อ็อตโต
@mdo
2
เจคอบ
ธอร์นตัน
@อ้วน
3
ลาร์รีเดอะเบิร์ด
@ทวิตเตอร์
สำเนา
< table class = "table table-dark table-sm" >
...
</ 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 ของเรา เนื่องจากเราต้องกำหนดเป้าหมายtd
s และth
s ทั้งหมดในthead
, tbody
, และtfoot
ตัวเลือกของเราจะดูค่อนข้างยาวหากไม่มีมัน ด้วยเหตุนี้ เราจึงใช้ตัวเลือกที่ดูค่อนข้างแปลก.table > :not(caption) > * > *
เพื่อกำหนดเป้าหมายtd
s และth
s ทั้งหมด .table
แต่ไม่มีตารางที่ซ้อนกันที่เป็นไปได้
โปรดทราบว่าหากคุณเพิ่ม<tr>
s เป็นลูกโดยตรงของตาราง รายการเหล่านั้น<tr>
จะถูกรวมไว้ใน a <tbody>
โดยค่าเริ่มต้น ซึ่งจะทำให้ตัวเลือกของเราทำงานได้ตามที่ตั้งใจไว้
กายวิภาคศาสตร์
หัวโต๊ะ
คล้ายกับตารางและตารางสีเข้ม ใช้คลาสตัวปรับแต่ง.table-light
หรือ.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
แลร์รี่
นก
@ทวิตเตอร์
สำเนา
< 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 : .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
ตัวแปรอีกด้วย