border-collapse

Các tiện ích để kiểm soát liệu border của table nên gộp lại hay tách rời.

ClassStyles
border-collapse
border-collapse: collapse;
border-separate
border-collapse: separate;

Ví dụ

Gộp border của table

Sử dụng tiện ích border-collapse để kết hợp các border của các ô kề nhau thành một border duy nhất khi có thể:

StateCity
IndianaIndianapolis
OhioColumbus
MichiganDetroit
<table class="border-collapse border border-gray-400 ...">  <thead>    <tr>      <th class="border border-gray-300 ...">State</th>      <th class="border border-gray-300 ...">City</th>    </tr>  </thead>  <tbody>    <tr>      <td class="border border-gray-300 ...">Indiana</td>      <td class="border border-gray-300 ...">Indianapolis</td>    </tr>    <tr>      <td class="border border-gray-300 ...">Ohio</td>      <td class="border border-gray-300 ...">Columbus</td>    </tr>    <tr>      <td class="border border-gray-300 ...">Michigan</td>      <td class="border border-gray-300 ...">Detroit</td>    </tr>  </tbody></table>

Lưu ý rằng điều này bao gồm việc gộp các border trên thẻ <table> cấp cao nhất.

Tách border của table

Sử dụng tiện ích border-separate để buộc mỗi ô hiển thị các border riêng biệt của nó:

StateCity
IndianaIndianapolis
OhioColumbus
MichiganDetroit
<table class="border-separate border border-gray-400 ...">  <thead>    <tr>      <th class="border border-gray-300 ...">State</th>      <th class="border border-gray-300 ...">City</th>    </tr>  </thead>  <tbody>    <tr>      <td class="border border-gray-300 ...">Indiana</td>      <td class="border border-gray-300 ...">Indianapolis</td>    </tr>    <tr>      <td class="border border-gray-300 ...">Ohio</td>      <td class="border border-gray-300 ...">Columbus</td>    </tr>    <tr>      <td class="border border-gray-300 ...">Michigan</td>      <td class="border border-gray-300 ...">Detroit</td>    </tr>  </tbody></table>

Responsive design

Prefix a border-collapse utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<table class="border-collapse md:border-separate ...">  <!-- ... --></table>

Learn more about using variants in the variants documentation.

Copyright © 2025 Tailwind Labs Inc.·Chính sách thương hiệu