停止表继承

Question

我试图找出我怎么能有另一个表，这样儿童表不继承样式父表内的表...

如果我有一个表

<table align='center' class='tab1' .... 
<tr> <td> ...<table class='tab2' .... 

.tab table, .tab th, .tab tr, .tab td { 
padding: 0; 
margin:0; 
vertical-align: top; 
font-size: 11px; 
line-height: 15px; 
padding-top: 5px; 
padding-bottom: 5px; 
} 

.tab table { 
border-collapse: collapse; 
font-size: 11px; 
border: 1px solid #999; 
table-layout: fixed; 
} 

---

我想我应该告诉你什么您准确在我开始寻求帮助我的表列出。我的表格列出了迭代到最后的信息。对于每一行，都有一个隐藏的div，可以在单击相关行的按钮时看到信息。这是我想要使用另一个表来定位我的两个父表中的3列表的位置。想过之后，我宁愿没有嵌套桌子。现在你说有另一种更好的方法来做到这一点。我认为最好使用div并使用行内特定元素的位置属性。

我输出的一个示例如下所示：

name - title          view edit 
email - country 
----hidden info----- 
address ......    alternate email     notes... 
............    other info..... 
.............    other info ..... 

Answer 1

你要找的应该是这样的选择：

table#mytable > tr > td { 
    ...your properties 
} 

百叶（>）确保只有眼前的孩子，而不是孙子得到分配的属性。这意味着子表的tr和td不会被选中。

但是，我警告你不要使用表格进行定位......取决于屏幕阅读器，视觉受损的用户可能会听到各种奇怪的输出。你可能想考虑他们的经验前进。

Answer 2

我给第一个表中的ID，并将该ID在你的选择（如.tab table#mytable）。

更新：

<table id="outer"> 
    <tr> 
    <td> 
     <table id="inner"> 
     <tr> 
      <td>Content here</td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table> 

... elsewhere 

table#outer tr td { 
    background: blue; 
    padding: 10px; 
    border: 5px solid #0000AF; 
} 
table#inner tr td { 
    background: red; 
    padding: 3px; 
    border: 5px solid #AF0000; 
} 

简而言之ID对表和你写的任何时间CSS规则把表的id进入选择。这样，您可以轻松地覆盖外表上的样式。

这是如此详细的原因是因为在IE中，你不能使用像table#outer > tr > td这样的选择器来限定只能指导#outer的孩子。是的，这很烦人。

这里真正的关键是（我同意100％btelles在这里）：不要在桌子内部使用表格来定位。