Bootstrap 5 ตาราง

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

ตาราง Bootstrap 5 พื้นฐานมีระยะเวดี้ในด้านใน และเส้นแบ่งระดับน้ำตาล:

.table เพิ่มรูปแบบพื้นฐาน ให้กับตาราง:

ตัวอย่าง

ทดสอบด้วยตัวเอง

บรรทัดแบบสลับสลับ

.table-striped เพิ่มสีแบบสลับสลับให้กับตาราง:

ตัวอย่าง

ทดสอบด้วยตัวเอง

ตารางที่มีเส้นขอบ

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

ตัวอย่าง

ทดสอบด้วยตัวเอง

บรรทัดที่มีปรากฎการเคลื่อนไหว

.table-hover เพิ่มปรากฎการเคลื่อนไหว (สีพื้นหลังเทา) ให้กับบรรทัดตาราง:

ตัวอย่าง

ทดสอบด้วยตัวเอง

ตารางดำ/เข้ม

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

ตัวอย่าง

ทดสอบด้วยตัวเอง

ตารางแบบสีเข้มแถว

ผสม .table-dark และ .table-striped เพื่อสร้างตารางแบบสีเข้มแบบแบบแถว:

ตัวอย่าง

ทดสอบด้วยตัวเอง

ตารางที่สามารถเคลื่อนไหว

.table-hover เพิ่มปรากฎการเคลื่อนไหว (สีพื้นหลังเทา) ให้กับบรรทัดตาราง:

ตัวอย่าง

ทดสอบด้วยตัวเอง

ตารางที่ไม่มีเส้นขอบ

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

ตัวอย่าง

ทดสอบด้วยตัวเอง

คลาสสำหรับการใช้

คลาสสำหรับการใช้สำหรับตารางทั้งหมด (<table>) หรือบรรทัดตาราง (<tr>) หรือเซลล์ตาราง (<td>) สีขาว

ตัวอย่าง

ทดสอบด้วยตัวเอง

คลาสสำหรับการใช้:

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

สีหัวตาราง

คุณยังสามารถใช้คลาสได้ทั้งหมดเพื่อเพิ่มสีฝังเพียงตัวหัวตารางเท่านั้น:

ตัวอย่าง

ทดสอบด้วยตัวเอง

ตารางเล็ก

.table-sm คลาสทำให้ตารางเล็กลงโดยลดการกรอบเซลล์ครึ่ง:

ตัวอย่าง

ทดสอบด้วยตัวเอง

ตารางปฏิกิริยาตอบสนอง

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

ตัวอย่าง

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ทดสอบด้วยตัวเอง

คุณยังสามารถเลือกว่าตารางต้องได้รับสไตล์ตราบาร์โลหะเมื่อใด ซึ่งขึ้นอยู่กับความกว้างของหน้าจอ:

คลาส ความกว้างของหน้าจอ
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

ตัวอย่าง

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

ทดสอบด้วยตัวเอง