Bootstrap 4 ตาราง

Bootstrap 4 ตารางพื้นฐาน

ตาราง Bootstrap 4 พื้นฐานมีช่องว่างภายในและตัวแบ่งแนวนอน

ชั้น.tableเรียนเพิ่มสไตล์พื้นฐานให้กับตาราง:

ตัวอย่าง

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

ลายแถว

ชั้น.table-stripedเรียนเพิ่มลายทางม้าลายลงในตาราง:

ตัวอย่าง

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

โต๊ะมีขอบ

ชั้น.table-borderedเรียนเพิ่มเส้นขอบทุกด้านของตารางและเซลล์:

ตัวอย่าง

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

โฮเวอร์แถว

ชั้น.table-hoverเรียนเพิ่มเอฟเฟกต์โฮเวอร์ (สีพื้นหลังสีเทา) บนแถวของตาราง:

ตัวอย่าง

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

โต๊ะดำ/ดำ

ชั้น.table-darkเรียนเพิ่มพื้นหลังสีดำลงในตาราง:

ตัวอย่าง

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

โต๊ะลายเข้ม

รวม.table-darkและ.table-stripedสร้างตารางลายทางสีเข้ม:

ตัวอย่าง

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

โต๊ะมืดโฮเวอร์ได้

ชั้น.table-hoverเรียนเพิ่มเอฟเฟกต์โฮเวอร์ (สีพื้นหลังสีเทา) บนแถวของตาราง:

ตัวอย่าง

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

โต๊ะไร้ขอบ

คลาส.table-borderlessลบเส้นขอบออกจากตาราง:

ตัวอย่าง

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

ชั้นเรียนตามบริบท

สามารถใช้คลาสตามบริบทเพื่อระบายสีทั้งตาราง ( <table>) แถวของตาราง ( <tr>) หรือเซลล์ตาราง ( <td>)

ตัวอย่าง

Firstname	Lastname	Email
Default	Defaultson	[email protected]
Primary	Joe	[email protected]
Success	Doe	[email protected]
Danger	Moe	[email protected]
Info	Dooley	[email protected]
Warning	Refs	[email protected]
Active	Activeson	[email protected]
Secondary	Secondson	[email protected]
Light	Angie	[email protected]
Dark	Bo	[email protected]

คลาสตามบริบทที่สามารถใช้ได้คือ:

ระดับ	คำอธิบาย
`.table-primary`	สีน้ำเงิน: บ่งบอกถึงการกระทำที่สำคัญ
`.table-success`	สีเขียว: บ่งบอกถึงความสำเร็จหรือการกระทำในเชิงบวก
`.table-danger`	สีแดง: หมายถึงการกระทำที่เป็นอันตรายหรืออาจเป็นลบ
`.table-info`	สีฟ้าอ่อน: บ่งชี้การเปลี่ยนแปลงหรือการกระทำที่เป็นกลาง
`.table-warning`	สีส้ม: ระบุคำเตือนที่อาจต้องให้ความสนใจ
`.table-active`	สีเทา: นำสีโฮเวอร์ไปใช้กับแถวตารางหรือเซลล์ตาราง
`.table-secondary`	สีเทา: บ่งบอกถึงการกระทำที่สำคัญน้อยกว่าเล็กน้อย
`.table-light`	ตารางสีเทาอ่อนหรือพื้นหลังแถวตาราง
`.table-dark`	ตารางสีเทาเข้มหรือพื้นหลังแถวตาราง

สีหัวโต๊ะ

ชั้น.thead-darkเรียนเพิ่มพื้นหลังสีดำให้กับส่วนหัวของตาราง และ.thead-lightชั้นเรียนจะเพิ่มพื้นหลังสีเทาให้กับส่วนหัวของตาราง:

ตัวอย่าง

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

โต๊ะเล็ก

ชั้น.table-smเรียนทำให้โต๊ะเล็กลงโดยการตัดเซลล์แบ่งครึ่ง:

ตัวอย่าง

Firstname	Lastname	Email
John	Doe	[email protected]
Mary	Moe	[email protected]
July	Dooley	[email protected]

ตารางตอบสนอง

คลาส.table-responsiveจะเพิ่มแถบเลื่อนไปที่ตารางเมื่อจำเป็น (เมื่อมีขนาดใหญ่เกินไปในแนวนอน):

ตัวอย่าง

คุณยังสามารถตัดสินใจได้ว่าเมื่อใดที่ตารางควรได้รับแถบเลื่อน ขึ้นอยู่กับความกว้างของหน้าจอ:

ระดับ	ความกว้างของหน้าจอ
`.table-responsive-sm`	< 576px
`.table-responsive-md`	< 768px
`.table-responsive-lg`	< 992px
`.table-responsive-xl`	< 1200px

ตัวอย่าง

❮ ก่อนหน้า ถัดไป ❯

Bootstrap 4 บทช่วยสอน

Bootstrap 4 Grid

Bootstrap 4 อื่นๆ

Bootstrap 4 อ้างอิง

Bootstrap 4 ตาราง