Variable height, scrolling tbody [SOLVED]
Posted: Thu Apr 08, 2010 7:47 pm
I have a table with multiple tbody tags, each able to scroll individually. My problem is that I have to specify the height to get scrolling to work, but this makes all of the tbody sections the exact same height. Some tbody sections don't have enough rows to require scrolling, but some do.
Basically, I want to have a universal max height for tbody tags. If the height of the tbody exceeds that max height, it should scroll. If it DOESN'T exceed that max height, the height of the tbody should adjust to fit its content.
I tried using max-height, but it doesn't work for me. Thanks for any help
FIXED:
IE has problems using tbody for scrolling. You have to make the stationary "header" and the "body" of the table into separate tables. Surround the "body" table with a div, and use "overflow:scroll."
This should work:
Basically, I want to have a universal max height for tbody tags. If the height of the tbody exceeds that max height, it should scroll. If it DOESN'T exceed that max height, the height of the tbody should adjust to fit its content.
I tried using max-height, but it doesn't work for me. Thanks for any help
FIXED:
IE has problems using tbody for scrolling. You have to make the stationary "header" and the "body" of the table into separate tables. Surround the "body" table with a div, and use "overflow:scroll."
This should work:
Code: Select all
<html>
<style type="text/css">
.scroll{
height:100px;
overflow:scroll;
overflow-x:hidden;
}
</style>
<table>
<tr><td>
<table>
<tr><td>Header1</td><td>Header2</td></tr>
</table>
</td></tr>
<tr><td>
<div class="scroll">
<table>
<tr><td>Cell1</td><td>Cell2</td></tr>
<tr><td>Cell1</td><td>Cell2</td></tr>
<tr><td>Cell1</td><td>Cell2</td></tr>
<tr><td>Cell1</td><td>Cell2</td></tr>
<tr><td>Cell1</td><td>Cell2</td></tr>
<tr><td>Cell1</td><td>Cell2</td></tr>
<tr><td>Cell1</td><td>Cell2</td></tr>
<tr><td>Cell1</td><td>Cell2</td></tr>
<tr><td>Cell1</td><td>Cell2</td></tr>
</table>
</div>
</td></tr>
</table>
</html>