Style row or column rather than cells when border-collapse: separate

Question

I have a table which for other reasons I prefer to keep table-collapse: separate. However, I would like to be able to highlight an individual row or column. Unfortunately, it seems that any style applied to the <tr> or <col> tags only applies to the cells, not the space between them. For instance:

<style>
  td { width: 10px; height: 10px; }
</style>
<table style="background-color: purple">
  <colgroup>
    <col span="2">
    <col style="background-color: red;">
    <col span="2">
  <colgroup>
  <tr><td><td><td><td><td></tr>
  <tr><td><td><td><td><td></tr>
  <tr style="background-color: orange;"><td><td><td><td><td></tr>
  <tr><td><td><td><td><td></tr>
  <tr><td><td><td><td><td></tr>
</table>

results in a purple table with 5 vertical cells and 5 horizontal cells filled with color but not the entire row or column.

Do I have any option besides using border-collapse: collapse to fill in that space between cells in a given row or column?

Answer 1

If you use constant row width, you can use colspan to merge all cells of some row into one single cell, and then create a new table in it with separate borders with the background color of your choice.

Answer 2

Not with border-collapse: separate, the W3C specifications sates it exactly:

Note that if the table has 'border-collapse: separate', the background of the area given by the 'border-spacing' property is always the background of the table element. See the separated borders model.

And:

In [the border spacing] space, the row, column, row group, and column group backgrounds are invisible, allowing the table background to show through. Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).

You might want to check browser compatibility on table CSS:

• Table CSS properties
• Table column CSS properties