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 以删除外部间距

堆栈片段

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;
}

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

Answer 2

这有点棘手，您需要遵循以下内容：

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

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