Locking colums in HTML table (IE only)

Leon van Tegelen 1

In a project I’m working on we have a HTML table with many columns for editing certain records. The users requested the possibility to lock the first column so that when scrolling they could see the context, like they can in for example Excel. In HTML this is not a trivial task.
I found Brett Merkey’s excellent website showing a very simple way to achieving this feature with Cascading Stylesheets. There is one caveat though, it only works for Internet Explorer 5+. In our case that is not an issue luckily.

To speed up the performance considerably with tables with many rows, I made a simple function caching the DIV container . It also encapsulates the div container name on the page instead of the stylesheet.

var container;
function find() {
  return (container != null?container:document.getElementById('tbl-container'));

In the stylesheet I then use the following expression

     left: expression(find().scrollLeft);)

One thought on “Locking colums in HTML table (IE only)

  1. Hi
    Iam extremely naive using HTML and stylesheets. Could you please help me in achieving locking
    the first column? I would need step wise instructions
    214 887 7896

Comments are closed.

Next Post

Publish Diagrams in Oracle Designer - create PNG, GIF, TIFF, JPEG and BMP files for Designer Diagrams

Recently I installed Oracle Designer – a maintenance release, released on November 18th. Previous releases were 10g ( and patch release All these releases contain a new feature, called Publish Diagrams. This feature allows you to export diagrams in Oracle Desiger – such as Entity Relationship Diagrams or […]
%d bloggers like this: