Add distance between groups

I have an HTML table with several colgroups

that I have posted around. I would like to add some space between adjacent groups. Is there a way to do this in CSS without adding blank 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 will look like this:

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

EDIT

Until now it looked like it couldn't be done with just css. I'll wait and see if anyone has an answer that achieves this, but for now I am using the spacer-cell method. This is not ideal, but a relatively clean solution. Here's a working example:

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