可摺疊柱

Question

我有一個要求。任何人都可以請幫我解決這個問題。

我有一個寬度爲350px的列（td）。如果該列的內容超過，則相鄰列的值將被推向右側。所以我想實現一個可摺疊的列（顯示/隱藏）。該列應該只顯示適合350px寬度的內容，並且當在該列中單擊「show」鏈接時應該顯示其餘內容。我怎樣才能做到這一點？

我沒有遇到任何符合我的要求的例子。請幫忙..

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>