What is the cross-browser way to set a max height on a table?

Question

I have a table where I set the height of the tbody

#ml_container table>tbody{ height: 500px; overflow: auto; overflow-x: hidden; }

The issue is that when the table has 1 entry, the 1 entry is 500px high in FF3. I would like the 1 entry to still be 20px (or whatever I specify). Another issue is that Safari doesn't even recognize this 500px setting so the table has no max height. I just want a scrollable table that will display 500px high worth of entries at a time. Any ideas on how to do this?

Answer 1

There's a CSS property max-height. It works in all modern browsers, but not IE6. There's an IE6 workaround requiring a bit of reasonably unobtrusive javascript (http://www.visibilityinherit.com/code/ie6-min-max-height-width.php).

Answer 2

You can't set a fixed or maximum height on any table elements. The height property is only treated as a minimum height.

You can add display: block to your tbody. Since it's no longer one of the table-* display types in that case, that will make it take the height. However, since the tbody is no longer a table-row-group, you'll essentially end up with an implicit table inside it again. So any columns in any other thead, tbody or tfoot elements will no longer line up with that scrollable tbody.

Apart from the column mismatching, though, this does make it almost work in all the latest browsers except IE. You should be able to fix the remaining issues yourself.

I have no idea how to fix it in IE, though. I did come across "Pure CSS Scrollable Table with Fixed Header", but that's rather out-dated, since both of his solutions work in IE6, but break horribly in IE7 and IE8 (in different ways too). They do work in IE's Quirks mode, though, so if you desperately need it, that might be your only option.

Answer 3

Thom had the right idea: use javascript. If the window is big enough where the table would be too big, set a fixed manual height on the table/element. :D