嵌套内部表上的替代表样式 [英] Override table style on nested inner table

问题描述

请查看我的js小提琴：

Please view my js fiddle:

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

您可以清楚地看到当您运行小提琴时，带有边框的内部表未显示其自己的样式。它从父代继承样式。

As you can clearly see when you run 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.

推荐答案

有多种方法可以解决您的问题。您在 tr 上有两种样式：

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)

用于内部 tr ，因为ID规则比类规则绑定得更紧密。

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

您还可以插入<$ c HTML中的$ c>< tbody> ，然后将其用于条带化：

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)

某些浏览器会插入< tbody> 给您，因此您需要将其包含在选择器和HTML中，以期涵盖所有情况。示例： http://jsfiddle.net/ambiguous/b6zEy/

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/

根据您的特定需求，您可以将内部 tr 规则替换为：

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

.ThreadInfo_Container td

直接将样式应用于 td 。效果并不完全相同，但是根据您的具体情况，效果可能会更好；有些浏览器在 tr 元素上造成了混乱，有些很好。示例： http://jsfiddle.net/ambiguous/a4LEg/

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/

这篇关于嵌套内部表上的替代表样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！