css - 折りたたみ可能な列

Question

私には要件があります。誰でもこれを解決するのを手伝ってくれませんか。

幅350pxの列(td)があります。その列の内容が超えている場合、隣接する列の値が右に押し出されています。そのため、折りたたみ可能な列 (表示/非表示) を実装しようとしています。列には 350 ピクセルの幅に収まるコンテンツのみを表示し、残りのコンテンツはその列の [表示] リンクをクリックしたときに表示する必要があります。どうやってやるの？

私の要件を満たす例は見つかりませんでした。助けてください..

Answer 1

以下は私のコードの一部です。2 番目の 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>