How to get an outline border for a group?

Question

I have a table with 17 columns divided into 3 groups of columns. I can set the background color using CSS, which means my CSS selectors are fine. However, I cannot set a border around each group.

I tried this CSS first:

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

And the column groups are defined as follows:

 <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 the groups were defined as follows:

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

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

I know the table rules attribute, but I would prefer not to use it. I think CSS will give me more flexibility if I can figure out how to use it!

Thanks!

Answer 1

To make borders work when using tables, you must set the following rule to the table

 table.collapsed{ border-collapse:collapse; } 

You get your border when you pretend

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

A simple example in this JsBin

Option Boundary for the entire group, not for each column.

Then you should manage colgroup instead of cols like that.

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

Remember to always use crash collapse! This can be seen on this JsBin.