Tham khảo bảng CSS Bootstrap
<bảng> Lớp học
Sử dụng các lớp dưới đây để tạo kiểu cho bất kỳ bảng nào:
| 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 | ||
Các lớp <tr>, <th> và <td>
Sử dụng các lớp bên dưới để tô màu các hàng hoặc ô trong bảng:
| 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 |
Bảng đáp ứng
Lớp .table-responsive tạo ra một bảng đáp ứng. Sau đó, bảng sẽ cuộn theo chiều ngang trên các thiết bị nhỏ (dưới 768px). Khi xem trên bất kỳ thứ gì có chiều rộng lớn hơn 768px, không có sự khác biệt:
Thí dụ
<div class="table-responsive">
<table class="table">
...
</table>
</div>