Question

出于某种原因，我无法使用表格元素

继承父级的宽度

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

Table和Div没有相同的行为。如果你将css添加到你的表：display：block;你会发现它有相同的行为。但是你会失去表的行为。这解释了两个例子之间的区别。

Answer 3

你应该将width: 100%添加到主容器中。

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

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

为什么我不能用我的表继承父的宽度？

3 个答案: