-1

这是我的困境；我的页面上有一个这样的表格：

<table border="1" cellspacing="0" width="100%">
    <tr>
        <td width="40px" valign="top" style="background-color:#5d7b9d" height="5px" >
            <asp:Panel runat="server" ID="pnlLeftTitle" Width="40px" BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Center">
                <asp:Image runat="server" ID="imgLeftControl" BorderStyle="None" ImageUrl="~/Images/Collapse.gif" />
            </asp:Panel>
        </td>
        <td valign="top" title="Navigation" rowspan="2">
            <asp:Panel runat="server" ID="pnlLeftContent" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px">
                <asp:Panel ID="pnlLeftTop" runat="server" Width="100%" HorizontalAlign="Right">
                    <asp:LinkButton ID="btnApplyFilter" runat="server" Font-Size="Smaller" CausesValidation="False">Apply Filter</asp:LinkButton>
                    &nbsp;
                    <asp:LinkButton ID="btnClearFilter" runat="server" Font-Size="Smaller" CausesValidation="False">Clear Filter</asp:LinkButton>
                </asp:Panel>
            </asp:Panel>
        </td>
        <td valign="top" title="Order Listing" rowspan="2">
            <uc1:ucOrderListing runat="server" ID="ucOrderListing1" />
        </td>
    </tr>
    <tr>
        <td width="40px" valign="middle" style="background-color:#5d7b9d">
            <asp:Image runat="server" ID="imgLeft" ImageUrl="~/Images/VertWhiteMenu.gif" ImageAlign="Middle" />
        </td>
    </tr>
</table>

<act:CollapsiblePanelExtender runat="server" ID="cpeLeft" AutoCollapse="false" 
    TargetControlID="pnlLeftContent" ExpandedSize="250" ExpandDirection="Horizontal" CollapsedSize="0" 
    CollapsedText="Menu" ExpandedText="Menu" ExpandControlID="pnlLeftTitle" 
    CollapseControlID="pnlLeftTitle" ImageControlID="imgLeftControl" CollapsedImage="~/Images/Expand.gif" 
    ExpandedImage="~/Images/Collapse.gif" >
</act:CollapsiblePanelExtender>

此外，我正在动态添加面板pnlLeftContent并将其宽度设置为 100%。

折叠时，左侧 (title="Navigation") 列看起来很完美。展开时，当我的浏览器最大化时，pnlLeftContent 面板和用户控件之间有空白空间。打开表格边框表示空间位于 pnlLeftContent 的左侧边界和“导航”列的左侧边界之间的“导航”列中。

我想要的是左栏适合内容，而我的桌子的右栏占据剩余空间。在 windows 窗体 datagridview 中，我将通过将左列的 AutoSizeMode 设置为 AllCells 并将右列的 AutoSizeMode 设置为 Fill 来完成此操作。

如何使用 html 表完成相同的操作？还是有更好的方法来处理水平CollapsiblePandelExtender以与其他控件并排显示？

任何帮助将不胜感激。

4

2 回答 2

1

我会设置 cellspacing="0"

还为 pnleft 和用户控件添加一个 td，然后将它们设为子表。

使用 css 和 div 会更容易，但表格可以工作，即使样式变得很痛苦。

td 宽度=“25%”

td width="75%" 表 tr td ...pnlLeftContent td .... uc

我也将使用 jquery ( .slide ) 来展开而不是服务器控件。更简单的 jquery 幻灯片 div[1]

http://designgala.com/how-to-expand-collapse-toggle-div-layer-using-jquery/

于 2012-09-06T14:54:08.330 回答
0

由于以下原因找到了解决方案：

如何让一个表格列填满所有空闲的水平空间？

长话短说，我将包含我的用户控件的列设置为 99% 的宽度。它在设计器中看起来很乱，但是一旦将所有动态添加的面板添加到 pnlLeftContent 中，它就会完美运行。

谢谢拉纳塔

于 2012-09-06T15:41:29.593 回答