Bootstrap 5 Bảng

Bảng cơ bản

Bảng Bootstrap 5 cơ bản có một chút lề trong và dòng phân cách ngang.

.table Thêm樣式 cơ bản cho bảng:

Mô hình

Thử ngay

Dòng sọc

.table-striped Thêm sọc chéo vào bảng:

Mô hình

Thử ngay

Bảng có viền

.table-bordered Thêm viền cho tất cả các cạnh của bảng và ô:

Mô hình

Thử ngay

Dòng có hiệu ứng trôi nổi

.table-hover Thêm hiệu ứng trôi nổi (màu nền xám) cho dòng bảng:

Mô hình

Thử ngay

Bảng đen/đen

.table-dark Thêm màu nền đen cho bảng:

Mô hình

Thử ngay

bảng sọc đen

kết hợp .table-dark và .table-striped Để tạo bảng có sọc đen:

Mô hình

Thử ngay

Bảng đen có thể trôi nổi

.table-hover Thêm hiệu ứng trôi nổi (màu nền xám) cho dòng bảng:

Mô hình

Thử ngay

Bảng không viền

.table-borderless Xóa viền từ bảng:

Mô hình

Thử ngay

Các loại lớp ngữ cảnh

Các loại lớp ngữ cảnh có thể được sử dụng để áp dụng cho toàn bộ bảng (<table>) hoặc hàng bảng (<tr>) hoặc ô bảng (<td>) Đen.

Mô hình

Thử ngay

Các loại lớp ngữ cảnh có sẵn:

Loại Mô tả
.table-primary Xanh: biểu thị hành động quan trọng.
.table-success Xanh lá: biểu thị thành công hoặc hành động tích cực.
.table-danger Đỏ: biểu thị nguy hiểm hoặc hành động tiêu cực tiềm năng.
.table-info Xanh nhạt: biểu thị thông tin trung tính hoặc hành động.
.table-warning Đỏ cam: biểu thị cảnh báo cần chú ý.
.table-active Xám: áp dụng màu chụm vào hàng bảng hoặc ô bảng khi di chuột qua.
.table-secondary Xám: biểu thị hành động không quan trọng.
.table-light Bảng xám nhạt hoặc nền bảng hàng xám nhạt.
.table-dark Bảng xám đậm hoặc nền bảng hàng xám đậm.

Màu tiêu đề bảng

Bạn cũng có thể sử dụng bất kỳ loại lớp ngữ cảnh nào để chỉ thêm màu nền cho tiêu đề bảng:

Mô hình

Thử ngay

Bảng nhỏ

.table-sm Loại làm nhỏ bảng bằng cách giảm độ đầy của ô:

Mô hình

Thử ngay

Bảng phản hồi

.table-responsive Loại thêm thanh cuộn vào bảng khi cần thiết (khi nó quá lớn theo hướng ngang):

Mô hình

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

Thử ngay

Bạn có thể quyết định bảng khi nào nên có thanh cuộn, tùy thuộc vào bán kính màn hình:

Loại Bán kính màn hình
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Mô hình

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

Thử ngay