防止表格换行

Question

当表格位于外部表格单元格内时，如何防止表格换行？

看看我的问题底部的简化示例。

我的 aspx 表格行：

<tr runat="server" id="trButtons">
  <td align="left" colspan="9" valign="top" style="white-space:nowrap"><br />
     <asp:Button ID="btnImeiLookup" OnClick="btnImeiLookupClick" runat="server" ValidationGroup="VG_RMA_LOOKUP" CausesValidation="true"   Text="lookup IMEI" ToolTip="lookup IMEI and check if RMA-Number can be generated" Width="120px"  />
    &nbsp;&nbsp;<asp:Button ID="BtnEdit" CommandName="Edit" CommandArgument='<%# Eval("idRMA")%>' ValidationGroup="VG_RMA_SAVE"  runat="server" CausesValidation="false"  Text="Edit" ToolTip="edit" Width="120px"  />
    &nbsp;&nbsp;<asp:Button ID="BtnAdd" runat="server"   CommandName="Add" CausesValidation="false" Text="Add new" Width="130px"  ToolTip="add new"  />
    &nbsp;&nbsp;<asp:Button ID="BtnDelete" runat="server"   CommandName="Delete" CommandArgument='<%# Eval("idRMA")%>' CausesValidation="true" Text="Delete" Width="120px"  ToolTip="delete" OnClientClick="return confirm('do you really want to delete this RMA?')" />
    &nbsp;&nbsp;<uc4:RmaPrinterView ID="RmaPrinterView1" Visible="true" runat="server" />
  </td>
</tr>

RmaPrinterView1 是一个 ASP.Net 用户控件：

<table cellpadding="0" cellspacing="0">
<tr>
    <td>
        <input type="button" style="width:120px; white-space:nowrap" onclick="javascript:$('#TblPrinterView').jqprint();" value="Print" title="Print" />
    </td>
</tr>
<tr>
    <td>
        <table id="TblPrinterView" style="display:none">
            <tr>
                <td style="width:100px;white-space:nowrap">
                    <asp:Label ID="LblRmaNumberDesc" runat="server" Text="RMA-Number:"></asp:Label>
                </td>
                <td>
                    <asp:Label ID="LblRmaNumber" runat="server" Text="xxxxxxxxxxxxxx"></asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="LblImeiDesc" runat="server" Text="IMEI:"></asp:Label>
                </td>
                <td>
                    <asp:Label ID="LblImei" runat="server" Text="xxxxxxxxxxxxxx"></asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="LblModelDesc" runat="server" Text="Model:"></asp:Label>
                </td>
                <td>
                    <asp:Label ID="LblModel" runat="server" Text="xxxxxxxxxxxxxx"></asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="LblSiDpyDesc" runat="server" Text="SI/DPY:"></asp:Label>
                </td>
                <td>
                    <asp:Label ID="LblSiDpy" runat="server" Text="xxxxxxxxxxxxxx"></asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="LblSymptomCodesDesc" runat="server" Text="Symptoms:"></asp:Label>
                </td>
                <td>
                    <asp:Label ID="LblSymptomCodes" runat="server" Text="xxxxxxxxxxxxxx"></asp:Label>
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>

如你所见，带有内表的 Usercontrol 被包裹起来了：

我知道我应该避免使用表格布局，但我需要一个快速工作的解决方案 ;-)

EDIT：一个简化的示例，也是包装：

<table>
   <tr>
      <td style="white-space:nowrap">
        <input type="button" value="b1" />&nbsp;
        <input type="button" value="b2" />&nbsp;
        <input type="button" value="b3" />&nbsp;
        <table>
          <tr>
            <td style="white-space:nowrap"><input type="button" value="in table" /></td>
          </tr>
        </table>
     </td>
   </tr>                     
</table>

更新：
正如 Jeroen 所提到的，解决方案是使表格成为带有style="display: inline" 的内联元素。下一个问题是我在 UserControl 中使用了一个 ASP.Net UpdatePanel，它通常呈现为一个 Div。所以下一个导致我的表格换行的块元素。我只需要将 UpdatePanel's RenderMode 设置为 Inline ，这会导致它呈现为 Span。

Answer 1

如果 css white-space 不起作用，您可以尝试将 nowrap="nowrap" 添加到您的 td，就像您添加 valign="top" 一样。

非常难看，但应该可以。

编辑：啊，现在我明白了：表格是块级元素，所以它总是会换行，除非您将其设为内联元素或浮动它。

Answer 2

table tr td {
    white-space: nowrap;
}

Answer 3

你已经把桌子和它自己弄得不一样了。它设置为有限像素数，但一旦超出，您不想换行。您可以尝试：

white-space: nowrap;
overflow: hidden;