What is the cross-browser way to set the maximum table height?
I have a table where I set the body height
#ml_container table>tbody{ height: 500px; overflow: auto; overflow-x: hidden; }
The problem is when the table has 1 record, 1 record is 500px high in FF3. I would like 1 post to still be 20px (or whatever I specify). Another problem is that Safari doesn't even recognize this 500px setting, so the table doesn't have a maximum height. I just want a scrollable table that will display 500px of high post values at a time. Any ideas on how to do this?
source to share
You cannot set a fixed or maximum height for any table elements. The property height
is only considered a minimum height.
You can add display: block
to your tbody
. Since it is no longer one of the table-*
display types in this case , this will force it to take the height. However, since it is tbody
no longer table-row-group
, you will end up with the implicit table again. This way, any columns in any other element thead
, tbody
or tfoot
will no longer match the scrollable one tbody
.
Aside from the column mismatch, this does work in almost all recent browsers except IE. You must solve the rest of the problems yourself.
I have no idea how to fix this in IE. I came across "Pure Fixed Title CSS Scroll Table" , but this is rather outdated as both solutions work in IE6, but break badly in IE7 and IE8 (in different ways). They do work in IE Quirks mode, however, so if you're desperate for it, this might be your only option.
source to share