html - 防止 table 被包裹

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

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

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

最佳答案

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

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

编辑: 啊，现在我明白了:表是一个块级元素，所以它总是会转到一个新行，除非你使它成为一个内联元素或 float 它。

关于html - 防止 table 被包裹，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4378829/