css - 可折叠柱

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>