Comment puis-je obtenir un redimensionnement de la colonne des tables html pour émuler une vue de données de formulaires Windows

Question

Voici mon dilemme; J'ai sur ma page une table en tant que telle:

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

Aussi je suis d'ajouter dynamiquement des panneaux à pnlLeftContent et la mise en largeur il à 100%. Quand elle est réduite, la colonne de gauche (title = "Navigation") est parfaite. Lorsque développé, et lorsque mon navigateur est agrandi, il existe un espace vide entre le panneau pnlLeftContent et le contrôle usercontrol. Activer les bordures de table indique que l'espace se trouvait dans la colonne "Navigation" entre les limites gauches du pnlLeftContent et les limites gauches de la colonne "Navigation".

Ce que je veux, c'est que la colonne de gauche corresponde au contenu et la colonne de droite de ma table pour occuper le reste de l'espace. Dans une fenêtre datagridview de formulaires, j'accomplirais ceci en réglant le AutoSizeMode de la colonne de gauche sur AllCells et le AutoSizeMode de la colonne de droite sur Fill.

Comment faire la même chose avec une table html? Ou existe-t-il une meilleure façon de gérer un CollapsiblePandelExtender horizontal pour afficher côte à côte avec d'autres contrôles?

Toute aide serait grandement appréciée.

Answer 1

trouvé la solution grâce à:

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

Longue histoire courte, je mis la colonne contenant mon contrôle utilisateur à une largeur de 99 % Il semble foiré dans le concepteur mais une fois que tous les panneaux ajoutés dynamiquement sont ajoutés à pnlLeftContent cela fonctionne parfaitement.

grâce Ranata

Answer 2

Je mettrais cellspacing = « 0 »

ajouter également un td pour le contrôle de pnleft et l'utilisateur puis faire les une table secondaire. Ce serait plus facile avec css et div's, mais les tableaux fonctionnent même si le style devient douloureux.

td width = "25%"

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

aussi je voudrais utiliser jquery (.slide) pour ne pas réduire au lieu d'un contrôle serveur. beaucoup plus facile jquery slide div [1]

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