如何使最终的 TD 元素完全用完剩余的所有宽度？

Question

我发现了这个问题：How do I get the rightmost column to fill the remaining space?

这似乎基本上正是我想要的。但是，我的布局没有按预期显示。

我的部分页面如下所示：

<table id="Header" width="100%" cellspacing="0" cellpadding="0" border="0" class="clsBorderColor" style="LEFT:10px; POSITION:relative; TOP:10px;">
 <tr>
  <td colspan="4" >
   <table id="SearchParams" cellspacing="0" cellpadding="1" border="0" style="width:100%" class="clsBorderColor">
    <!-- A few rows and an ASP panel containing another row -->
   </table>
  </td>
 </tr>

 <tr>
  <td colspan="4">
   <table id="DisplayOptions" width="100%" border="0" cellpadding="1" cellspacing="0" class="clsBorderColor">
    <tr>
     <td valign="middle" style="width:auto;">
      <asp:label id="lblRecordsCnt" runat="server" Font-Bold="True" Font-Size="X-Small">Records: </asp:label>
     </td>
     <td valign="middle" align="left" style="width:auto;">
      # of records per page <asp:textbox id="txtNoOfRecords" tabIndex="7" CssClass="clsTextBox40" Runat="server"></asp:textbox>
     </td>
     <td valign="middle" style="white-space:nowrap;width:auto;">
      <asp:button id="cmdRefresh" tabIndex="8" runat="server" Text="Refresh" tooltip="Refresh"></asp:button>
     </td>
     <td valign="middle" style="white-space:nowrap;width:225px;" align="right">
      <asp:button id="cmdSearch" cssclass="clsButton60" runat="server" Text="Search" tooltip="Search"></asp:button>
      <input type="button" id="cmdClose" class="clsButton60" onclick="javascript:mfpOpenPopup('Default','foo');return false;" value="Close" title="Close" />
     </td>
     <td style="width:100%;white-space:nowrap;"></td>
    </tr>
   </table>
  </td>
 </tr>
</table>

（我不想这么说，但<table id="Header"> 实际上包含在另一个<table id="Body"> 中，它具有所有相同的属性和值。这就是为什么SearchParams 和DisplayOptions 都在<td colspan="4"> 标签内.)

在 Visual Studio 的设计视图中，它显示的非常接近我想要实现的目标：

但是当我在 IE11 中浏览它时，我得到了这个：

空的<td style="width:100%;white-space:nowrap;"></td> 元素将行的其余部分抹去。我尝试为所有前面的<td> 标签指定硬编码值，但最终结果是相同的。我还删除了white-space:nowrap，这似乎也没有什么不同。

如何使此表使用父表的整个宽度，更具体地说，如何使最终的 <td> 元素用尽前面元素不需要的任何东西？

Answer 1

white-space:nowrap 从字面上防止可以应用于您不想“弄脏”的列上的换行。删除该行中的所有宽度，并将该嵌套表中的最后一列的宽度设置为 100%，并在其他列上应用 no-wrap...

    <tr>
        <td colspan="4">
            <table id="DisplayOptions" border="0" cellpadding="1" cellspacing="0" class="clsBorderColor">
                <tr>
                    <td valign="middle" style="white-space: nowrap;">
                        <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="X-Small">Records: </asp:Label>
                    </td>
                    <td valign="middle" align="left" style="white-space: nowrap;"># of records per page
                        <asp:TextBox ID="Textbox1" TabIndex="7" CssClass="clsTextBox40" runat="server"></asp:TextBox>
                    </td>
                    <td valign="middle" style="white-space: nowrap;">
                        <asp:Button ID="Button1" TabIndex="8" runat="server" Text="Refresh" ToolTip="Refresh"></asp:Button>
                    </td>
                    <td valign="middle" style="white-space: nowrap;" align="right">
                        <asp:Button ID="Button2" CssClass="clsButton60" runat="server" Text="Search" ToolTip="Search"></asp:Button>
                        <input type="button" id="cmdClose" class="clsButton60" onclick="javascript: mfpOpenPopup('Default', 'foo'); return false;" value="Close" title="Close" />
                    </td>
                    <td style="width: 100%;"></td>
                </tr>
            </table>
        </td>
    </tr>