Prevent Table Resizing

Question

I'm working on a web page where I have a dynamically generated table where certain columns should be of variable width (sizing to the text) and certain columns must always be a specific width. However, the table is inside of a containing div, and firefox is resizing the table such that it stays within the confines of the div. The trouble is, it resizes the columns that must remain a specific width.

Is there any way to force those columns to remain the same size, thus forcing the table to overflow from the div? The div has overflow: auto, which allows you to still see the table, and this is the effect that I am trying to achieve.

Thanks.

Answer 1

You might try styling it with overflow: visible; You could also try floating it, but that opens a whole other can of worms that you probably don't want.

Answer 2

I have several encounters with this problem, I couldn't find a best way to have what I want to display to be displayed/aligned to my needs. Especially so for width of the columns with dynamic text.

Instead of tackling it head-on, I use another approach. I tried to limit the number of characters (variable font-wdith still an issue, need to tweak around) to be displayed on a fixed width column. I'll then add tooltip (via title attribute or tooltip plugins) when mouseover those truncated text.

This is not a direct answer to your requirement, just offering another alternative.