停止表繼承

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在這裏）：不要在桌子內部使用表格來定位。