table-layout: fixed ignores td's min-width

salonMonsters picture salonMonsters · Aug 11, 2011 · Viewed 18.3k times · Source

I have a project which requires a table that includes both fixed-width and flexible-width columns.

Some of the columns need to be 80px in width always, no matter what the width of the browser.

The rest of the columns need to be a flexible width, but all be of equal width, with a min-width of 75px;

By adding table-layout:fixed; to the table I am able to get the flexible width cols to all have equal widths, BUT then the table ignores the td's min-width attribute.

If I remove the table-layout:fixed, the min-width works but the flexible width cols all have different widths (based upon the length of the text they contain).

The number of columns vary based upon data pulled from db.

I have put an example of the table with table-layout:fixed and min-width on jsfiddle: http://jsfiddle.net/7d2Uj/

Any ideas how to get min-width to work in this situation, or why this is occurring?

Answer

tterrace picture tterrace · Aug 3, 2012

My workaround for this was to squeeze the table to where the columns almost overlap, check the table width at that point, and set the min-width of the <table> element itself to that value. This technique is also useful if you have fixed layout with one expandable column because otherwise the expanding column would completely disappear as the window shrinks.

Ex: http://jsfiddle.net/KTCfs/