Bootstrap CSS ตารางอ้างอิง
<ตาราง> ชั้นเรียน
ใช้คลาสด้านล่างเพื่อจัดรูปแบบตาราง:
| Class | Description | Example |
|---|---|---|
| .table | Adds basic styling (light padding and only horizontal dividers) to any <table> | |
| .table-striped | Adds zebra-striping to any table row within <tbody> (not available in IE8) | |
| .table-bordered | Adds border on all sides of the table and cells | |
| .table-hover | Enables a hover state on table rows within a <tbody> | |
| .table-condensed | Makes table more compact by cutting cell padding in half | |
| Combining all the table classes | ||
<tr>, <th> และ <td> คลาส
ใช้คลาสด้านล่างเพื่อระบายสีแถวหรือเซลล์ของตาราง:
| Class | Description | Example |
|---|---|---|
| .active | Applies the hover color (light-grey) to a particular row or cell | |
| .success | Indicates a successful or positive action | |
| .info | Indicates a neutral informative change or action | |
| .warning | Indicates a warning that might need attention | |
| .danger | Indicates a dangerous or potentially negative action |
ตารางตอบสนอง
คลาส .table-responsive สร้างตารางที่ตอบสนอง จากนั้นตารางจะเลื่อนในแนวนอนบนอุปกรณ์ขนาดเล็ก (ต่ำกว่า 768px) เมื่อดูบนสิ่งที่กว้างกว่า 768px จะไม่มีความแตกต่าง:
ตัวอย่าง
<div class="table-responsive">
<table class="table">
...
</table>
</div>