Fixer table header with scrolling body

17 replies [Last post]

Wed, 2008-06-11 04:05

matte

Offline

Enthusiast

Last seen: 14 years 19 weeks ago

Joined: 2004-03-18

Posts: 142

Points: 0

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?

Tags:

CSS Styling

Wed, 2008-06-11 04:12

matte

Offline

Enthusiast

Last seen: 14 years 19 weeks ago

Joined: 2004-03-18

Posts: 142

Points: 0

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/

Wed, 2008-06-11 05:06

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 48 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Wed, 2008-06-11 05:46

drychan

Offline

Enthusiast

India

Last seen: 12 years 23 weeks ago

India

Timezone: GMT+5.5

Joined: 2008-06-10

Posts: 52

Points: 2

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>

Wed, 2008-06-11 12:36

matte

Offline

Enthusiast

Last seen: 14 years 19 weeks ago

Joined: 2004-03-18

Posts: 142

Points: 0

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....

Wed, 2008-06-11 12:51

matte

Offline

Enthusiast

Last seen: 14 years 19 weeks ago

Joined: 2004-03-18

Posts: 142

Points: 0

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.

Wed, 2008-06-11 13:43

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 48 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Wed, 2008-06-11 14:20

matte

Offline

Enthusiast

Last seen: 14 years 19 weeks ago

Joined: 2004-03-18

Posts: 142

Points: 0

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)

Wed, 2008-06-11 17:08

matte

Offline

Enthusiast

Last seen: 14 years 19 weeks ago

Joined: 2004-03-18

Posts: 142

Points: 0

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

Wed, 2008-06-11 17:41

matte

Offline

Enthusiast

Last seen: 14 years 19 weeks ago

Joined: 2004-03-18

Posts: 142

Points: 0

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

Wed, 2008-06-11 19:22

#10

matte

Offline

Enthusiast

Last seen: 14 years 19 weeks ago

Joined: 2004-03-18

Posts: 142

Points: 0

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.

http://slingfive.com/pages/code/scrollTable/

Wed, 2008-06-11 20:32

#11

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 48 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

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>

I favored IE7 over IE6. I forget now where the problem was, but if I got a nice scrollbar in 6, there was none in 7, though you could still scroll with the arrow keys. With 7 working, 6 has half its scrollbar hidden. I have no idea how AOL works, but I'm sure any AOL users are used to oddiosities by now.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Wed, 2008-06-11 22:45

#12

matte

Offline

Enthusiast

Last seen: 14 years 19 weeks ago

Joined: 2004-03-18

Posts: 142

Points: 0

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...

Thu, 2008-06-12 00:19

#13

matte

Offline

Enthusiast

Last seen: 14 years 19 weeks ago

Joined: 2004-03-18

Posts: 142

Points: 0

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?

Thu, 2008-06-12 01:26

#14

matte

Offline

Enthusiast

Last seen: 14 years 19 weeks ago

Joined: 2004-03-18

Posts: 142

Points: 0

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

Thu, 2008-06-12 04:28

#15

gary.turner

Offline

Moderator

Dallas

Last seen: 1 year 48 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

A couple of

A couple of revisions:

Changed this;

 <tbody>
      <tr>
        <td colspan="99">

to this;

 <tbody>
      <tr>
        <td colspan="3">

At the last moment, earlier, I went with 99. Back in the day when I was young and dumb (I'm no longer young), we'd make the colspan or rowspan some large arbitrary number to allow for varying numbers of rows or columns. Opera chose to expand the cell to make room for additional cells! That one was not easy to catch. Too long away from tables.

This is also the reason for the O9 breakage in my first demo.

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Thu, 2008-06-12 18:01

#16

matte

Offline

Enthusiast

Last seen: 14 years 19 weeks ago

Joined: 2004-03-18

Posts: 142

Points: 0

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)

Fri, 2008-07-18 03:53

#17

matte

Offline

Enthusiast

Last seen: 14 years 19 weeks ago

Joined: 2004-03-18

Posts: 142

Points: 0

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.

Fixer table header with scrolling body

PS

Take a look at this demo

scroll table code

Breaks in Opera

No scrolling header

in re Opera: Be careful

Teaser

Ok.. IE7 fails too.. so now what?

The problem is the Height

Any yet a new variable

I haven't followed all your

Well.. pretty close

Accessibilty Issues

Gary.. progress on your version

A couple of

Thanks gary, Will try what

Accessibility of fixed header

User login

Navigation