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

Question

我有一个 TextBox 和一个 Button。我将它们放在 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 的全宽(减去 Button 的宽度)。

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>