HTML表格单元格间距 - 仅在单元格之间，没有外部单元格

Question

我正在尝试将单元格间距添加到html表中。

我想在没有外部间距的单元格之间添加间距。

我的问题是，cellspacing html属性和border-spacing CSS属性也会增加间距。

我想放置没有红色（外部）部分的单元格间距 - 只有黄色部分。

有可能吗？

编辑：

1. 手绘图像（MS-Paint）仅用于说明。
2. 着色用于调试 - 这样就可以看到边框和间距的位置。

我找到了一个迂回解决方案，包括一些额外的div - s：

.inner-spacing {
  border-collapse: collapse;
  background-color: yellow;
  border: 2px solid black;
}
.inner-spacing td {
  padding: 0;
}
.inner-spacing td > div {
  width: 60px;
  height: 60px;
  background-color: green;
  border: 2px solid black;
  margin: 10px;
}
.inner-spacing tr:first-child > td > div {
  margin-top: 0px;
}
.inner-spacing tr:last-child > td > div {
  margin-bottom: 0px;
}
.inner-spacing tr > td:first-child > div {
  margin-left: 0px;
}
.inner-spacing tr > td:last-child > div {
  margin-right: 0px;
}

<table class="inner-spacing">
  <tr>
    <td>
      <div/>
    </td>
    <td>
      <div/>
    </td>
  </tr>
  <tr>
    <td>
      <div/>
    </td>
    <td>
      <div/>
    </td>
  </tr>
</table>

总而言之，我希望表格的边框间距与表格边框折叠到单元格上（无间距）。

我想知道是否还有其他解决方案 - 欢迎任何新的解决方案！

Answer 1

这会有点棘手......您需要设置display:block和border-spacing:10px以确定单元格之间的间距，并设置相同的负margin:-10px以删除外部空间

Stack Snippet

＆＃13;

＆＃13;

table {
  font: bold 13px Verdana;
  background: black;
  margin: 30px auto;
  border-spacing: 0;
}

table td {
  padding: 30px;
  background: red;
  color: #fff;
}

table tbody {
  margin: -10px;
  display: block;
  border-spacing: 10px;
}

＆＃13;

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这有点棘手，你需要遵循这样的事情：

＆＃13;

＆＃13;

table, td {border: 1px solid #999; border-collapse: collapse;}
table {margin: -5px;}
table td {width: 32px; height: 32px; margin: 5px;}

＆＃13;

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;