Source

Những cái bàn

Tài liệu và ví dụ về kiểu chọn tham gia của bảng (do chúng được sử dụng phổ biến trong các plugin JavaScript) với Bootstrap.

Các ví dụ

Do việc sử dụng rộng rãi các bảng trên các tiện ích của bên thứ ba như lịch và bộ chọn ngày, chúng tôi đã thiết kế bảng của mình để chọn tham gia . Chỉ cần thêm lớp cơ sở .tablevào bất kỳ <table>, sau đó mở rộng với các kiểu tùy chỉnh hoặc các lớp bổ trợ đi kèm khác nhau của chúng tôi.

Sử dụng cách đánh dấu bảng cơ bản nhất, đây là cách .tablecác bảng dựa trên trông như thế nào trong Bootstrap. Tất cả các kiểu bảng đều được kế thừa trong Bootstrap 4 , có nghĩa là bất kỳ bảng nào được lồng vào nhau sẽ được tạo kiểu theo cùng một kiểu với bảng gốc.

#	Ngày thứ nhất	Cuối	Xử lý
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry	con chim	@twitter

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Bạn cũng có thể đảo ngược màu sắc — với văn bản sáng trên nền tối — với .table-dark.

#	Ngày thứ nhất	Cuối	Xử lý
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry	con chim	@twitter

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Tùy chọn đầu bảng

Tương tự như bảng và bảng tối, hãy sử dụng các lớp bổ trợ .thead-lighthoặc .thead-darkđể làm cho <thead>các bảng có màu xám nhạt hoặc đậm.

#	Ngày thứ nhất	Cuối	Xử lý
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry	con chim	@twitter

#	Ngày thứ nhất	Cuối	Xử lý
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry	con chim	@twitter

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Hàng sọc

Sử dụng .table-stripedđể thêm dải mã vằn vào bất kỳ hàng nào của bảng trong <tbody>.

#	Ngày thứ nhất	Cuối	Xử lý
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry	con chim	@twitter

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Ngày thứ nhất	Cuối	Xử lý
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry	con chim	@twitter

<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Bảng có viền

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

#	Ngày thứ nhất	Cuối	Xử lý
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry the Bird		@twitter

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Ngày thứ nhất	Cuối	Xử lý
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry the Bird		@twitter

<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Các hàng có thể lưu trữ

Thêm .table-hoverđể bật trạng thái di chuột trên các hàng của bảng trong a <tbody>.

#	Ngày thứ nhất	Cuối	Xử lý
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry the Bird		@twitter

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Ngày thứ nhất	Cuối	Xử lý
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry the Bird		@twitter

<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Bàn nhỏ

Thêm .table-smđể làm cho bảng nhỏ gọn hơn bằng cách cắt đôi phần đệm ô.

#	Ngày thứ nhất	Cuối	Xử lý
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry the Bird		@twitter

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Ngày thứ nhất	Cuối	Xử lý
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry the Bird		@twitter

<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Các lớp theo ngữ cảnh

Sử dụng các lớp ngữ cảnh để tô màu các hàng trong bảng hoặc các ô riêng lẻ.

Lớp	Phần mở đầu	Phần mở đầu
Tích cực	Tế bào	Tế bào
Mặc định	Tế bào	Tế bào
Sơ đẳng	Tế bào	Tế bào
Sơ trung	Tế bào	Tế bào
Thành công	Tế bào	Tế bào
Sự nguy hiểm	Tế bào	Tế bào
Cảnh báo	Tế bào	Tế bào
Thông tin	Tế bào	Tế bào
Nhẹ	Tế bào	Tế bào
Tối	Tế bào	Tế bào

<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

Các biến thể nền bảng thông thường không khả dụng với bảng tối, tuy nhiên, bạn có thể sử dụng các tiện ích văn bản hoặc nền để đạt được các kiểu tương tự.

#	Phần mở đầu	Phần mở đầu
1	Tế bào	Tế bào
2	Tế bào	Tế bào
3	Tế bào	Tế bào
4	Tế bào	Tế bào
5	Tế bào	Tế bào
6	Tế bào	Tế bào
7	Tế bào	Tế bào
số 8	Tế bào	Tế bào
9	Tế bào	Tế bào

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp một dấu hiệu trực quan, điều này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc hiển thị rõ ràng từ chính nội dung (ví dụ: văn bản hiển thị) hoặc được đưa vào thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung bị ẩn với .sr-onlylớp.

Tạo bảng đáp ứng bằng cách quấn bất kỳ bảng nào .tablebằng .table-responsive{-sm|-md|-lg|-xl}, làm cho bảng cuộn theo chiều ngang tại mỗi max-widthđiểm ngắt lên đến (nhưng không bao gồm) 576px, 768px, 992px và 1120px, tương ứng.

Lưu ý rằng vì các trình duyệt hiện không hỗ trợ truy vấn ngữ cảnh phạm vi , chúng tôi giải quyết các hạn chế của min-và max-tiền tố và chế độ xem có độ rộng phân số (ví dụ: có thể xảy ra trong các điều kiện nhất định trên thiết bị dpi cao) bằng cách sử dụng các giá trị có độ chính xác cao hơn cho các so sánh này .

Chú thích

Một <caption>chức năng giống như một tiêu đề cho một bảng. Nó giúp người dùng có trình đọc màn hình tìm bảng và hiểu nội dung của bảng và quyết định xem họ có muốn đọc bảng đó hay không.

Danh sách người dùng
#	Ngày thứ nhất	Cuối	Xử lý
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry	con chim	@twitter

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Bảng đáp ứng

Các bảng đáp ứng cho phép các bảng được cuộn theo chiều ngang một cách dễ dàng. Làm cho bất kỳ bảng nào phản hồi trên tất cả các chế độ xem bằng cách bao .tablegồm một .table-responsive. Hoặc, chọn một điểm ngắt tối đa để có một bảng đáp ứng bằng cách sử dụng .table-responsive{-sm|-md|-lg|-xl}.

Cắt / cắt dọc

Các bảng đáp ứng tận dụng overflow-y: hidden, loại bỏ bất kỳ nội dung nào vượt ra ngoài các cạnh dưới cùng hoặc trên cùng của bảng. Đặc biệt, điều này có thể loại bỏ các menu thả xuống và các tiện ích khác của bên thứ ba.

Luôn đáp ứng

Trên mọi điểm ngắt, sử dụng .table-responsivecho các bảng cuộn theo chiều ngang.

#	Phần mở đầu	Phần mở đầu	Phần mở đầu	Phần mở đầu	Phần mở đầu	Phần mở đầu	Phần mở đầu	Phần mở đầu	Phần mở đầu
1	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào
2	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào
3	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào

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

Điểm ngắt cụ thể

Sử dụng .table-responsive{-sm|-md|-lg|-xl}khi cần thiết để tạo các bảng đáp ứng cho đến một điểm ngắt cụ thể. Từ điểm ngắt đó trở lên, bảng sẽ hoạt động bình thường và không cuộn theo chiều ngang.

#	Phần mở đầu	Phần mở đầu	Phần mở đầu	Phần mở đầu	Phần mở đầu
1	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào
2	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào
3	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào

#	Phần mở đầu	Phần mở đầu	Phần mở đầu	Phần mở đầu	Phần mở đầu
1	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào
2	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào
3	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào

#	Phần mở đầu	Phần mở đầu	Phần mở đầu	Phần mở đầu	Phần mở đầu
1	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào
2	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào
3	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào

#	Phần mở đầu	Phần mở đầu	Phần mở đầu	Phần mở đầu	Phần mở đầu
1	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào
2	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào
3	Tế bào	Tế bào	Tế bào	Tế bào	Tế bào

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

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

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

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