Override table style on nested inner table

Please view my js fiddle:

http://jsfiddle.net/WillingLearner/gzYPU/7/

As you can clearly see when you ru开发者_如何学Pythonn the fiddle, the inner table with the border is not displaying its own styles. Its inheriting the style from the parent.

Please help me display the inner table with its own styles only, while still remaining nested in the parent table row.

There are various ways to fix your problem. You have two styles on tr:

#MainTable_Forums tr:nth-child(even)
#MainTable_Forums tr:nth-child(odd)

These are being used for the inner tr as ID rules bind tighter than class rules.

You can also insert a <tbody> in the the HTML and then use these for the striping:

#MainTable_Forums > tbody > tr:nth-child(even)
#MainTable_Forums > tbody > tr:nth-child(odd)

Some browsers will insert the <tbody> for you so you'll need to have it in the selectors and the HTML to, hopefully, cover all the cases. Example: http://jsfiddle.net/ambiguous/b6zEy/

Depending on your specific needs you could replace your inner tr rule with this:

.ThreadInfo_Container td

to apply the style directly to the td. The effect isn't quite the same but it might, depending on your specific situation, work better; some browsers make a mess of borders on tr elements, some are fine with it. Example: http://jsfiddle.net/ambiguous/a4LEg/

The selector for the inner table is less specific than the one(s) for the outer table, hence the styles of the outer table have precedence. You can make the selector for the inner table more specific like so:

#MainTable_Forums .ThreadInfo_Container tr { ... }