Greetings, CSSers.
I am back, having spent 8 months in php hell. I now return to the more familiar hell of CSS
For my first drama, this:
I have spent several hours trying to find a solution for a simple table with a fixed header and a table body that scrolls.
This solution almost works:
http://www.siteexperts.com/tips/html/ts04/page1.asp
Alas, it has no way to work full width, as far as I can see. I cannot make the columns size automatically as a normal table would work. Other solutions came close, but broke in various browsers, or needed all sorts of scripting convolutions.
Anyone have a good solution for this, that works with the usual browser suspects?
PS
This worked pretty well, but completely failed on AOL's crappy IE6.whatever browser. Sadly, i can't write them off.
http://www.456bereastreet.com/archive/200410/scrollable_table/
Take a look at this demo
Take a look at this demo from my old site (now defunct—thank you, Portland).
http://web.archive.org/web/20070812190047/garyblue.port5.com/webdev/scrollingtable.html
You might find something you can use.
cheers,
gary
scroll table code
try it.. may be help u...
<table width="448" border="0" cellspacing="0" cellpadding="0" class="tableboder"> <tr> <td width="446" height="200"> <div class="scroll" style=" height:218px; overflow-y: scroll; overflow-x: none; "> <table width="430" border="0" cellspacing="2" cellpadding="3"> <tr> <td width="90" bgcolor="#4185B2" class="txtblackbold"><div align="center">Stock Code </div></td> <td width="155" bgcolor="#4185B2" class="txtblackbold"><div align="center">Product Name </div></td> <td width="80" bgcolor="#4185B2" class="txtblackbold">Internal Code </td> <td width="60" bgcolor="#4185B2" class="txtblackbold"><div align="center">Select</div></td> </tr> <tr class="txtblack"> <td bgcolor="#F1F1F1"><div align="center">EB1001</div></td> <td bgcolor="#F1F1F1"><div align="center">Watch</div></td> <td bgcolor="#F1F1F1"><div align="center">C001</div></td> <td bgcolor="#F1F1F1"><div align="center"> <input type="checkbox" name="checkbox" value="checkbox" /> </div></td> </tr> <tr class="txtblack"> <td bgcolor="#F1F1F1"><div align="center">EB1002</div></td> <td bgcolor="#F1F1F1"><div align="center">Watch</div></td> <td bgcolor="#F1F1F1"><div align="center">C002</div></td> <td bgcolor="#F1F1F1"><div align="center"> <input type="checkbox" name="checkbox2" value="checkbox" /> </div></td> </tr> <tr class="txtblack"> <td bgcolor="#F1F1F1"><div align="center">EB1003</div></td> <td bgcolor="#F1F1F1"><div align="center">Watch</div></td> <td bgcolor="#F1F1F1"><div align="center">C003</div></td> <td bgcolor="#F1F1F1"><div align="center"> <input type="checkbox" name="checkbox3" value="checkbox" /> </div></td> </tr> <tr class="txtblack"> <td bgcolor="#F1F1F1"><div align="center">EB1004</div></td> <td bgcolor="#F1F1F1"><div align="center">Watch</div></td> <td bgcolor="#F1F1F1"><div align="center">C004</div></td> <td bgcolor="#F1F1F1"><div align="center"> <input type="checkbox" name="checkbox4" value="checkbox" /> </div></td> </tr> <tr class="txtblack"> <td bgcolor="#F1F1F1"><div align="center">EB1005</div></td> <td bgcolor="#F1F1F1"><div align="center">Watch</div></td> <td bgcolor="#F1F1F1"><div align="center">C005</div></td> <td bgcolor="#F1F1F1"><div align="center"> <input type="checkbox" name="checkbox5" value="checkbox" /> </div></td> </tr> <tr class="txtblack"> <td bgcolor="#F1F1F1"><div align="center">EB1005</div></td> <td bgcolor="#F1F1F1"><div align="center">Watch</div></td> <td bgcolor="#F1F1F1"><div align="center">C006</div></td> <td bgcolor="#F1F1F1"><div align="center"> <input type="checkbox" name="checkbox6" value="checkbox" /> </div></td> </tr> <tr class="txtblack"> <td bgcolor="#F1F1F1"><div align="center">EB1005</div></td> <td bgcolor="#F1F1F1"><div align="center">Watch</div></td> <td bgcolor="#F1F1F1"><div align="center">C006</div></td> <td bgcolor="#F1F1F1"><div align="center"> <input type="checkbox" name="checkbox6" value="checkbox" /> </div></td> </tr> <tr class="txtblack"> <td bgcolor="#F1F1F1"><div align="center">EB1005</div></td> <td bgcolor="#F1F1F1"><div align="center">Watch</div></td> <td bgcolor="#F1F1F1"><div align="center">C006</div></td> <td bgcolor="#F1F1F1"><div align="center"> <input type="checkbox" name="checkbox6" value="checkbox" /> </div></td> </tr> <tr class="txtblack"> <td bgcolor="#F1F1F1"><div align="center">EB1005</div></td> <td bgcolor="#F1F1F1"><div align="center">Watch</div></td> <td bgcolor="#F1F1F1"><div align="center">C006</div></td> <td bgcolor="#F1F1F1"><div align="center"> <input type="checkbox" name="checkbox6" value="checkbox" /> </div></td> </tr> </table></div> </td> </tr> </table>
Breaks in Opera
Thanks Gary.
That was close, until I got to opera 9+. As the site promised, it breaks completely. Arggggggggh. It is so maddening. Everytime I am ready to dismiss opera, some new client, partner or friend is using it, or some european friend says it's very popular 'over there.' But it's so maddening to work with. FckEditor seems to have given up trying to keep up with their "works now, don't on next release" approach to life. I may too, but I have put so much effort into supporting it, i can't abandon it for a header now. Let me try the next post....
No scrolling header
Thanks Dry
But your solution has the scroll, but not the fixed header I seek. Very frustrating problem, that I did not expect.
in re Opera: Be careful
in re Opera: Be careful about speaking disparagingly of Opera. Their fanboyz will be on you like stink …, well, you know.
I pretty much ignore Opera beyond cursory checks and minimal attempts to debug for it. Their on again, off again approach to revisions is just too frustrating. Fix something, it breaks on the next release. Or leave it alone, and it'll work next time; maybe.
Too bad. I remember it as a joy to use. For development, I live in Emacs and Firefox, so Opera is one interface too many to be comfortable with.
cheers,
gary
Teaser
Ok.. this solution is tossed about on the web a lot. It APPEARS nearly bulletproof with one big exception. It fails is AOL. It only shows a single row, blowup up in height to fill the tbody region. I cannot figure out why. AOL is mostly IE6, and such radical differences are very rare, but when they do happen, they are dillies. Anyone have a clue about what might fix this? I cannot write-off AOL users.
This is soooooooooooo close..
http://www.imaputz.com/cssStuff/bigFourVersion.html
(The author has no contact info, and this seems to go back to 2004)
Ok.. IE7 fails too.. so now what?
This is so close, but fails in IE7. At first I thought it was just AOL (IE6).
Oddly, IE6 works fine, as does Opera, Safari,and FF
The Javascript in the file is irrelevant. That's just zebrastriping. The solution is supposed to be pure CSS. So what is causing the failure in IE7?
http://www.imaputz.com/cssStuff/bigFourVersion.html
The problem is the Height
The problem is the Height property on the tbody, with overflow:auto
Found this post on the net from 2 years ago. This is precisely what is happening in AO-IE6 AND IE7, so it's not unique to IE7.
No solution discussed. Any ideas.
Hi all,
I have searched over google, others have the same problem.
When you try to set an overflow: auto; and height property on
a tbody, IE7 will set the height on every tr....
I have a picture : http://img90.imageshack.us/my.php?image=screenshotfi8.jpg
Is there any solution to the problem?
thanks
http://archivist.incutio.com/viewlist/css-discuss/82388
Any yet a new variable
This solution works perfectly in IE7 and IE, but fails everywhere else. The header scrolls with the content in all the others. I am now completely confused. There must be some way to fuse these solutions. ANYONE know how do stabilize this? It will be the first time anyone has, as far as I can telll.
I haven't followed all your
I haven't followed all your revisions, but have reworked my original demo a bit. It appears that Moz is still the only one to properly support a scrolling tbody. :shrug: Take that Opera and Safari fanboyz!
The current version works (at least pretty well, if not perfectly) in IE 6&7, Firefox 2&3, Opera 9.27, Safari/Win 3.1.1 and Konqueror 3.5.9.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>scrolling table</title> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 6 November 2007), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <style type="text/css"> /*<![CDATA[*/ table {width: 500px; border-collapse: separate; border: 3px ridge black; } td { border: 1px solid; border-width: 0 1px 1px 1px; width: 33.33%; } th { border: 2px inset black; } th.last { padding-right: 12px; } #scroller { height: 100px; overflow: auto; } * html #scroller { padding-right: 16px; } #scroller table { border-collapse: collapse; width: 100%; border: none; } /*]]>*/ </style> </head> <body> <table summary=""> <thead> <tr> <th>header 1</th> <th>header 2</th> <th class="last">header 3</th> </tr> </thead> <tfoot> <tr> <th>header 1</th> <th>header 2</th> <th class="last">header 3</th> </tr> </tfoot> <tbody> <tr> <td colspan="99"> <div id="scroller"> <table summary=""> <tbody> <tr> <td>r1 c1</td> <td>r1 c2</td> <td>r1 c3 x x x x x x x x x x x</td> </tr> <tr> <td>r2</td> <td>r2</td> <td>r2</td> </tr> <tr> <td>r3</td> <td>r3</td> <td>r3</td> </tr> <tr> <td>r4</td> <td>r4</td> <td>r4</td> </tr> <tr> <td>r5</td> <td>r5</td> <td>r5</td> </tr> <tr> <td>r6</td> <td>r6</td> <td>r6</td> </tr> <tr> <td>r7</td> <td>r7</td> <td>r7</td> </tr> </tbody> </table> </div><!-- end scroller --> </td> </tr> </tbody> </table> </body> </html>

cheers,
gary
Well.. pretty close
Gary. I don't know how you do this stuff. This is the closest i have seen, however
AOL and MSIE6 and 7 are mostly identical but...
-- IE6 is not showing a scroll thumb button
-- IE6 and 7 have horizontal scroll. can that be hidden by cell widths?
-- Width on Opera headers collapse in 9.27
It's the closest I have seen, assuming the few things can be fixed. Safari looks best
Believe it or not, I think thisis the only solution that even comes close. I've been at this all day, this is the ONLY one that gets mostly there...
Thanks. Now, to bring it on home, as they say...
Accessibilty Issues
Gary, assuming this can be made to work (having lots of trouble sizing columns cleanly), does the extra header table in such solutions present problems from screen readers? Should there be a hidden duplicate header in the content table?
Gary.. progress on your version
Gary, i have added a lot of class control to the layout for easier experimentation and specificity of selectors.
The only remaining problem is how to line use the headers and columns. I just don't see how it can be done. Can you?
http://76.100.0.7:2676/proto/tables/scrollingtable/scrollingtablehead/css_gary2_me2.html
A couple of
A couple of revisions:
Changed this;
<tbody> <tr> <td colspan="99">
<tbody> <tr> <td colspan="3">

For the other changes, I notated the css, and will repost the code.
As for your additional classes, etc., they're redundant. Use the DOM. All those cells of class gc-data are simply descendants of #scrollerCell, i.e. #scrollerCell td {}
I don't think you can make the cells align properly with the headers, except by accident. For example, Firefox sets the scrollbar beside the element, shortening it, while IE lays the scrollbar over its element. Tell your users to use Firefox, then scroll the body like we're supposed to. Those w/o Firefox will simply have a full length table. That will also take care of the accessibility issues, for which I also don't have a solution.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>scrolling table</title> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 6 November 2007), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <style type="text/css"> /*<![CDATA[*/ table#parent { background-color: lightblue; width: 500px; border-collapse: separate; border: 3px ridge black; } td td { border: 1px solid; border-width: 0 1px 1px 1px; width: 33.33%; } th { border: 2px inset black; width: 33.33%; } th.last { padding-right: 17px; } #scroller { /*a width on this selector, and IE7 loses its vertical scrollbar*/ background-color: pink; height: 100px; overflow: auto; } * html #scroller { /*no width on this selector and IE6 hides its vertical scrollbar*/ width: 100%; } #scroller table { border-collapse: collapse; width: 100%; /*remove this and IE loses its horizontal scroll bar, but Safari shrink-wraps the inner table; iow, it breaks*/ border: none; } /*]]>*/ </style> </head> <body> <table summary="" id="parent"> <thead> <tr> <th>header 1</th> <th>header 2</th> <th class="last">header 3</th> </tr> </thead> <tfoot> <tr> <th>header 1</th> <th>header 2</th> <th class="last">header 3</th> </tr> </tfoot> <tbody> <tr> <td colspan="3"> <div id="scroller"> <table summary=""> <tbody> <tr> <td>r1 c1</td> <td>r1 c2</td> <td>r1 c3 x x x x x x x x x x x</td> </tr> <tr> <td>r2</td> <td>r2</td> <td>r2</td> </tr> <tr> <td>r3</td> <td>r3</td> <td>r3</td> </tr> <tr> <td>r4</td> <td>r4</td> <td>r4</td> </tr> <tr> <td>r5</td> <td>r5</td> <td>r5</td> </tr> <tr> <td>r6</td> <td>r6</td> <td>r6</td> </tr> <tr> <td>r7</td> <td>r7</td> <td>r7</td> </tr> </tbody> </table> </div><!-- end scroller --> </td> </tr> </tbody> </table> </body> </html>
cheers,
gary
Thanks gary, Will try what
Thanks gary,
Will try what you've put up soon and see what you've done that's new.
I am not sure headers without column lines is a good idea, unless I can think of some way to get a separator that comes CLOSE to the dividing line of the columns.
Here's how a grid should look.
http://www.imaputz.com/cssStuff/bigFourVersion.html
(I've gotten this to work in IE7, finally, but it's still fixed with columns. It just doesn't seem possible to do this with fluid widths. Maddening)
Accessibility of fixed header
Gary,
After working on another widget, I am back to this problem. Your solution is not unlike mine, which works perfectly. But I think the accessibility people are telling me the 2nd table is a no-no. Perhaps I am not understanding them, but they seem to back at a table not really being a table, or its headers not really being its headers. Is accessibility up your alley? Are they right? If not, then my solution or yours may be the final answer.