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>