爲什麼不能用我的表繼承父級的寬度？

Question

出於某種原因，我不能用表元素繼承父的寬度

FIDDLE

CSS：

body { 
    margin:0; 
} 
#main_wrap { 
    max-width:1000px; 
    height:400px; 
    border-style:groove; 
    margin:0 auto 0 auto; 
} 
#menu { 
    width:inherit; 
    height:50px; 
    border-style:double; 
} 
#menu table { 
    width:inherit; 
    height:inherit; 
    background-color:rgba(255, 0, 4, 1.00); 
} 
#menu2 { 
    width:inherit; 
    height:50px; 
    border-style:double; 
} 
#test { 
    width:inherit; 
    height:inherit; 
    background-color:rgba(255, 0, 4, 1.00); 
} 

HTML：

<div id="main_wrap"> 
    <div id="menu"> 
     <table> 
      <td>a</td> 
      <td>a</td> 
      <td>a</td> 
      <td>a</td> 
      <td>a</td> 
     </table> 
    </div> 
    <div id="menu2"> 
     <div id="test"></div> 
    </div> 
</div> 

繼承時，我繼承到的作品div元素在相同的情況下。 不能從一個元素繼承哪些屬性已經被繼承了？ 爲什麼它與div工作，但不是與表格？

Answer 1

我相信問題發生是因爲表格不是塊元素。表格的寬度不能被繼承，只能根據設置的寬度或內容的寬度來確定。添加100％的寬度將爲您帶來理想的結果。

width: 100%; 

Answer 2

是否應該將width: 100%添加到主容器中。

#main_wrap { 
    width: 100%; 
    max-width:1000px; 
    .... 
} 

的jsfiddle：http://jsfiddle.net/robcabrera/D262Z/

Answer 3

表和DIV不具有相同的行爲。 如果你添加css到你的表格：display：block;你會看到它有相同的行爲。但是你會失去表格的行爲。 這解釋了兩個例子之間的區別。