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的全宽（减去按钮的宽度）。

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>

将TD扩展到最大可用宽度

1 个答案: