How to get an outline border on a colgroup?

Question

I have a table with 17 columns, divided into 3 column groups. I can set the background colour using CSS, which suggests that my CSS selectors are fine. I can't, however, set a border around the outside of each colgroup.

First I tried this CSS:

colgroup.inbound, colgroup.outbound {
    background-color: #eeeeee;
    border: 1px solid red;
}

And defined column groups this way:

<colgroup span="2"></colgroup>
<colgroup span="12" class="inbound"></colgroup>
<colgroup span="3" class="outbound"></colgroup>       

Next I tried this CSS:

col.inbound, col.outbound {
    background-color: #eeeeee;
    border: 1px solid red;
}

And defined the groups this way:

<colgroup
    <col span="2">
    <col span="12" class="inbound">
    <col span="3" class="outbound">            
</colgroup>

In both cases my background colour takes effect, but not my border. The only border I can see is a thin white line between all cells (not around the group as a whole).

I am aware of the table rules attribute however I would prefer not to use this. I think CSS will give me more flexibility, if I can work out how to use it!

Answer 1

In order to make borders working when using tables you should set the following rule to the table

table.collapsed{
  border-collapse:collapse;
}

The you will get your border as you pretend

col.inbound, col.outbound {
    background-color: #eeeeee;
    border: 1px solid red;
}

A simple example in this JsBin

Option A border for the whole group instead of for each of the columns

Then you should rule the colgroup instead of the cols as so..

colgroup.inbound  {
  border: 1px solid #ff0000;
}

remember allways to use the border-collapse! This can be seen at this JsBin