HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

ตาราง Bootstrap

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

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

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

ชั้น.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-condensedเรียนทำให้โต๊ะกะทัดรัดยิ่งขึ้นโดยตัดเซลล์บุรองไว้ครึ่งหนึ่ง:

ตัวอย่าง

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

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

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

ตัวอย่าง

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

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

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

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

ชั้น.table-responsiveเรียนสร้างตารางตอบสนอง จากนั้นตารางจะเลื่อนในแนวนอนบนอุปกรณ์ขนาดเล็ก (ต่ำกว่า 768px) เมื่อดูบนสิ่งที่กว้างกว่า 768px จะไม่มีความแตกต่าง:

ตัวอย่าง

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

ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

เพิ่มแอตทริบิวต์ class เพื่อจัดรูปแบบตารางเป็นตาราง Bootstrap พื้นฐาน

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

อ้างอิงตาราง Bootstrap ที่สมบูรณ์

สำหรับการอ้างอิงที่สมบูรณ์ของคลาสตารางทั้งหมด ไปที่ Bootstrap Tables Referenceทั้งหมดของเรา


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