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 Usercontrol：

<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被包装：

alt text

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

编辑：还包装的简化示例：

<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;

防止表包装

3 个答案: