防止表格纏繞

如何防止表格在外表格單元格內纏繞？防止表格纏繞

看看我的問題底部的簡化示例。

我的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>

正如你所看到的，與內表中的用戶控件包裝：

alt text

我知道我應該空隙表的佈局，但我需要快速工作溶液;-)

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>

UPDATE：
溶液 - 如提到的Jeroen - 是要使該表成爲style="display: inline"的內聯元素。接下來的問題是我在UserControl中使用了一個ASP.Net UpdatePanel，它通常以Div的形式呈現。所以導致我的表格換行的下一個塊元素。我只需要設置UpdatePanel's RenderMode到Inline是什麼導致它被渲染爲跨度。

來源

2010-12-07 Tim Schmelter

也許你可以設置`style =「min-width：...」`？可能很難確切地知道要放入什麼寬度，但它可能適用於您的情況。 – 2010-12-07 17:08:23

如果CSS white-space不工作，你可以嘗試添加nowrap="nowrap"您td，就像你加入valign="top"。

非常難看，但它應該工作。嗯，現在我明白了：表格是一個塊級別的元素，所以它會一直到一個新的行，除非你使它成爲一個內聯元素或浮動它。

來源

2010-12-07 16:35:29 jeroen

謝謝，但這也行不通。無論是將其添加到外表的單元格還是將其添加到內部表格的單元格時。我在問題的最後添加了一個簡化的問題示例。 – 2010-12-07 16:44:55

table tr td { 
    white-space: nowrap; 
}

來源

2010-12-07 16:31:08

這已經存在了...... – jeroen 2010-12-07 16:36:35

謝謝，但是正如Jeroen所提到的那樣，我已經將它添加到了單元格的樣式中，但它不起作用。我在問題的最後添加了一個簡化的問題示例。 – 2010-12-07 16:47:21

你已經把表格與自己對齊。它被設置爲有限的像素數量，但你不想一旦超過就打包。你可以嘗試：

white-space: nowrap; 
overflow: hidden;

來源

2010-12-07 17:14:14

防止表格纏繞

回答

相關問題