How do I get a html tables column resizing to emulate a windows forms datagridview

StackOverflow https://stackoverflow.com/questions/12302424

Question

Here is my dilemma; I have on my page a table as such:

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

Also I am dynamically adding panels to pnlLeftContent and setting there width to 100%.

When collapsed, the left (title="Navigation") column looks perfect. When expanded, and when my browser is maximized, there is empty space between the pnlLeftContent panel and the usercontrol. Turning on the table borders indicated that the space was in the "Navigation" column between the left hand bounds of the pnlLeftContent and the left hand bounds of the "Navigation" column.

What I want is for the left hand column to fit to contents and the right hand column of my table to take up the remainder of the space. In a windows forms datagridview I would accomplish this by setting the AutoSizeMode of the left column to AllCells and the AutoSizeMode of the right column to Fill.

How do I accomplish the same thing with an html table? Or is there a better way of handling a horizontal CollapsiblePandelExtender to show side by side with other controls?

Any help would be greatly appreciated.

Was it helpful?

Solution 2

found the solution thanks to:

How do I make one table column fill all the spare horizontal space?

Long story short, i set the column containing my user control to a width of 99%. It looks messed up in the designer but once all the dynamically added panels are added to pnlLeftContent it works perfect.

thanks Ranata

OTHER TIPS

I would set cellspacing="0"

Also add a td for the pnleft and user control then make those a sub table.

It would be easier with css and div's, but tables work to even though styling becomes a pain.

td width="25%"

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

also I would use jquery ( .slide ) to uncollapse instead of a server control. much easier jquery slide div[1]

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top