在Tailwind中如何结合border-separate与divide-y实现行间距和分隔线？

为什么border-separate和divide-y无法同时生效？ #

border-separate对应CSS属性border-collapse: separate，该属性会让表格的单元格边框独立渲染，单元格之间的间距由border-spacing控制。而Tailwind的divide-y是通过给容器内的子元素（这里是表格行<tr>）添加border-top样式（排除第一个子元素）来实现水平分隔线。

在border-collapse: separate的模式下，表格行的边框会被表格的边框分离规则覆盖：行的边框不会与单元格边框合并，且divide-y添加的边框会被单元格背景或表格间距遮挡，最终导致分隔线无法显示。

同时实现表格行垂直间距与水平分隔线的最佳实践 #

方法1：保留border-separate，手动给行添加分隔线 #

放弃divide-y，直接给除首行外的所有<tr>添加border-t类，结合border-separate和border-spacing-y-2实现垂直间距与分隔线：

<table class="border-separate border-spacing-y-2 w-full">
  <tr class="bg-white">
    <td class="p-4">Row 1 Cell 1</td>
    <td class="p-4">Row 1 Cell 2</td>
  </tr>
  <tr class="bg-white border-t border-gray-200">
    <td class="p-4">Row 2 Cell 1</td>
    <td class="p-4">Row 2 Cell 2</td>
  </tr>
  <tr class="bg-white border-t border-gray-200">
    <td class="p-4">Row 3 Cell 1</td>
    <td class="p-4">Row 3 Cell 2</td>
  </tr>
</table>

方法2：使用border-collapse，用内边距模拟垂直间距 #

改用border-collapse（取消border-separate），通过给单元格或行添加内边距模拟垂直间距，同时保留divide-y实现分隔线：

<table class="border-collapse w-full divide-y divide-gray-200">
  <tr class="bg-white">
    <td class="p-4 py-3">Row 1 Cell 1</td>
    <td class="p-4 py-3">Row 1 Cell 2</td>
  </tr>
  <tr class="bg-white">
    <td class="p-4 py-3">Row 2 Cell 1</td>
    <td class="p-4 py-3">Row 2 Cell 2</td>
  </tr>
  <tr class="bg-white">
    <td class="p-4 py-3">Row 3 Cell 1</td>
    <td class="p-4 py-3">Row 3 Cell 2</td>
  </tr>
</table>

方法3：用Div模拟表格布局（非语义化场景） #

如果不需要表格的语义化，可使用div配合Flex/Grid布局，这样能同时用gap-y-2实现垂直间距、divide-y实现分隔线，不受表格边框模型限制：

<div class="divide-y divide-gray-200 gap-y-2 flex flex-col">
  <div class="bg-white p-4 flex">
    <div class="w-1/2">Row 1 Cell 1</div>
    <div class="w-1/2">Row 1 Cell 2</div>
  </div>
  <div class="bg-white p-4 flex">
    <div class="w-1/2">Row 2 Cell 1</div>
    <div class="w-1/2">Row 2 Cell 2</div>
  </div>
  <div class="bg-white p-4 flex">
    <div class="w-1/2">Row 3 Cell 1</div>
    <div class="w-1/2">Row 3 Cell 2</div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者me.at.coding