为什么忽略列宽？

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拉伸为.menu表的整个宽度。将CSS的该部分更改为table.menu { width: 900px; }