Lock or Freeze Table Columns plus Non-Scroll Headers
(Internet Explorer CSS solution)

In Internet Explorer 5.0+ (Windows), this table has a non-scrolling header with the option to create a locked column for horizontal scrolling.

This solution is very lightweight and easy to maintain. No scripts are used to produce the effects, except one-line IE expressions applied through the style sheet.

The column locking is accomplished entirely by means of styling which can be applied by a static assignment of a CSS class to the cells of the locked column, or as in this example, by dynamically toggling the class upon user action. Waiting for explicit user action to lock the column has the effect of speeding the display of large tables.

Brett Merkey

Some aesthetic tweaks and a Drag and drop variation

Other experiments

Name Major Sex English Japanese Calculus Geometry
Student01 Languages male 80 70 75 80
Student02 Mathematics male 90 88 100 90
Student03 Languages female 85 95 80 85
Student04 Languages male 60 55 100 100
Student05 Languages female 68 80 95 80
Student06 Mathematics male 100 99 100 90
Student07 Mathematics male 85 68 90 90
Student08 Languages male 100 90 90 85
Student09 Mathematics male 80 50 65 75
Student10 Languages male 85 100 100 90
Student11 Languages male 86 85 100 100
Student12 Mathematics female 100 75 70 85
Student13 Languages female 100 80 100 90
Student14 Languages female 50 45 55 90
Student15 Languages male 95 35 100 90
Student16 Languages female 100 50 30 70
Student17 Languages female 80 100 55 65
Student18 Mathematics male 30 49 55 75
Student19 Languages male 68 90 88 70
Student20 Mathematics male 40 45 40 80
Student21 Languages male 50 45 100 100
Student22 Mathematics male 100 99 100 90
Student23 Languages female 85 80 80 80
“I just wanted to offer a big thank you for your column locking solution. It looks like it's on its way to 'saving our project,' at least in my usability-conscious eyes.”
Jack Bellis Usability Institute
“It's true! Gee wizz, every time I think I know it all, bamm! Right between the eyes.”
Big John Position is Everything
Note: For very large tables, avoid performance problems by applying Internet Explorer's client-side data binding feature to divide data tables into "pages" with a set number of visible rows. This means that scripts and styles have only to act on the visible portion of the table, dramatically improving performance. Using data binding, tables with 1200 rows and 20 columns were tested with absolutely no performance issues.