html - 防止表格换行

Question

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

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

我的 aspx-tablerow:

<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被包裹起来了:

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

编辑:一个也在包装的简化样本:

<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" 使表格成为内联元素。下一个问题是我在通常呈现为 Div 的 UserControl 中使用了 ASP.Net UpdatePanel。因此，导致我的表换行的下一个 block 元素。我只需要设置 UpdatePanel's RenderMode Inline 是什么导致它呈现为 Span。

Answer 1

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

非常丑陋，但它应该可以工作。

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