html - 为什么忽略列宽？

Question

为什么这里忽略了列宽？

http://jsfiddle.net/dimskraft/M4Hn5/

<table class="menu">
    <colgroup>
        <col style="width:50%"/>
        <col style="width:50%"/>
    </colgroup>
    <tr>
        <td>ORION</td>
        <td>
            <table>
                <tr>
                    <td>Home</td>
                    <td>About</td>
                    <td>Subscribe</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS

body {
    font-family: Arial, Helvetica, serif;
    color: darkgray;
    background-color: gray;
    font-size: 12px;
}
h1 {
    color: black;
    font-size: 14px;
}
table 
{
    width: 900px;
}
table.menu td {
    height: 100px;
    background-color: white;
}

Answer 1

在你的 CSS 中，你有 table { width: 900px; }，但是在 TD 中你有一个嵌入式表。该表也被设置为 900px，这会将其父 TD 拉伸(stretch)为 .menu 表的整个宽度。将那部分 CSS 更改为 table.menu { width: 900px; }