Freelancing Gods 2014

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

Examples

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.

Usage

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.

Comments

2 responses to this article

15 Oct 2007
Kolber said:

I did notice that the thead breaks it’s alignment with the tbody on text resize. This is due to a fixed width on the tbody I assume. You could use the measurements in ems to try get around this issue.

You might also want to consider

this.div.style.overflow = “auto”;
so that scrollbars only show when and where necessary.

15 Oct 2007
Ben Schwarz said:

You may want to make a heading for examples – a little hard to scan when you’re looking for ‘what is this?’

Anyway, the only productive comment that I have is that you could add an overflow-x (CSS) or overflowX (JS) property to the element and set it to hidden.

Thus, no bottom scroller.

Leave a Comment

Comments are formatted using Textile. Please be respectful of others when posting comments. Be nice.

RssSubscribe to the RSS feed

Related Links

Related Posts

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.

Ruby on Rails Projects

Other Sites

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