Html 在列组之间添加间距

我有一个HTML表，其中有几个

colgroups

，我在其周围加了一个边框。我想在相邻组之间添加一些空间。在CSS中有没有一种不在组之间添加空单元格的方法

<table>
  <colgroup style="border:1px solid blue;"><col><col></colgroup>
  <colgroup style="border:1px solid blue;"><col><col></colgroup>
  <thead>
    <tr><th>Col A1</th><th>Col A2</th><th>Col B1</th><th>Col B2</th></tr>
  </thead>
 <tbody>
    <tr><td>A1</td><td>A2</td><td>B1</td><td>B2</td></tr>
 </tbody>
</table>

第A1Col列第A2Col列第B1Col列第B2列
A1A2B1B2

所需的输出如下所示：

------------------- ------------------- | COL A1 | COL A2 | | COL B1 | COL B2 | ------------------ ------------------- | A1 | A2 | | B1 | B2 | ------------------- ------------------- ------------------- ------------------- |第A1列|第A2列|第B1列|第B2列| ------------------ ------------------- |A1 | A2 | B1 | B2| ------------------- ------------------- 编辑 到目前为止，仅仅使用css似乎无法做到这一点。我将等待，看看是否有人有一个答案，实现这一点，但现在，我正在使用间隔细胞的方法。这不是一个理想的解决方案，而是一个相对干净的解决方案。下面是一个工作示例：

试试这个：

colgroup{
    margin:20px;
}

---

边距

和

填充

无效

边框间距

仅适用于整个

元素

我认为唯一的办法是把它分成两张单独的桌子

编辑：

或使用

右/左边框进行戏法

：

---

*编辑：固定打字错误

您是否尝试过

display:block

和

margin:#px

显示块不起作用。它会给您留下一个框，其中没有与列关联的尺寸标注。因此，它们需要保持为display:table column组。谢谢你的建议。这是一个很酷的概念。一个问题是，你没有得到的差距之间的边界。不过很聪明。