1. 表格
  2. border-collapse

表格

border-collapse

用于控制表格边框是合并还是分隔的工具类。

样式
border-collapse
border-collapse: collapse;
border-separate
border-collapse: separate;

示例

合并表格边框

使用 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 工具类强制每个单元格显示其单独的边框

城市
印第安纳州印第安纳波利斯
俄亥俄州哥伦布
密歇根州底特律
<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>

响应式设计

前缀a border-collapse 工具类 带有像 md: 这样的断点变体,仅在中等 屏幕尺寸及以上应用该工具类

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

了解更多关于在变体文档中使用变体的信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策