CODEWITHSUNDEEP
htmlcssasp.nethtml-table
dotNET
dotNET

Reputation: 35400

Expand TD to max available width

I have a TextBox and a Button. I put them inside the first row of a table. What I want is to have the Button fixed at 60px and the TextBox to take rest of the space. The second row of this table has a TreeView that should expand to full table width. Here's what I have tried:

<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>

Here's the simplistic CSS:

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

The TreeView appears okay, but the TextBox doesn't seem to expand to full width of the div (minus Button's width).

Upvotes: 1

Views: 10961

Answers (1)

iamredseal
iamredseal

Reputation: 41

set the TD width that contains the button to 60 and the other cell will take up the rest of the space.

<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>

Upvotes: 3

Related Questions