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

Question

我正在尝试向 html 表格添加单元格间距。

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

我的问题是，cellspacinghtml 属性和border-spacingCSS 属性也在外面添加了间距。

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

是否可以？

编辑：

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>