如何使用内联CSS实现边框合并表格的单元格间距设置

原有代码问题说明 #

• 你设置的border-collapse: collapse和border-spacing属性互斥，前者会让后者完全失效
• border-spacing属性值必须带长度单位（如px），你写的border-spacing: 5无单位，浏览器无法识别，不会生效

实现代码 #

你需要的单元格间距+合并边框效果，可以通过给表格和单元格分别设置不同方向的边框，配合border-spacing实现，纯内联CSS实现代码如下：

<table style="border-left: 1px solid black; border-top: 1px solid black; border-spacing: 5px;">
  <tr>
    <th style="border-right: 1px solid black; border-bottom: 1px solid black; padding: 4px;">a</th>
    <th style="border-right: 1px solid black; border-bottom: 1px solid black; padding: 4px;">b</th>
  </tr>
  <tr>
    <td style="border-right: 1px solid black; border-bottom: 1px solid black; padding: 4px;">c</td>
    <td style="border-right: 1px solid black; border-bottom: 1px solid black; padding: 4px;">d</td>
  </tr>
</table>

实现逻辑说明 #

• 表格只设置左边和上边的外边框，避免和单元格边框重复
• 所有th、td只设置右边和下边的边框，保证相邻单元格之间不会出现双线边框，达到类似合并边框的效果
• border-spacing: 5px用来控制单元格之间的间距，数值可根据需求调整
• th、td上的padding用来控制单元格内容和边框的距离，对应原cellpadding属性的效果，可按需调整

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