Friday, July 31, 2009

How can I make a table column in HTML consume the remainder of the table's width?

I have a table within a CSS layout, inside a DIV. I want the table to consume the width of the DIV, and I want the last column of the table to consume the bulk of that. If I make the table width 100% then it screws up the surrounding CSS layout. I have no way to say that one column should take up the balance of the available table width. If I make that column 100% wide then it crushes other columns to be as narrow as they can possibly be. If I can't find a pure HTML/CSS method then I'll write some nasty javascript but I'd like to avoid that if I can.

How can I make a table column in HTML consume the remainder of the table's width?
manually set the width for cells in the other columns, and the cells without widths should automatically adjust to the remaining width of the table





you could also try seting the width of the cells in the large column to 75% or 50% instead of 100%
Reply:At a guess, I'd say you haven't been specific enough!


You need fix the width/height of your %26lt;div%26gt;. If you


don't do this, then how is the table inside it to know


what its boundaries should be?





Thus,





%26lt;div style="width: 250px;height:250px;"%26gt;


%26lt;table width=100%%26gt;


%26lt;tr%26gt;


%26lt;td%26gt;Col_1%26lt;/td%26gt;


%26lt;td%26gt;Col_2%26lt;/td%26gt;


%26lt;td%26gt;Col_3%26lt;/td%26gt;


%26lt;/tr%26gt;


%26lt;/table%26gt;


%26lt;/div%26gt;





The mind boggles as to why you think some 'nasty javascript' would do what CSS couldn't!





Anyway, HTH.


No comments:

Post a Comment