Question

Is there any way to modify the CSS properties of one table’s cells based on the table’s ids, rather than specific child ids?

I would like to change one table’s appearance (giving each cell a colored border, for instance) one way, and another table another way, but I’d like to avoid specifying an id for each cell.

To be clear, I don’t need to individually access each cell in the table – I just want to set all of the properties of “child” cells of various tables.

Answer 1

If you can identify the particular table, then no problem. Just use a descendant selector:

#tableid1 td { border: 2px solid green; }

What this is saying is that all table cells that are descendants of a table with ID of tableid1 have a green border. To include <th> cells as well:

#tableid1 td, #tableid1 th { border: 2px solid green; }

Note: the above can have issues if you have nested tables where, for example, you want the outer table to have borders but not the inner table. Generally it’s not advised to use nested tables but sometimes there are no other options. There are multiple ways of dealing with this kind of problem.

Firstly, you can use the child selector instead (>):

#id1 > tbody > td { ... }

The <tbody> element is implicit here.

The problem is that the child selector isn’t supported on IE6.

Another way of dealing with this is to cancel out the effect:

#id1 td { border: 2px solid green; }
#id1 td td { border: 0 none; }

This isn’t always practical but it does work on IE6.