6

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/

Dave
  • 1,196
  • 15
  • 22
  • have you tried `display: block` and `margin: #px` – Chanckjh Aug 14 '14 at 22:24
  • 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. – Dave Aug 14 '14 at 22:45

2 Answers2

3

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

Wouter
  • 29
  • 7
RobertO
  • 2,655
  • 1
  • 20
  • 18
  • That is a very cool concept. One issue is that you don't get the borders between the gap. Very clever, though. – Dave Sep 28 '19 at 06:54
-1

Try this: 

colgroup{
    margin:20px;
}
Youngin
  • 261
  • 4
  • 14