Bootstrap 4 Basic TableClass .table làm cho table của bạn mặc định như sau: Ví dụ<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Firstname | Lastname | Email |
---|
John | Doe | john@example.com | Mary | Moe | mary@example.com | July | Dooley | july@example.com
|
Striped RowsClass .table-striped add zebra-stripes cho bảng (bạn có thể thấy màu xám màu trắng zic zac từng dòng): Ví dụ
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Firstname | Lastname | Email |
---|
John | Doe | john@example.com | Mary | Moe | mary@example.com | July | Dooley | july@example.com |
Bordered TableClass .table-bordered add borders (dòng kẻ phân chia bảng): Ví dụ
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Firstname | Lastname | Email |
---|
John | Doe | john@example.com | Mary | Moe | mary@example.com | July | Dooley | july@example.com |
Hover RowsClass .table-hover add hiệu ứng hover cho các row trong bảng (Hiệu ứng hover là hiệu ứng khi di chuột vào thì row trong bảng sẽ chuyển màu xám):
Ví dụ
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Firstname | Lastname | Email |
---|
John | Doe | john@example.com | Mary | Moe | mary@example.com | July | Dooley | july@example.com |
Black/Dark TableClass .table-dark add background màu tối cho bảng: Ví dụ
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Firstname | Lastname | Email |
---|
John | Doe | john@example.com | Mary | Moe | mary@example.com | July | Dooley | july@example.com |
Dark Striped TableSự kết hợp giữa .table-dark và .table-striped sẽ tạo ra table vừa dark, vừa striped: Ví dụ
<table class="table table-dark table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Firstname | Lastname | Email |
---|
John | Doe | john@example.com | Mary | Moe | mary@example.com | July | Dooley | july@example.com |
Hoverable Dark TableTương tự class .table-hover add thêm hiệu ứng hover trên dark table: Ví dụ
<table class="table table-dark table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Firstname | Lastname | Email |
---|
John | Doe | john@example.com | Mary | Moe | mary@example.com | July | Dooley | july@example.com |
Borderless TableClass .table-borderless loại bỏ borders khỏi table: Ví dụ
<table class="table table-borderless">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Firstname | Lastname | Email |
---|
John | Doe | john@example.com | Mary | Moe | mary@example.com | July | Dooley | july@example.com |
Contextual ClassesContextual classes có thể được sử dụng để tô màu toàn bộ bảng (<table> ), các row của bảng (<tr> ) hoặc các cell (1 cell = 1 ô) của bảng (<td> ). Ví dụ
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def@somemail.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>joe@example.com</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>bo@example.com</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>act@example.com</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>
<td>sec@example.com</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
<td>angie@example.com</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>Bo</td>
<td>bo@example.com</td>
</tr>
</tbody>
</table>
Firstname | Lastname | Email |
---|
Default | Defaultson | def@somemail.com | Primary | Joe | joe@example.com | Success | Doe | john@example.com | Danger | Moe | mary@example.com | Info | Dooley | july@example.com | Warning | Refs | bo@example.com | Active | Activeson | act@example.com | Secondary | Secondson | sec@example.com | Light | Angie | angie@example.com | Dark | Bo | bo@example.com |
Contextual classes có thể được sử dụng là: Class | Mô tả (Các màu sẽ hiển thị lên bảng) |
---|
.table-primary | Blue | .table-success | Green | .table-danger | Red | .table-info | Light blue | .table-warning | Orange | .table-active | Grey: Áp dụng màu cho hàng của bảng hoặc ô của bảng | .table-secondary | Grey | .table-light | Light grey cho bảng hoặc background row | .table-dark | Dark grey cho bảng hoặc background row |
Table Head ColorsClass .thead-dark add background màu đen cho header của table, còn class .thead-light add background màu xám cho header của table: Ví dụ
<table class="table">
<thead class="thead-dark">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Firstname | Lastname | Email |
---|
John | Doe | john@example.com | Mary | Moe | mary@example.com | July | Dooley | july@example.com |
Firstname | Lastname | Email |
---|
John | Doe | john@example.com | Mary | Moe | mary@example.com | July | Dooley | july@example.com |
Small tableClass .table-sm làm table bé đi bằng cách cắt padding các ô của bảng đi một nửa: Ví dụ
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
Firstname | Lastname | Email |
---|
John | Doe | john@example.com | Mary | Moe | mary@example.com | July | Dooley | july@example.com |
Responsive TablesVí dụ<div class="table-responsive">
<table class="table">
...
</table>
</div>
Class .table-responsive khiến table có thể responsive: thêm scrollbar để vừa màn hình nếu thực tế bảng dài tràn màn hình: | Đây | là | bảng | dài | hơn so với màn hình của bạn |
---|
VD | Đây | là | bảng | dài | hơn so với màn hình của bạn |
Bạn có thể quyết định khi nào table có scrollbar, tùy thuộc vào chiều rộng màn hình: Class | Screen width |
---|
.table-responsive-sm | < 576px | .table-responsive-md | < 768px | .table-responsive-lg | < 992px | .table-responsive-xl | < 1200px |
Ví dụ<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
|