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

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)

10 of 34 comments (part 1). [ » ] [ * ]


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