Page 1 of 1

Variable height, scrolling tbody [SOLVED]

Posted: Thu Apr 08, 2010 7:47 pm
by amh1010
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:

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>

Re: Variable height, scrolling tbody

Posted: Thu Apr 08, 2010 9:20 pm
by amh1010
OK, I got it working in Firefox, but IE8 and Chrome don't display the scrollbar. Here's how it works:

1) I generate an array that keeps track of the number of rows for each "group" (each "group" has its own tbody tag).
2) If the number of rows for a group exceeds 20, then I declare a CSS class for that group's tbody. If it does have more than 20 rows, there isn't a class for that tbody.
3) Here is the CSS code for the class that makes the tbody scrollable:

Code: Select all

.scrollprops{
   height:420px;
   overflow-y: scroll;
   overflow-x: hidden;
}
So it works perfectly in Firefox, but not in IE8 or Chrome. Anyone have any ideas?

Re: Variable height, scrolling tbody

Posted: Fri Apr 09, 2010 10:37 am
by pickle
I don't believe overflow-y and overflow-x are standardized properties, just overflow.

Re: Variable height, scrolling tbody

Posted: Fri Apr 09, 2010 12:51 pm
by kaszu
I would write it like this:

Code: Select all

   overflow: auto; //will show scrollbar if needed, otherwise not
   overflow-x: hidden;
This should work in most major browsers including IE8 and Chrome. At least it was last time I was using it.

Re: Variable height, scrolling tbody

Posted: Sat Apr 10, 2010 1:41 am
by amh1010
Ugh, still not working. I didn't realize how much IE sucked until I started designing sites.