접을 수있는 칼럼

Question

나는 요구 사항이있다. 누구든지이 문제를 해결할 수 있도록 도와주세요.

나는 폭 350px의 열 (td)을 가지고 있습니다. 해당 열의 내용이 초과되면 인접 열의 값이 오른쪽으로 푸시됩니다. 그래서 축소 가능한 열 (표시/숨기기)을 구현하려고합니다. 해당 열은 350px 너비에 맞는 내용 만 표시하고 나머지 열은 해당 열에서 "표시"링크를 클릭 할 때 표시되어야합니다. 내가 어떻게 할 수 있니?

내 요구 사항을 충족시키는 예를 발견하지 못했습니다. 제발 도와주세요 ..

Answer 1

다음은 내 코드의 일부입니다. 두 번째 td에 접을 수있는 열을 구현하려고합니다.

<table style="width:760px; line-height: 25px; font-weight:bold; padding:8px; margin-top: 3px; margin-bottom: 3px;" cellpadding="0" cellspacing="0"> 
         <tr> 
          <td style="border-top: 1px dotted #0A7A48; border-bottom: 1px dotted #0A7A48; "> 
           <table style="width:760px; line-height: 25px; font-weight:bold;" cellpadding="0" cellspacing="0"> 
            <tr> 
             <td style="width:60px; text-align:left; color:#000; padding-left: 3px;"> Qty </td> 
             <td style="width:390px; text-align:left; color:#000;"> Part#/Description </td> 
             <td style="width:210px; text-align:left; padding-left: 3px; color:#000;"> Manufacturer </td> 
             <td style="width:50px; color:#000;"><span style="width:48px;"> &nbsp; </span></td> 
            </tr> 
           </table> 
          </td> 
         </tr> 
        <tr><td> 

         <s:iterator value="readQuoteList" var="entry"> 
          <s:iterator value="#entry.value" var="arrayList"> 
           <table style="width:760px; line-height: 25px; font-weight:bold;" cellpadding="0" cellspacing="0"> 
            <tr> 
             <td style="width:60px; text-align:left; padding-left: 3px;"><s:property value="qtyordered"/></td> 
             <td style="width:390px; text-align:left; padding-left: 3px;"><s:property value="shortDesc"/></td> 
             <td style="width:210px; text-align:left; padding-left: 30px;"><s:property value="manufacturerName"/></td> 
             <td style="width:50px; color:#0A7A48; float: right;"><a style="cursor: pointer;" onclick="removeItem('<s:property value="#entry.key"/>')">Remove</a></td> 
            </tr> 
           </table> 
          </s:iterator> 
         </s:iterator> 

        </td></tr> 
        <tr><td align="center"> 
         <table cellpadding="0" cellspacing="0"><tr> 
          <td style="padding-right:5px;"><a class="productDetailbutton" style="text-decoration:none; float: right; cursor:pointer;" onclick="saveHashListItm();"> 
     <span id="saveHashListItm">Save List</span></a></td> 
          <td><a class="productDetailbutton" style="text-decoration:none; float: right; cursor:pointer;" onclick="removeAllItem()"> 
     <span>Remove</span></a></td> 
         </tr></table> 
        </td></tr> 
       </table>