Freelancing Gods 2015

12 Oct 2007

The Quest for Semantic Scrolling Tables

At the start of this week, I was hunting around the internet for a scrolling table solution with the following requirements:

  • No extra markup
  • Cross-browser including IE
  • Ideally just HTML and CSS

Unfortunately, there doesn’t seem to be any solutions that fit those criteria. So, with some javascript (yes, that doesn’t fit the last item), I built my own.


Check out the before and after examples, and the javascript file itself – unfortunately the current version is built on top of prototype, but if you feel like adapting it to not use any external libraries, be my guest.


The table must have a thead element specified – this is the section that won’t scroll – and include the CSS class ‘scroll’ in the table element. To have an enforced size for the table (if you want it to scroll, you need this), add something to your CSS specifying height for elements with the class ‘scroll-block’. As long as prototype and the scroll_table js files are included, the tables will automatically become scrollable as the page loads.

How it Works

The original table is put into a new div which has the class ‘scroll-block’. The thead from the table is duplicated into a new table above that div element, and the original table’s margin-top is set to a negative value to hide its header. Then each new header cell has its width set inline to force the columns to line up. It will fix these up whenever the browser window is resized, too.

The resulting source isn’t ideal, but it works, and it means you don’t have to do much to your nice, clean semantic tables. For anyone with Javascript disabled, they just get a nice big table.

One Minor Issue

Left borders on the table disappear – so if that is important, just add it to the div.scroll-block element via CSS.

RssSubscribe to the RSS feed

About Freelancing Gods

Freelancing Gods is written by , who works on the web as a web developer in Melbourne, Australia, specialising in Ruby on Rails.

In case you're wondering what the likely content here will be about (besides code), keep in mind that Pat is passionate about the internet, music, politics, comedy, bringing people together, and making a difference. And pancakes.

His ego isn't as bad as you may think. Honest.

Here's more than you ever wanted to know.

Open Source Projects

Other Sites

Creative Commons Logo All original content on this site is available through a Creative Commons by-nc-sa licence.