Ví dụ cơ bản
Đối với các style đơn giản —chỉ cần các dòng kẻ phân chia giữa các dòng—bạn chỉ cần thêm class cơ sở .table vào bất kỳ thẻ <table> mà bạn muốn sử dụng. Điều này dường như là thừa thãi, tuy nhiên để có thể sử dụng rộng rãi bảng cho các plugin khác như calendar và date pickers, chúng tôi đã lựa chọn để tách biệt với các style tùy biến của bảng.
| # | First Name | Last Name | Username |
|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | @twitter |
<table class="table">
...
</table>
Bảng có dòng kẻ sọc
Hãy sử dụng class .table-striped để thêm kiểu style dạng dòng kẻ sọc cho bất kỳ bảng nào mà bạn muốn.
Tương thích với hầu hết các loại trình duyệt
Bảng kẻ sọc được style thông qua selector :nth-child của CSS(Không được hỗ trợ trong Internet Explorer 8).
| # | First Name | Last Name | Username |
|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | @twitter |
<table class="table table-striped">
...
</table>
Bảng có viền
Thêm class .table-bordered để hiển thị đường viền cho bảng và các ô trong bảng.
| # | First Name | Last Name | Username |
|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | @twitter |
<table class="table table-bordered">
...
</table>
Bảng có dòng đổi màu khi hover
Thêm class .table-hover để kích hoạt trạng thái hover trên các dòng của bảng bên trong thẻ <tbody>.
| # | First Name | Last Name | Username |
|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | @twitter |
<table class="table table-hover">
...
</table>
Bảng bó chặt
Thêm class .table-condensed để làm cho các ô trong bảng gần nhau hơn.
| # | First Name | Last Name | Username |
|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | @twitter |
<table class="table table-condensed">
...
</table>
Các class theo ngữ cảnh
Sử dụng các class theo ngữ cảnh để tô màu cho các dòng hoặc các ô trong bảng.
| Class | Description |
|---|
.active | Áp dụng màu hover cho một dòng hoặc một ô trong bảng |
.success | Biểu thị sự thành công hoặc một hành động tích cực |
.info | Biểu thị sự thay đổi và hành động mang tính thông báo |
.warning | Biểu thị sự cảnh báo hoặc nhắc nhở |
.danger | Biểu thị sự nguy hiểm hoặc một hành động mang tính tiêu cực |
| # | Column heading | Column heading | Column heading |
|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| 8 | Column content | Column content | Column content |
| 9 | Column content | Column content | Column content |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
Bảng responsive
Để tạo ra bảng responsive, hãy bọc phần tử có class .table bằng một phần tử khác có class .table-responsive , khi đó bảng sẽ tự động điều chỉnh kích thước cho phù hợp và cho phép người dùng cuộn ngang trên các thiết bị di động (độ phân dải dưới 768px)
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
<div class="table-responsive">
<table class="table">
...
</table>
</div>