CODEWITHSUNDEEP
htmlcsshtml-table
Rob Van Dam
Rob Van Dam

Reputation: 7960

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

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?

Upvotes: 6

Views: 7875

Answers (3)

Alkanshel
Alkanshel

Reputation: 4429

table-collapse: separate with cellspacing kinda sucks for this reason. You're probably better off collapsing the borders and manually padding the individual cells in CSS.

Upvotes: 0

instanceof me
instanceof me

Reputation: 39138

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:

Upvotes: 5

alemjerus
alemjerus

Reputation: 8268

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.

Upvotes: 1

Related Questions