Variable height, scrolling tbody [SOLVED]

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
amh1010
Forum Newbie
Posts: 19
Joined: Sat Feb 06, 2010 1:49 pm

Variable height, scrolling tbody [SOLVED]

Post 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>
Last edited by amh1010 on Mon Apr 12, 2010 1:10 am, edited 2 times in total.
amh1010
Forum Newbie
Posts: 19
Joined: Sat Feb 06, 2010 1:49 pm

Re: Variable height, scrolling tbody

Post 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?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Variable height, scrolling tbody

Post by pickle »

I don't believe overflow-y and overflow-x are standardized properties, just overflow.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Variable height, scrolling tbody

Post 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.
amh1010
Forum Newbie
Posts: 19
Joined: Sat Feb 06, 2010 1:49 pm

Re: Variable height, scrolling tbody

Post by amh1010 »

Ugh, still not working. I didn't realize how much IE sucked until I started designing sites.
Post Reply