Расширить TD до максимальной доступной ширины

Question

Расширить TD до максимальной доступной ширины

0

У меня есть TextBox и Button. Я помещаю их в первую строку table. Я хочу, чтобы Button зафиксирована на 60 пикселей, а 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 (минус ширина кнопки).

dotNET 25 окт. 2013, в 10:05

Источник

0

Вы пробовали с width:auto ?
Satpal 25 окт. 2013, в 07:17
0

@Satpal: Только что попробовал. Не сработало
dotNET 25 окт. 2013, в 07:18

Теги:

html

css

asp.net

html-table

1 ответ

Ещё вопросы

@Satpal: Только что попробовал. Не сработало

nmynarcik · Answer 1 · 2013-10-25T05-16-00.000Z

установите ширину 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>

Благодарю. Это несколько работает, но ширина текстового поля + кнопки еще не полностью покрывают ширину таблицы.
Я создал этот jsfiddle для тебя. Добавлен border = '1', чтобы показать, что другая ячейка действительно занимает оставшуюся часть промежутка. Можете ли вы опубликовать код после компиляции asp? Может быть, какая-то разметка из текстового поля / кнопки мешает тому, что вы хотите.