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.

Trên trang này

Tổng quan

Do việc sử dụng rộng rãi các <table>phần tử trên các tiện ích của bên thứ ba như lịch và bộ chọn ngày, các bảng của Bootstrap được chọn tham gia . Thêm lớp cơ sở .tablevào bất kỳ <table>, sau đó mở rộng với các lớp bổ trợ tùy chọn hoặc kiểu tùy chỉnh của chúng tôi. Tất cả các kiểu bảng không được kế thừa trong Bootstrap, có nghĩa là bất kỳ bảng lồng nhau nào cũng có thể được tạo kiểu độc lập với bảng gốc.

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.

#	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">
  <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 biến thể

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

Lớp	Phần mở đầu	Phần mở đầu
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 tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>

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 .visually-hiddenlớp.

Bảng có dấu

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 the Bird		@twitter

<table class="table table-striped">
  ...
</table>

Cột sọc

Sử dụng .table-striped-columnsđể thêm dải mã vằn vào bất kỳ cột nào trong bả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 the Bird		@twitter

<table class="table table-striped-columns">
  ...
</table>

Các lớp này cũng có thể được thêm vào các biến thể của bả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 the Bird		@twitter

<table class="table table-dark table-striped">
  ...
</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-dark table-striped-columns">
  ...
</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-success table-striped">
  ...
</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-success table-striped-columns">
  ...
</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">
  ...
</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-dark table-hover">
  ...
</table>

Các hàng có thể di chuyển này cũng có thể được kết hợp với biến thể hàng sọ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-striped table-hover">
  ...
</table>

Bảng hoạt động

Đánh dấu một hàng hoặc ô trong bảng bằng cách thêm một .table-activelớp.

#	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">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">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-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Các biến thể và bảng có dấu hoạt động như thế nào?

Đối với các bảng có dấu ( hàng sọc , cột sọc , hàng có thể di chuyển và bảng đang hoạt động ), chúng tôi đã sử dụng một số kỹ thuật để làm cho các hiệu ứng này hoạt động cho tất cả các biến thể bảng của chúng tôi :

Chúng tôi bắt đầu bằng cách thiết lập nền của một ô trong bảng với thuộc tính --bs-table-bgtùy chỉnh. Sau đó, tất cả các biến thể của bảng sẽ đặt thuộc tính tùy chỉnh đó để tô màu các ô trong bảng. Bằng cách này, chúng tôi không gặp rắc rối nếu các màu bán trong suốt được sử dụng làm nền bảng.
Sau đó, chúng tôi thêm một bóng hộp bên trong trên các ô của bảng với box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);lớp trên bất kỳ được chỉ định nào background-color. Bởi vì chúng tôi sử dụng một trải rộng lớn và không bị mờ, màu sắc sẽ đơn điệu. Vì --bs-table-accent-bgkhông được đặt theo mặc định, chúng tôi không có bóng hộp mặc định.
Khi một .table-striped, hoặc các lớp được thêm vào, .table-striped-columnsmàu này được đặt thành màu nửa trong suốt để tô màu nền..table-hover.table-active--bs-table-accent-bg
Đối với mỗi biến thể bảng, chúng tôi tạo ra một --bs-table-accent-bgmàu có độ tương phản cao nhất tùy thuộc vào màu đó. Ví dụ: màu nhấn cho .table-primaryđậm hơn trong khi .table-darkcó màu nhấn sáng hơn.
Màu văn bản và màu đường viền được tạo theo cùng một cách và màu của chúng được kế thừa theo mặc định.

Hậu trường trông như thế này:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
    $border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Đường viền bảng

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">
  ...
</table>

Các tiện ích màu viền có thể được thêm vào để thay đổi màu sắ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 border-primary">
  ...
</table>

Bảng không có viền

Thêm .table-borderlesscho một bảng không có đường viền.

#	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-borderless">
  ...
</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-dark table-borderless">
  ...
</table>

Bàn nhỏ

Thêm .table-smđể làm cho bất kỳ .tablehình ảnh nhỏ gọn hơn bằng cách cắt tất cả các ô làm paddingđôi.

#	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>

#	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-dark table-sm">
  ...
</table>

Bảng phân chia nhóm

Thêm đường viền dày hơn, đậm hơn giữa các nhóm bảng— <thead>, <tbody>và <tfoot>—với .table-group-divider. Tùy chỉnh màu sắc bằng cách thay đổi border-top-color(mà chúng tôi hiện không cung cấp một lớp tiện ích tại thời điểm này).

#	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

html

<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 class="table-group-divider">
    <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ăn chỉnh theo chiều dọc

Các ô trong bảng <thead>luôn được căn chỉnh theo chiều dọc xuống dưới cùng. Các ô trong bảng <tbody>kế thừa sự căn chỉnh của chúng từ <table>đó và được căn chỉnh lên trên cùng theo mặc định. Sử dụng các lớp căn chỉnh dọc để căn chỉnh lại khi cần thiết.

Tiêu đề 1	Tiêu đề 2	Tiêu đề 3	Tiêu đề 4
Ô này kế thừa `vertical-align: middle;`từ bảng	Ô này kế thừa `vertical-align: middle;`từ bảng	Ô này kế thừa `vertical-align: middle;`từ bảng	Đây là một số văn bản giữ chỗ, nhằm chiếm khá nhiều không gian theo chiều dọc, để chứng minh cách căn chỉnh dọc hoạt động trong các ô trước đó.
Ô này kế thừa `vertical-align: bottom;`từ hàng trong bảng	Ô này kế thừa `vertical-align: bottom;`từ hàng trong bảng	Ô này kế thừa `vertical-align: bottom;`từ hàng trong bảng	Đây là một số văn bản giữ chỗ, nhằm chiếm khá nhiều không gian theo chiều dọc, để chứng minh cách căn chỉnh dọc hoạt động trong các ô trước đó.
Ô này kế thừa `vertical-align: middle;`từ bảng	Ô này kế thừa `vertical-align: middle;`từ bảng	Ô này được căn chỉnh ở trên cùng.	Đây là một số văn bản giữ chỗ, nhằm chiếm khá nhiều không gian theo chiều dọc, để chứng minh cách căn chỉnh dọc hoạt động trong các ô trước đó.

<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Làm tổ

Các kiểu đường viền, kiểu hoạt động và các biến thể của bảng không được các bảng lồng nhau kế thừa.

Ngày thứ nhất

Cuối

Xử lý

Đánh dấu

Otto

@mdo

Tiêu đề	Tiêu đề	Tiêu đề
Một	Ngày thứ nhất	Cuối
B	Ngày thứ nhất	Cuối
C	Ngày thứ nhất	Cuối

Larry

con chim

@twitter

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Cách làm tổ hoạt động

Để ngăn bất kỳ kiểu nào bị rò rỉ sang các bảng lồng nhau, chúng tôi sử dụng bộ >chọn con combinator () trong CSS của chúng tôi. Vì chúng ta cần nhắm mục tiêu tất cả các tds và ths trong thead, tbodyvà tfoot, bộ chọn của chúng ta sẽ trông khá lâu nếu không có nó. Như vậy, chúng tôi sử dụng .table > :not(caption) > * > *bộ chọn trông khá kỳ quặc để nhắm mục tiêu tất cả các tds và ths của .table, nhưng không có bất kỳ bảng nào được lồng vào nhau.

Lưu ý rằng nếu bạn thêm <tr>s dưới dạng con trực tiếp của một bảng, chúng <tr>sẽ được bao bọc trong một bảng <tbody>theo mặc định, do đó làm cho các bộ chọn của chúng tôi hoạt động như dự định.

Giải phẫu học

Đầ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ợ .table-lighthoặc .table-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

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </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">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Chân bàn

#	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
Chân trang	Chân trang	Chân trang	Chân trang

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

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 the Bird		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Bạn cũng có thể đặt <caption>trên đầu bảng với .caption-top.

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

html

<table class="table caption-top">
  <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|-xxl}.

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|-xxl}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.

Các bảng này có thể bị hỏng cho đến khi các kiểu đáp ứng của chúng áp dụng ở độ rộng cửa sổ xem cụ thể.

#	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
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
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

#	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
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
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

#	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
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
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

#	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
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
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

#	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
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
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

#	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
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
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

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

<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>

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

Sass

Biến

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 var(--#{$prefix}body-color);
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Vòng

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Tùy chỉnh

Các biến nhân tố ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) được sử dụng để xác định độ tương phản trong các biến thể của bảng.
Ngoài các biến thể bảng sáng và tối, màu chủ đề được làm sáng bởi $table-bg-scalebiến.