2010-12-07 14 views
1

외부 테이블 셀 안에있을 때 테이블의 줄 바꿈을 방지하려면 어떻게합니까?테이블에서 줄 바꿈을 방지합니다.

내 질문의 맨 아래에있는 간단한 예를 살펴보십시오.

내 영문-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> 

UPDATE을 : : 또한 포장하는 간단한 예제 : 빈 테이블 레이아웃,하지만 난 빠른 작업 솔루션 ;-)

편집 필요
솔루션 - 제론가 언급 한 바와 같이 - 테이블을 style="display: inline" 인라인 요소로 만드는 것이 었습니다. 다음 문제는 일반적으로 Div로 렌더링되는 UserControl 내부에서 ASP.Net UpdatePanel을 사용한다는 것이 었습니다. 그래서 내 테이블을 감싸는 다음 블록 요소. UpdatePanel's RenderModeInline으로 설정하면 스팬으로 렌더링됩니다. CSS를 white-space가 작동하지 않는 경우

+0

아마도'style = "min-width : ..."'를 설정할 수 있습니까? 정확하게 입력 할 너비를 알기는 어려울 수 있지만 귀하의 경우에는 효과가있을 수 있습니다. –

답변

3

, 당신은 당신이 valign="top"을 추가처럼, 당신의 tdnowrap="nowrap"를 추가 할 수 있습니다.

매우 못 생겼지 만 작동해야합니다.

편집 : 아, 이제 알겠습니다 : 테이블은 블록 수준 요소이므로 인라인 요소로 만들거나 플로트하지 않는 한 항상 새로운 행으로 이동합니다.

+0

감사합니다. 그러나 이것도 작동하지 않습니다. 외부 테이블의 셀에 추가하거나 내부 테이블의 셀에 추가 할 때도 마찬가지입니다. 내 질문이 끝날 때까지 문제의 간단한 예를 추가했습니다. –

+0

@Tim Schmelter, 내 편집 된 답변보기. – jeroen

+1

인라인 요소를 만들어 주셔서 감사합니다. '

' –

1
table tr td { 
    white-space: nowrap; 
} 
+0

그건 이미 있습니다 ... – jeroen

+0

Jeroen이 언급 한대로 고맙습니다. 이미 셀 스타일에 추가 했으므로 작동하지 않습니다. 내 질문이 끝날 때까지 문제의 간단한 예를 추가했습니다. –

0

테이블을 자신과 승산했습니다. 그것은 유한 픽셀 카운트로 설정되어 있지만 초과 한 번 감싸고 싶지는 않습니다. 시도 할 수도 있습니다 :

white-space: nowrap; 
overflow: hidden; 
+0

감사합니다. Jeroen의 팁으로 만 인라인 요소가 작동합니다. '

' –

관련 문제