CSS表格边框间距如何调整

在CSS中调整表格边框间距，核心使用的是border-spacing属性，该属性专门用于设置相邻单元格边框之间的水平与垂直间距，仅对border-collapse属性值为separate的表格生效。

border-spacing属性的基本用法

border-spacing属性可以接收一个或两个长度值，当只设置一个值时，该值同时作用于水平和垂直方向的间距；当设置两个值时，第一个值代表水平间距，第二个值代表垂直间距。

使用时需要注意，该属性必须应用在table元素上，不能作用于td或th元素，同时表格的border-collapse需要保持默认值separate，如果设置为collapse，该属性会失效。

基础代码示例

/* 设置表格边框水平间距10px，垂直间距15px */
table {
    border-collapse: separate; /* 默认值，可省略 */
    border-spacing: 10px 15px;
    border: 1px solid #ccc;
}
td {
    border: 1px solid #ccc;
    padding: 8px;
}

HTML结构示例

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>北京</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>28</td>
        <td>上海</td>
    </tr>
</table>

border-spacing与border-collapse的冲突说明

如果将border-collapse设置为collapse，表格的边框会合并为单一边框，此时border-spacing属性不会生效，这也是很多开发者设置间距无效的常见原因。

如果需要合并边框同时又要调整间距，border-spacing无法满足需求，此时可以通过给单元格添加外边距的方式间接实现，但需要注意td元素默认不支持margin属性，需要先将单元格设置为display: inline-block，不过这种方式可能会破坏表格原有的布局特性，需要谨慎使用。

不同取值的效果对比

我们可以通过一个表格直观看到不同border-spacing取值的效果差异：

实际开发注意事项

• border-spacing的取值可以是px、em、rem等CSS长度单位，不支持百分比取值。
• 如果表格设置了border-spacing，单元格的padding会额外增加单元格内部内容与边框的距离，两者不会相互抵消。
• 部分旧版本浏览器对border-spacing的支持存在兼容性问题，如果需要兼容非常老的浏览器，可以考虑用单元格嵌套div设置内边距的方式模拟间距效果。

常见问题解答

为什么设置了border-spacing没有效果

首先检查表格的border-collapse是否为separate，如果设置为collapse需要改回默认值；其次检查属性是否应用到了table元素上，应用到单元格上是无效的；最后确认是否有其他CSS样式覆盖了该属性。

如何让表格边框间距为0

直接将border-spacing设置为0即可，此时相邻单元格的边框会紧贴在一起，如果同时设置border-collapse: collapse，边框会合并为一条，视觉上也会没有间距，但实现原理不同。

/* 间距为0的表格样式 */
table {
    border-spacing: 0;
    border: 1px solid #eee;
}
td {
    border: 1px solid #eee;
}

CSS表格边框间距border_spacingtable布局前端样式修改时间：2026-06-27 11:33:33