Cấp bậc tác giả:

HTML

Phần 5 CSS3 - Bảng

Được viết bởi webmaster ngày 01/11/2019 lúc 10:53 AM
Đố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ẻ 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.
  • 0
  • 52

Phần 5 CSS3 - Bảng

Loading...

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 NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe 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 NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe 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 NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry 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 NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry 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 NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry 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.

ClassDescription
.activeÁp dụng màu hover cho một dòng hoặc một ô trong bảng
.successBiểu thị sự thành công hoặc một hành động tích cực
.infoBiểu thị sự thay đổi và hành động mang tính thông báo
.warningBiểu thị sự cảnh báo hoặc nhắc nhở
.dangerBiểu thị sự nguy hiểm hoặc một hành động mang tính tiêu cực
#Column headingColumn headingColumn heading
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn 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 headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

Loading...

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML