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/

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

Answer 2

Try this:

colgroup{
    margin:20px;
}