如何使用Tailwind CSS为表格行添加间距（解决margin无效问题）

<tr>是表格专用行元素，遵循CSS原生表格渲染规则，不支持margin属性，所以直接给<tr>加mt-6这类margin类不会有任何效果，这是浏览器标准渲染逻辑导致的，和Tailwind本身无关。
块级元素（比如你测试用的<div>）默认支持margin属性，所以加mt-6可以正常显示上边距。
你之前用border-separate+border-spacing-2出现左右列间距，是因为统一的border-spacing属性会同时控制横向、纵向两个方向的单元格间距，没有单独限制横向间距为0。

用定向的纵向border-spacing实现仅行间距效果，不需要改动表格语义结构，代码如下：

<table className="table-auto w-full shadow-md mt-5 rounded border-separate border-spacing-y-6 border-spacing-x-0">
  <thead className="bg-base-200 text-left text-gray-700 tracking-wider">
    <tr>
      <th className="p-4 rounded-tl-lg rounded-bl-lg">Chapter Number</th>
      <th className="p-4">Chapter Name</th>
      <th className="p-4">Added at</th>
      <th className="p-4 rounded-tr-lg rounded-br-lg">Status</th>
    </tr>
  </thead>
  <tbody>
    {chapters.map((chapter) => (
        <tr key={chapter.chapterNumber}>
          <td className="p-4 bg-card rounded-tl-lg rounded-bl-lg">{chapter.chapterNumber}</td>
          <td className="p-4 bg-card">{chapter.chapterName}</td>
          <td className="p-4 bg-card">{chapter.addedAt}</td>
          <td className="p-4 bg-card rounded-tr-lg rounded-br-lg">{!chapter.published && 'Not published'}</td>
        </tr>
    ))}
  </tbody>
</table>

关键配置说明 #

• border-separate：开启单元格独立渲染模式，是行间距生效的前提
• border-spacing-y-6：仅设置纵向（行与行之间）的间距为1.5rem，和你之前预期的mt-6尺寸一致，可根据需要调整数值（比如border-spacing-y-4对应1rem间距）
• border-spacing-x-0：将横向（列与列之间）的间距设为0，避免出现左右空隙
• 因为border-separate模式下<tr>的背景色、圆角不会直接生效，所以把bg-card背景类、圆角类移到<td>单元格上，每行首尾单元格加对应圆角，就能实现带圆角的卡片式行效果。

内容的提问来源于stack exchange，提问作者wick3d