border-collapse

用于控制表格边框是折叠还是分离的工具类。

快速参考

类	属性
border-collapse	border-collapse: collapse;
border-separate	border-collapse: separate;

示例

折叠表格边框

使用 border-collapse 工具类，在可能时将相邻单元格边框合并为一条边框：

State	City
Indiana	Indianapolis
Ohio	Columbus
Michigan	Detroit

<!-- [!code classes:border-collapse] -->
<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>

注意，这包括在顶层 <table> 标签上折叠边框。

分离表格边框

使用 border-separate 工具类，强制每个单元格显示各自独立的边框：

State	City
Indiana	Indianapolis
Ohio	Columbus
Michigan	Detroit

<!-- [!code classes:border-separate] -->
<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>

响应式设计

使用 md: 等断点变体作为 border-collapse 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

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

了解如何使用变体，请参阅变体文档。