Tự học Bootstrap – Cơ bản – bài 04 – Định dạng bảng

Bảng biểu cơ bản trong Bootstrap

01 bảng biểu Bootstrap cơ bản có lùi dòng 01 chút và chỉ có đường chia cắt ngang.

Lớp .table thêm các định dạng cơ bản vào bảng:

Ví dụ:

---

Các dòng xen kẻ (chẵn-lẻ)

Lớp .table-striped thêm định dạng ngựa vằn(zebra-stripes) vào bảng biểu:

Ví dụ:

---

Kẻ đường viền bảng

Lớp .table-bordered thêm đường viền vào tất cả các hướng của ô bảng biểu:

---

Hiệu ứng Hover trên dòng

Lớp .table-hover thêm 01 hiệu ứng hover (màu nền xám) trên các dòng của bảng biểu:

---

Condensed Table

The .table-condensed class makes a table more compact by cutting cell padding in half:

Ví dụ:

---

Các lớp ngữ cảnh

Các lớp ngữ cảnh có thể được dùng để định dạng màu cho dòng bảng biểu (<tr>) hoặc ô cuẩ bảng biểu (<td>):

Tên các lớp ngữ cảnh:

Tên lớp	Mô tả
.active	Tạo hiệu ứng hover ccho dòng hay ô của bảng biểu
.success	Dùng để chỉ 01 hành động đúng hoặc đã hoàn thành
.info	Chỉ sự thay đổi a neutral informative change or action
.warning	Chỉ 01 cảnh báo cần chú ý
.danger	Chỉ 01 hành động sai hoặc nguy hiểm.

---

Các bảng biểu tương thích nhiều cỡ màn hình

Lớp .table-responsive tạo ra 01 bảng biểu tương thích. Bảng biểu sẽ tự động hiện thanh cuộn ngang trên thiết bị màn hình nhỏ (dưới 768px). Khi xem trên màn hình lớn hơn 768px chiều rộng, sẽ không có gì khác biệt.

Ghi chú: khi thu nhỏ sẽ xuất hiện thanh cuộn riêng cho bảng.

Ví dụ:

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