Locked Table Headers

This is a demo of javascript that allows you to lock the header row and column of an html table. By fixing the headers, it makes browsing through a large table easier. Tested in IE6+, FF2+, Safari3+. Fails in Opera. Using a separate sorter script for table sorting.

Scroll below the table for useable information.

Header
0
Header
1
Header
2
Header
3
Header
4
Header
5
Header
6
Header
7
Header
8
Header
9
Header
10
Header
11
Header
12
Header
13
Header
14
Header
15
Header
16
Header
17
Header
18
Header
19
Header
20
Header
21
Header
22
Header
23
Header
24
Header
25
Header
26
Header
27
Header
28
Header
29
Header
30
Header
31
Header
32
Header
33
Header
34
Header
35
Header
36
Header
37
Header
38
Header
39
Header
40
Header
41
Header
42
Header
43
Header
44
Header
45
Header
46
Header
47
Header
48
Header
49
Row 05537590257612440148347231232501557712248359262433914565617456454861338316194767246920466503480160416754948894607345517905056230356352071249316969125084215228014389177926753885365138775498
Row 150551319401149464653403524443543906030474952334851875535213529262603457922449244721435838544856228429003383216194254785969473717093113405327422617135003426234683690280331502423501552781909
Row 2446758123636114055905867193513714991833531013213516528168367545083721582658893844529426985377502033433853783481752773675770549452321359408617002724467112402212287736936755037543516571015256
Row 34457197635063932482331533268014985141175534124520452037855516386810623433351414093450354044321809366439702745628391247557783763233857623311106227021249784285545925023831678177426398911468
Row 45395539956382204368199220125897267223723947780229634064448149458122703521805067493542445953538833433626442616565314577473190156013403581488147974011678500345641178476536201391379838812692
Row 52351376020073226164821765560269840969114051226382046233841137121094176709241548314352832527259701008482848583615280371210703367317236211396299345237969467144489247917953423112528893587653
Row 6587855304820573821073986604541026054517527816555196331128037235210359943645612473615424330235711381457475393447024715347452094810472739383751015891385731453680210615221284675290549154811412
Row 75472423338615641447495369339089431740148844204887230145742833503153623774233758812689232550815139681511328081197226648119111223422252504715312421822608294838448854246197614955960332710954780
Row 8455532459043226303126362165591397548181753114437057655002614146714111909342731093623354551742313570439437753713377036133893415731252573335372640712724454042822411508345241145294456552694048
Row 924051918257748273724447534312164504032914023337811065301373869211456076665956210625364050202017265575135414485693529225531004388527654300181838405339440569344554715484455957103181464942765229
Row 101743439020874432216740542248596235633451748470047924280553228083919411918371628362633368908113090469231523254396335361506470327894993372336265729157053111596294017135286587240263703373647145676
Row 11763552606271932562936234735703954178164244793229418253102755263557247855739478457224233545924009406739584767598255142103770206626554225189532385132257577426244531623385323285485691606
Row 125503746388056353869186722715045182848541883592245861451994831144234628265316563356133115895917358621591262576372159881213372431765883419175115212761119224195904375615103105376215685695959
Row 1352194793399249185987338710755315291922595034416846041557623212241851134030268325543801159935452123282431303325514250464338529252394120124056462871209932704863573811981449350654686494036302804
Row 144884129857625299257949105011290431002358405283115035307659106862461203441297540564461273214152041786457353081124104374819794840418924712363469842791612430553774272513254793722347539195837
Row 15266656011619303947129794782250256444371354610531836248693045367515025197902252947323674457395141481664348217832311514058983273307033031413716561417523735356659534044244105640092882387435
Row 16540548634495509213966151853500737574420432718944733295260082647353460298223101138307056824842309420529141546416342522251224103916612266211630645575552514153845866490724615761480344534298837
Row 171583516050512494025271536099557193736407045565030316140925737569736362184299648993102562431174972506705516546204751813397133925436119523657854345833582013894254470917785511599396513123466
Row 18273954554795194479051530711578253055613168237229675914131556112154207172478022631495134454113223498124985064299627931562243732662286236194250317516913751175623113348214326824264251426471869
Row 19346246955674476363313214485163029593462154050427351300196426131582493378924745019113441350942494397814494951298062134583160138042035050481162323682793274424865484117525544675714258850632964
Row 205043558051253531342200337204575231257319544417530341535644440949453912084562357047743422713526932192722268463978418393442496399459753226489550014255353640744249401531733113314896137532130
Row 2132911668101011415935586658662785259557021084317328110859004079188314421589543229674732451499652699881918291219066625473418169855704090383444306673185486592838663822254312424263311345684
Row 22171417372065149345382227254746934168033065592942604556541840605973853549953183091454452942794227131345527197049823948485510602016334137073169129562332481890195134243307301258065514241213443843
Row 232376459256085840722550510385916156652492835281736025358442497617335227312323602742490850445305256915765414763377126263126130452491109124432835600215375119358624835290128775853234328504973122
Row 241454305118422492211992028740222055705200976229131116289942493136197629206881939382230355831557506417253053100748304358281040725163367575245683884597130409043455393279389637993332902
Row 25915490157812379024262344211055518364505785387940811893451135465567520832844394440010105953475340878752879162511792211152255107227514144684198467317941337101035023075750174050912102
Row 2656205461454547731894800315115574163765544330044810244651629464241173953387119455204836180623812397519440261214365941771287145341701503091118456302356359117125825584397527602109302842345187
Row 275561255750304635272166352234864236643805146259255922475199549941286986404145035366327058272697157757373422491440344412432107431413085274148434967853179226826375517299949055674372290715173140
Row 2823835992127253453855735162734644196570819940721546440151865359333110212386198226412832329484218574101477438141519094413418410114601425535515057578952773759132937154078594338422575422311315641
Row 29562934172161298521804824580018404561414956894611933695246814163905566615707722214274411366713338132016054675574642171058232553891174632665240425156932106472947192201322250803009500155314746
Row 304957111735693954577728822280346283456963476438072448954613787543036775098298853304772487156681553250339904353509741223152297536285722195343675701537847182616348229561622324923635703297518981101
Row 315943372535969941761625271269847545228112026118124442398937435655502411145160347618505548430324282225460032683464918477437693081710313227345227380751632333283718182718558326054116419743463981
Row 3227032421153746903831175399354827665192243132552938151315540352488543534732269716393067586958721825231751772921879582053475032558145718064142422445484824772937479114653808475741271065310
Row 334169477330336084724364391611942065169517024153501054255912513240494204440544443936543341347461850505350612925269334953671555629983754556730071611983154445041594998153724434021482573431244996
Row 342669160910592109398676234304686570259305668521313273019517151039551647189098638922942102273441634854129415001858102529953354463524045903283811104726305305571739954611449021203126942485413
Row 35200330214551842230923614850689393049742405085121843643461317111258913155317556556791066462137741321812581515012644361253319695624506210612635346011235265464615844788370357422513171436071706
Row 36309214334356304427332368354341276962564434013662926498513084776923644506363250622266263715472344283159655853350581021421713211324613100441922644388465338710293138544248373455156329972303986
Row 3754331654106247244546032980389528552369360012255471141710231175253617272454323247538414944576887412291947296247893188326644805325379306626005376267815570842874834389516115569531516001412372
Row 3818893221530121550681717214240614871342277151762419511820305298290624391745407058573688295022294834363020175988419752285564153745091094328741343453538829141284435855724782427225681181582123835802
Row 3969139511360566758612304556244251932205505218515944161627491841703369622781626408294619913522450879237212931038112135702460229527371206390124301640378033805661370724559245524313548243666368
Row 405729479652145466333227585940250657782823176713262066425143802674869429949973513122241535370559836976855762311397450117564663415437318655299415533349872452497440614049506533157184926433806
Row 41229450111265121912982859560351095971238551542353955169741422686108840192793299037205588250315908133278221148015190590352144703136339644370188340921929103075720261816936517422471504390237192283
Row 425252294541145434102826455417419158145502435250635981219543295380505332033004520235723051363971356691406359833525473579726894535428623316021041167358426262321274014165510180143561841328545223536
Row 4311501481343440034828527575223456748562762575048393033731115643752998264718732016445712132890332834635133461445262097510214132527531138885568561333615956468333503480921560930081637442916021815
Row 4449544328116640103329560842394296374145531841235849344959191952272837165891441442062230845531556401943240551232044530328830582784537234355703670377723527511292594847518622472304294153092150
Row 4529740121687853350658442947155035254475554629832545469735572733283474218425408112466751463140612263462616545038566130413551164152135474964219823393432154166120693702212664109910423983447
Row 4668912511628273817253091945252528054545591651194075583028163299392849382553161722736761183109128492238565464085775914568345483913063983562956892367364626795237419398051533503546848075764
Row 471354207130797752242676184836504712489744855433514347755754717388710701367381251532429601757292845244426572922840397429821225354163592916195427373632897863558571346483528514278758022851
Row 48257219324046514650504781501058153880192335276565834128998357733726274726784502350237114280425859619361952204646323232333340852013143946192133154210543066245538253923837302221514594532849211585
Row 494440324059553793359916974117522852012891472334623563192235812905709275527982617447423473611592934174923204204815433866119151932972771398740614456183839544205613176813615378373136738844156427

I wrote this script after searching for this functionality, and not finding many existing scripts that could fix both row and column headers, giving the feel of Excel's freeze panes. The scripts I could find were usually part of a bloated grid widget, and typically required definition of the table in JSON or XML, rather than working off of existing HTML markup.

This script works with an existing HTML table. It script assumes your table has one thead with one header tr, and one tbody with multiple tr's.

Useage:

var ts = new tablescroller(tableid,lockonload);
tableid is the ID of your table; lockonload is true/false of whether you want the table to autolock the headers on page load.

Public functions: ts.lock() Locks the headers ts.unlock() Unlocks the headers ts.toggle() Toggles locked/unlocked. Returns corresponding 1 or 0.

Download. This code is released under LGPL

This script has a lot of limitations, and I have to plans to expand it.

See here for another approach using three synced tables.