在 colgroups 之间添加间距答案

【问题标题】：Add spacing between to colgroups在 colgroups 之间添加间距
【发布时间】：2014-08-14 22:12:29
【问题描述】：

我有一个带有几个 colgroups 的 HTML 表格，我在其周围设置了边框。我想在相邻组之间添加一些空间。有没有办法在 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/

【问题讨论】：

你试过display: block和margin: #px
显示块不起作用。它为您留下了一个不再与列关联的没有尺寸的框。因此，它们需要保持为显示：table-column-group。感谢您的建议。

标签： html css colgroup

【解决方案1】：

margin & padding 不起作用。

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

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

编辑：

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

*编辑：修正错字

【讨论】：

这是一个非常酷的概念。一个问题是你没有得到差距之间的边界。不过非常聪明。

【解决方案2】：

试试这个：

colgroup{
    margin:20px;
}

【讨论】：