-1

這是我的兩難困境;我有我的頁面上表中列示:如何獲取html表格列調整大小以模擬windows窗體datagridview

<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%。

摺疊時,左側(標題=「導航」)列看起來很完美。展開後,當瀏覽器最大化時,pnlLeftContent面板和usercontrol之間會有空白區域。打開表格邊框表示該空間位於pnlLeftContent的左側界限和「導航」列的左側界限之間的「導航」列中。

我想要的是讓左邊的列適合我的表格的內容和右邊的列來佔據剩餘的空間。在windows窗體datagridview中,我將通過將左列的AutoSizeMode設置爲AllCells並將右列的AutoSizeMode設置爲Fill來實現此目的。

我該如何用html表格完成同樣的事情? 還是有更好的方式來處理水平CollapsiblePandelExtender與其他控件並排顯示?

任何幫助將不勝感激。

+0

的[我如何使一個表列填滿所有空閒的水平空間?(可能的複製https://stackoverflow.com/questions/7138605/how-do-i-make-one - 表列 - 填充 - 所有的備用水平空間) –

回答

1

我會成立CELLSPACING =「0」

另外添加一個TD爲pnleft和用戶控制然後使這些子表。

css和div的使用會更容易,但即使造型變得很痛苦,表格也可以工作。

TD寬度= 「25%」

TD寬度= 「75%」 表 TR TD ... pnlLeftContent TD .... UC

也我會使用jquery (.slide),而不是服務器控件。容易得多 jquery的滑動DIV [1]

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

相關問題