How to maintain table row height in scrolling window - Firefox?

Question

I have a html table with static headers. The rest of the body scrolls within a fixed size window. (Using overflow:scroll; height:550px; overflow-x:hidden; for the tbody )

When the number of rows is less than what fits in the scrolling window, the row size automatically expands to fill the entire scroll window. How do I "disable this"?

For example, with only 1 row in the table, the height of that one row becomes (gigantic) the height of the scrolling window.

How do I maintain the original row height, even is it is the only row in the scrolling window? I attempted to use the CSS height property for all <td>but it didn't take.

(FYI - In IE, the original row size is kept.)

Any suggestions?

Thanks

Answer 1

Use the min-height css option. You'll have to do a bit of hacking to make it work in IE6 (mostly just do an underscore hack for height "_height:XXpx").

Answer 2

Aren't you confusing the both browsers with each other? It works flawlessly in FF, but the problems you describe are recognizeable as from IE. It doesn't support an overflow on the tbody that way. There are however (nasty) workarounds/hacks to get this to work in all of the current browsers, including IE:

• Google: "scrollable table with fixed header"
• Stackoverflow: "scrollable table with fixed header"

Edit: as turns out from your comments, you're already using a workaround for this and you thus have problems in FF? Well, I would try another workaround/hack then. For example this or this. Only ensure that you're using the right (strict) doctype.

Answer 3

Did you ever solve this problem, I have exactly the same issue. In ff when you only have 1 row it expands to with the table height.