Add spacing between to colgroups

Question

I have an HTML table with a few colgroups that I put a border around. I would like to add some space between adjacent groups. Is there a way to do this in CSS without adding empty cells between groups?

<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>

The desired output would look like this:

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

EDIT

So far it's looking like there's no way to do this with just css. I'll wait and see if someone does have an answer that achieves this, but for now, I'm using the spacer-cell method. It's not ideal but a relatively clean looking solution. Here's a working example:

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

Shipwreck

have you tried display: block and margin: #px – Calf

Display block doesn't work. It leaves you with a box with no dimensions no longer associated with the columns. So, they need to remain as display: table-column-group. Thanks for the suggestion. – Shipwreck

Answer 1

margin & padding ain't work.

border-spacing works only on entire <table> element.

I think the only way is to split it into two separate tables.

Edit:

Or trick with border-right/left : http://jsfiddle.net/q5sksufo/

*edit: fixed typo

Sihonn

That is a very cool concept. One issue is that you don't get the borders between the gap. Very clever, though. – Shipwreck

Answer 2

Try this:

colgroup{
    margin:20px;
}

Infeudation