如何在HTML表格的td元素之间设置间距？

首先，<td>属于表格单元格（table-cell）元素，margin属性对这类元素无效，所以你之前用margin-left: 30px不会生效；而padding-left是给单元格内部加内边距，并非单元格之间的间隙，这就是达不到预期效果的原因。

要实现你想要的两个<td>之间的间隙（同时顶部边框断开），可以利用表格原生的border-spacing属性，具体修改如下：

修改后的CSS代码 #

table {
  border: none;
  border-collapse: separate; /* 必须设置为separate，border-spacing才会生效 */
  border-spacing: 30px 0; /* 第一个值是水平间距，第二个是垂直间距，这里垂直设为0保持原有行高 */
}

table tr {
  height: 40px;
}

table tr td:nth-child(2) {
  width: 400px;
}

table tr td {
  border-top: 1px solid #000;
  color: #000;
}

说明 #

• border-collapse: separate：表格默认是collapse（合并边框），必须改为separate才能让border-spacing生效。
• border-spacing: 30px 0：第一个参数设置两个<td>之间的水平间隙为30px，第二个参数设置行与行之间的垂直间隙为0，保留你原有的行高效果。
• 移除了无效的margin-left设置，保留了你原本定义的宽度和边框样式。

修改后就能实现两个单元格之间的空白间隙，同时每行的顶部边框会在间隙处断开，和你期望的效果一致。

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