html - 将 TD 扩展到最大可用宽度

Question

我有一个TextBox和一个Button。我把它们放在 a 的第一行内table。我想要的是Button固定在 60px 并TextBox占用其余空间。第二行table有一个TreeView应该扩展到全table宽。这是我尝试过的：

<div class="leftCol">
    <table style="width: 100%;">
        <tr>
            <td>
                <asp:TextBox runat="server" Width="100%" CssClass="FilterTextBox" />
            </td>
            <td>
                <asp:Button runat="server" Width="60" Text="Filter" ID="btnFilter" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:TreeView runat="server" Height="100%" Width="100%" CssClass="leftTreeView" />
            </td>
        </tr>
    </table>
</div>

这是简单的CSS：

.FilterTextBox
{
   display: block;
   width: 100%;
   height: 100%;
}

TreeView看起来不错，但TextBox似乎没有扩展到div（减去按钮的宽度）的全宽。

Answer 1

将包含按钮的 TD 宽度设置为 60，另一个单元格将占用其余空间。

<div class="leftCol">
 <table style="width: 100%;">
    <tr>
        <td>
            <asp:TextBox runat="server" Width="100%" CssClass="FilterTextBox" />
        </td>
        <td width="60">
            <asp:Button runat="server" Width="60" Text="Filter" ID="btnFilter" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <asp:TreeView runat="server" Height="100%" Width="100%" CssClass="leftTreeView" />
        </td>
    </tr>
</table>