Mobile Friendly Website


Doing it with style

scrolling table COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

mark from ireland:-
Awesome and just what the doctor ordered too I'm marking up something at present that that will be a boon for. Ummmm ... are you by any chance "channeling" my fervrent desires for solutions to CSS problems?

(20.10.2005, 18:41)

mark, method two will now cure Opera problems (but does require a nested table), and I do listen to my visitors ;o)
(20.10.2005, 19:09)

mark from ireland::-
I'd noticed :-) So if you suddenly have this overwhelming urge to develop a CSS solution to a "click for more" for "below the fold content" it definitely isn't because I'm wearing a tinfoil hat and thinking abracadabra at you :-)
(21.10.2005, 02:51)

mark, how would you want the "below the fold content" displayed? As an extension to the article pushing the rest of the page down or as an extra popup box sitting below the "click for more" but on top of the rest of the page?
(21.10.2005, 21:05)

mark from ireland:-
Stu either would do but my strong preference would be for having it as an extension pushing the rest of the page down.

My problem is that in what I laughingly refer to as my spare time I'm doing a series of articles on a complex and heavily misunderstood area.

I'm trying to give people a framework within which they can understand the topic and am trying to reach several classes of reader. There'll be some for whom a digest at the top of the page is enough. But there'll be lots of others who'll want to read the whole thing and follow the links.

I've tried a few things and am now seriously stuck.

Thanks for asking, if you do have any Ideas i'd be seriously grateful.
(22.10.2005, 09:55)

mark, it may take a little while, but I will see what can be done.
(22.10.2005, 12:03)

mark from ireland:-
That would be wonderful thanks stu.
(22.10.2005, 17:18)

Nice thinking Stu! Absolute positioning rules ehh
(23.10.2005, 13:50)

This is just fantastique ! Merci beaucoup ;)
(09.11.2005, 13:00)

Thanks for the scrolling table demos!
Looking at "Method 2" - I have a question about the left-hand column. Why is it coffee-colored? And why doesn't it have a white outline? Does this mean properties are inherited down into nested tables?

(09.11.2005, 17:44)

Joshua the first column in each row is a <th> not a <td> which has a different style.
(09.11.2005, 18:45)

Yes, but the only thing styled with that color is ".tableone tbody" and the th elements are in "tabletwo", the nested table.

I am even more confused because there is no tbody element in tabletwo - so if anything should be inherited, shouldn't it be the general background color (olive green) specified for tableone?

Do the CSS/HTML inheritance rules describe what happens in nested tables - or the relationships between tbody, td, and th elements?

Thanks for your help.
(10.11.2005, 08:44)

Joshua, it's a bit confusing but the second table is 'tableone' and the color comes from the tbody.
(10.11.2005, 18:00)

Hi Stu, thanks for the demo! It's really impressive. I'm trying to implement method 2 using a relative table width and 'em' instead of 'px' for the column width, but then of course the column headings do not line up with the columns in the rows.
Do you have any idea on how to correct this?
(06.12.2005, 16:49)

Hi, Stu. These are great. Any way to modify them so that the table height is variable based on the size of the viewport?
(19.12.2005, 22:50)

Love It!
So much better than next/previous page linking (in many cases).

But... (of course, but I am willing to do the work to make it happen)...

Leave this page, fine. But could you buid two additional pages linked from here one for each of the two methods so that your audience could more easily isolate the differences of the two methods. When it's all in one CSS it's hard to know where one begins and the other ends.

Also, please strip away all the other groovey design stuff so that it is clear which CSS code is required for the techique and what are 'extranaeous' design definitions.

Further, it would be great to comment your CSS code liberally so that some of the other questions above are answered intrinsically.

Easy for me to say, but I want you to know that I would be willing to put in the work to make this happen, but I want to offer it to you to put out here to enchance what has already been so helpful to me and to gather your expertise while I do it.
(17.01.2006, 17:08)

I have a question that is along the line of what you did with the scrolling table.

I have a hidden floating table that house the headings and beneath it I have the main table.

If you click on the "plus" sign, it will unhide the floating table. Now if you scroll down you will see the floating table in action.

My question is, I want to align the blue line of the floating table with the table below. Any suggestion??

You can view the sample here:


(08.03.2006, 21:56)

Sorry I do not mean to hijack this thread but my question is another solution to the above scrolling tables.

I was wondering if you can perhaps shed some light into it.

Also the scrolling table limit is that its width are absolute and not relative so if the width below expands, than the heading alignment will be off.


(08.03.2006, 22:09)

Chi, I have had a quick look at the code and a couple of things may be causing the misalignment.
1. The column width for the floating heading are not the same as for the fixed table.
2. The <FORM> tag in the <TD>...</TD> should not be there. This should be placed before the <TABLE> tag as it is closed </FORM> after the </TABLE>. replace the <FORM> with &nbsp; to line up with the floating header.
(08.03.2006, 22:20)

Cool! Great respect Stu!
(02.08.2006, 11:20)

I am using a Mac with OS 10.3.9. I think I read somewhere that you might be interested in how this page worked with Mac browsers. I found your page when I had a need for a scrolling table with about 500 entries. Your demo seems to work as designed in Firefox, Safari and Camino. In iCab the top table has no col headers but all else seems OK. In IE 5.2 Mac the top table scrolls the column headers along with the page. For my purposes I believe I should use method 2 for max compatibility. Many thanks for your fine efforts to educate old fogies such as reside here. If you would like more details I will be happy to respond.
(18.10.2006, 16:28)

As others have commented, these work great. Thanks for making them available.

However, there seems to be absolutely no information anywhere that illustrates how to accomplish similar results in 2-D. That is, scroll vertically with fixed header (as you've done) AND scroll horizontally (with optionally fixed left column(s)). Is it even possible with standard HTML/CSS?
(02.03.2007, 18:03)


How can I do to display the content in a table's cell that overflow the cell's width in two or more line of the same cell. I'm using dinamic data to populate the table, so the lenght is variable.


PD. Thanks a lot for the demo "backgroung change". I'm trying to do that recently with any result.
(17.06.2007, 15:28)


I am new to this but I am looking for a scrolling table as mentionend. But where do I find the code to do so??

Well appreciated.
(08.11.2007, 14:12)

Shaun Roe:-
spotted small error:

rel="nofollow"", and preceding attribute has no quote
(20.11.2007, 13:08)

steve novick:-
I liked the scrolling table.. any chance of getting it to horizontal scroll as well? Naturally, the thead would have to stay in sync with the tbody, but the footer and caption wouldn't have to.. in fact would be preferable to lock
bonus credit for locking, say the first column, like the header.. but not necessary.
(28.12.2007, 16:44)

What is the point in putting demos on your web site, only to disable showing the source?
(30.04.2008, 16:05)

Alastair, there is no disabling of the source code on CSSplay. Just right click and select 'source'.
If you cannot see the source then there is something wrong with your setup.
(30.04.2008, 16:22)

Paul Hayes:-
I love your site. These tables are just one great example of why.

I am using method 2, and have seen an oddity. If I turn on the borders for the headers (add .tableone th {border:1px solid #000; color:#fff;}), the border lines do not quite line up. Any ideas why?

(20.08.2008, 22:04)

in my project,i am trying to apply the second method on the tables of my project,it works fine with tables of dimension 2,but other dimensions not
i ask if anyone had the same problem,and if he found the solution
(15.08.2009, 09:57)

It took some doing but I was able to convert the Method 1 into a good looking variable width scrollable table (also with just one column variable width) and no caption or header or footer, where one column is set to take up all the extra space for itself. This is because it's a text column and the others are things like datetime and username. My rightmost column is width: 100% so it's using all available extra space. Then the other columns I specify white-space: nowrap; and no width specified. The other widths I had to set to 100%. Except for .outer th, .outer td, I just commented out the width on that one otherwise it squishes everything to the right.

I'm glad this worked because there really isn't anything out there for variable width scrollable tables like I needed. It's terrible these things have to be sort of hacked in.
(06.05.2011, 21:34)
The Vertical Scrolling table example is good. But I have a requirement that the table may have both horizontal and vertical scrollings in the same table. For the vertical scrolling, the headers should be stable. For Horizontal scrolling, the headers should move. Could you please tell me how to do that.
(14.03.2012, 09:47)

I just wanted to say that this table scrolling code is exactly what I was looking for. I hope it integrates with my form code, I think it will. Anyway, the presentation of the table is great. Thanks.
(07.01.2013, 14:52)

Thanks for such a great article!!!
I tried using the example 1 with bootstrap to get striped table and hover effect.
However, the "thead" items seem to not line up with "td" elements. I don't know why. I am still trying.
(26.02.2015, 13:45)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page