帮助我重写嵌套内部表格上的表格样式 [英] Help me override table style on nested inner table

问题描述

请查看我的js小提琴：

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

正如你可以清楚地看到你什么时候运行小提琴，带有边框的内表不显示自己的样式。它继承了父类的风格。

请帮我使用自己的样式显示内部表格，同时仍然嵌套在父表格行中。

解决方案

有多种方法可以解决您的问题。在 tr 上有两种风格：
$ b

  #MainTable_Forums tr：nth-孩子（偶数）
 #MainTable_Forums tr：nth-​​child（单数）
  

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

您也可以插入<$ c

 在HTML中使用$ c>< tbody>  #MainTable_Forums> tbody> tr：nth-​​child（偶数）
 #MainTable_Forums> tbody> tr：nth-​​child（单数）
  

有些浏览器会插入< tbody> ，因此您需要在选择器和HTML中使用它，希望涵盖所有情况。例如： http://jsfiddle.net/ambiguous/b6zEy/

根据您的特定需求，您可以用以下内容替换您的内部 tr 规则：

  .ThreadInfo_Container td 
  

直接将样式应用于 TD 。效果不尽相同，但取决于具体情况，效果可能会更好;有些浏览器会在 tr 元素上乱成一团边界，有些浏览器可以。例如： http://jsfiddle.net/ambiguous/a4LEg/

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.

解决方案

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/

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