css - 如何使用CSS调整表格第一个单元格的宽度

Question

我有一个 html 结构，如下所示。

<style>
.divcontainer
{
    width:100%

}
.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}  

</style>
<div class="divcontainer">
    <table width="100%">
        <tr>
            <td valign="top">
                <div class="left_menu">
                    1
                </div>
            </td>
            <td>
                <div>
                    2</div>
            </td>

        </tr>
    </table>
</div>

我需要创建一个如下图所示的结构

但我不想将样式应用到 TD。 td 的宽度应通过应用于子 div 的类进行调整。简而言之，我的第一个 td 应该占据 tr 的 25%，第二个应该占据剩余的 75%。任何人都可以阐明如何做到这一点吗？

Answer 1

你可以为第二个 td 设置一个 hudge width。然后它将采用最大宽度可用并且首先 td 将缩小到其内容。 http://jsfiddle.net/f5q3E/

基本上这里你需要设置:

td {
    background:red;
}
td+td {
    width:100%;
    background:blue;
}

第一个 td 将调整其内容和大小的 div(如果有)，第二个 td 将使用剩余空间。