html - 在 colgroups 之间添加间距

Question

我有一个 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>

所需的输出如下所示：

-------------------- --------
| COL A1 | COL A2 | | COL B1 | COL B2 |
------------------ ------------------
| A1 | A2 | | B1 | B2 |
-------------------- --------

编辑

到目前为止，看起来只有 css 无法做到这一点。我会拭目以待，看看是否有人确实有一个实现这一目标的答案，但现在，我正在使用间隔单元方法。这并不理想，但看起来相对干净的解决方案。这是一个工作示例：

http://jsfiddle.net/7ps6cuss/3/

Answer 1

margin&padding不工作。

border-spacing仅适用于整个<table>元素。

我认为唯一的方法是将它分成两个单独的表。

编辑：

或欺骗border-right/left：http: //jsfiddle.net/q5sksufo/

*编辑：修正错字

Answer 2

尝试这个：

colgroup{
    margin:20px;
}