Tables trong Bootstrap

Table là thành phần dùng để hiện dữ liệu dạng bảng, trong bootstrap có nhiều class giúp định dạng dễ dàng.

Basic Table

1 table basic có class là .table.  Padding nhỏ và border ngang:

<table class="table"> …</table>
bootstrap-basic-table

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_basic&stacked=h

Striped Rows

Table có class .table-striped class có thêm hiệu ứng các dòng kế nhau sẽ khác màu:

<table class="table table-striped "> …</table>
bootstrap-stripped-table

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_striped&stacked=h

Bordered Table

Một table .table-bordered sẽ có đường viền ở các cạnh của table và call:

<table class="table table-bordered"> …</table>
bootstrap-bordered-table

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_bordered&stacked=h

Hover Rows

Một .table-hover sẽ có hiệu ứng nền xám cho dòng bạn đưa chuột vào:

<table class="table table-hover"> …</table>
bootstrap-hover-table

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_hover&stacked=h

Dark Table

Table có class .table-dark sẽ có nền đen a black background to the table:

<table class="table table-dark"> …</table>
bootstrap-dark-table

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_inverse&stacked=h

Borderless Table

Một table có class .table-borderless sẽ không có đường viền

bootstrap-borderless-table

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_borderless&stacked=h

Contextual Classes

Các contextual class có thể dùng để ấn định màu cho toàn table hoặc các dòng (<tr>) hoặc các ô (<td>):

bootstrap-contextual-table

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_contextual&stacked=h

Các class contextual classes có thể dùng:

Class Description
.table-primary Blue: Indicates an important action
.table-success Green: Indicates a successful or positive action
.table-danger Red: Indicates a dangerous or potentially negative action
.table-info Light blue: Indicates a neutral informative change or action
.table-warning Orange: Indicates a warning that might need attention
.table-active Grey: Applies the hover color to the table row or table cell
.table-secondary Grey: Indicates a slightly less important action
.table-light Light grey table or table row background
.table-dark Dark grey table or table row background

Small table

Table có class .table-sm sẽ có padding nhỏ:

<table class="table table-sm"> …</table>
bootstrap-sm-table

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_sm&stacked=h

Responsive Tables

Class .table-responsive giúp tạo 1 responsive table. Khi xem trên các thiết bị >=768px thì bình thường, nhưng trên thiết bị nhỏ (<768px) thì table sẽ có thanh cuộn ngang.

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

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_responsive