-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の左側の境界と「Navigation」列の左側の境界の間の「Navigation」列にあることが示されました。

私が欲しいのは、左側の列をコンテンツに合わせ、テーブルの右側の列が残りのスペースを占めるようにすることです。Windowsフォームのdatagridviewでは、左側の列のAutoSizeModeをAllCellsに設定し、右側の列のAutoSizeModeをFillに設定することでこれを実現します。

HTMLテーブルで同じことをどのように達成しますか？CollapsiblePandelExtenderまたは、他のコントロールと並べて表示するために水平を処理するより良い方法はありますか？

どんな助けでも大歓迎です。

4

2 に答える 2

1

私はcellspacing="0"を設定します

また、pnleftとユーザーコントロールにtdを追加し、それらをサブテーブルにします。

cssとdivの方が簡単ですが、スタイリングが面倒になってもテーブルは機能します。

td width = "25％"

td width = "75％" table 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

おかげで解決策を見つけました：

1つのテーブル列ですべての予備の水平スペースを埋めるにはどうすればよいですか？

簡単に言うと、ユーザーコントロールを含む列を99％の幅に設定しました。デザイナではめちゃくちゃに見えますが、動的に追加されたすべてのパネルがpnlLeftContentに追加されると、完全に機能します。

ありがとうラナタ

于 2012-09-06T15:41:29.593 に答える