asp.net - Hiding one td and collapse other td in row for not showing space between the tds (auto merge) -

code snippet:

<td><center> <asp:imagebutton id=imgmanagord runat="server" imageurl="images/manageorders.jpg"></asp:imagebutton></center></td> <td><center> <asp:imagebutton id=imgstockorder runat="server" imageurl="images/stockorder.jpg">    </asp:imagebutton></center></td> <td><center> <asp:imagebutton id=imgadmin runat="server" imageurl="images/admin.jpg">    </asp:imagebutton></center></td> <td><center> <asp:imagebutton id=imgcontact runat="server" imageurl="images/contact.jpg">    </asp:imagebutton></center></td> 

i hiding specific td codebehind depending upon permission , have not specify width of these tds respectivly.

so result there odd spaces between final tds. please find images : all tds:

few td hidden:

please tell how can align resulted tds in row without showing spaces between.

you have markup this:

<tr> <td><imagebutton id="img1">..</imagebutton></td> <td><imagebutton id="img2">..</imagebutton></td> <td><imagebutton id="img3">..</imagebutton></td> <td><imagebutton id="img4">..</imagebutton></td> <tr> 

and hide 1 of imagebuttons codebehind. i.e.

   img2.visible=false 

so produces markup this:(say hide 2nd imagebutton)

<tr> <td><imagebutton id="img1">..</imagebutton></td> <td></td> <td><imagebutton id="img3">..</imagebutton></td> <td><imagebutton id="img4">..</imagebutton></td> <tr> 

that means, td holding imagebutton never removed, there, , hence space.

you should hide td instead of hiding imagebuttons

so give id tds , runat="server" attribute. , grab them codebehind , set visible =false;

or this:

  td1.attributes.add("class","hide"); //where td1 id of td 

where .hide css class in stylesheet or designer this:

.hide {    display:none; }