HTML table keep the same width for columns

Question

I have a table with several groups of columns  The table is larger than my page  so I have a control to show hide some of these groups to fit on the page  The initial table looks good  all columns are about the same width within a group  But when I hide a group  the columns are not the same width anymore  and it looks bad   Example  http   www reviews-web-hosting com companies apollohosting html  broken link   So far  the table looks fine  Click on     The first column under  Ecommerce Pro  is much wider than the other columns under  Ecommerce Pro   it looks odd  Click on  lt  lt   this time the first column under  Value  is too wide  At least on Firefox   I ve tried to use    lt colgroup gt  lt col   gt  lt col span  5    gt       but no luck  If I set a col to style  display  none   the set of columns is still displayed   Any HTML CSS tip to keep the columns with the same width withing a group   Edit    to hide a column  I have to use visibility  collapse it seems to be resizing well now  I do not know why

User · Answer

In your case  since you are only showing 3 columns   Name    Value       Business   or Name    Business    Ecommerce Pro   why not set all 3 to have a width of 33 3   since only 3 are ever shown at once  the browser should render them all a similar width

User · Answer

If you set the style table-layout  fixed  on your table  you can override the browser s automatic column resizing  The browser will then set column widths based on the width of cells in the first row of the table  Change your  lt thead gt  to  lt caption gt  and remove the  lt td gt  inside of it  and then set fixed widths for the cells in  lt tbody gt

User · Answer

give this style to td  width  1

User · Answer

well  why don t you  get rid of sidebar and  squeeze the table so it is without show hide effect  It looks odd to me now  The table is too robust  Otherwise I think scunliffe s suggestion should do it  Or if you wish  you can just set the exact width of table and set either percentage or pixel width for table cells

[html] HTML table: keep the same width for columns

Examples related to html

Examples related to css