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 018265339344430314547232833922093258077344793983452614583554147212864167579852374648926203083371236093225907394150854614576744232058279729704386188506396596135414948548749992501958285668
Row 1153611364413202537551496573713634721643530438055257507122281314186851975699205542596643016179956122503797211234611081278049962217119310215972268875713341409139963852136555708144019691575637
Row 216683630489523326466941943314814914055609257283556044788202762547594714138193123278073153353435439775540420131411107156433063403289100053463437249034004045506142353649384926142732607
Row 34975565427005097243334304432586738685206527058816173415524923374458121922308932494411489129334724723494113204983321439273958286762630545300405614855167192369144371804130847781327223025211139
Row 4415156104387256299568033482146211353380418345279176147015905481540013960300316758839901604168622973813012452629024151267725112537523826102216527114308366235234267059029951371580658095371
Row 53766109253836481098414253333395452323451921142449545983935303238365445247310619748337291208275336312202412334372011349412022119324849321741734181612269552625334119102011302054405149652598
Row 63298207145713381580057781333430198042568673990174920681091781916332559535097393726485623469767642159828204693563541819902634398853712433376655035863574537587293735550727963843128737121168
Row 7124028095104388824315573465430731171147417661733891375643664879312679926452628661239038613901245893418639671180189751342420470642383071137381149614210498143559757141326373050802058555878
Row 82849348353952383869192853613762113332749412010246113607156991667185245096286134891062354202238837643281259246193159544021013697467759705625403837315737136526711746382540312461452356984313
Row 93032325437352013874407472237742171200336678951615805289028584482286024822520590221938843261396517091292425232989473732631314311037822700151625044743687450683944753667644136552551254224
Row 1030061644481452245528207531881236336636131467435523504729566854592511236897550152842466135213681313611884324450117123449272547175093153839414620361211295856978474113235332109152500054925631368
Row 11152315774209184509718903319285213181919963662454371227548146531374369357811230467045222552400256122603300216051654370168374125781866583844685185123468010042118234255462830509656271482469
Row 12331912621698198957834249599153958522993555416136212377573940310259524072287717108732902834342828365663252324621145299257812407469017702189293817611583378947531137380511523734561405454755156
Row 13461176258721548505127064975188623691498434835134490412959193179589821081161659369139054124827171052612002704580675542650412436529758814872003556333724371106117201883555058481802272857463909
Row 14284414041599749181642624582342162627289212301215359624737145054922334521123595182211725314370572151625506344849073414292311501310402126543934974467106422553883364237753502100382658982323
Row 1512779591730991180523080319014391308534932983722564036082734679573421724176420132364400358960077629382699460228365022587928444938297740244167377959252558408752735856180849123464454155903197
Row 16713376613983948216549864547294119241246154247592671420160352054397562733722175555159292624823578520693734324861033244441322108918425270325482738171942750506217361509532931553111453315512737
Row 1719043726228718333987111016175648434864665216753081987325611491256509197650727034726413424382343462559333441995114481389948702368573128573477134829122320211357644865519556217426678182251
Row 182643588929531368402353911601148449844945347912750251377499713921108185348682455476411872666234056732184190114142851271936645493260761786062982460211349911405559251184299684114182120755966
Row 1968945294730187611941069154833782970296222856886265720229512425792924124930395036240444346285357487255953470692166934361380198216532551392323448034769203176449965890239047152184363152945107
Row 20488023324143511977527704476564723651945338403453811718423115454973562347783776439149815540338648701929210110545560139416144403726430435594501107420344147343839794485147233592035702490451755324
Row 21368229513715266224901100153144193201258539784595274524172320104959768202122200949675560598734511031334636537332249282857593057783771259122684871412268620717064664665345110812985450010563805
Row 22621306427711813051222121139638741943264470119992574479577051642746464032863432710399220951375144331754360594242302164563129449357434344515619534740302938961383373058953956420956643120955
Row 23430340543865013439648038758383654474657801884910342317758441084152150003037260202893216435758826559939674902718492147923123330638041519378641911357144029371136332438471477500369025612021
Row 2426895597228047175293923447513553521244118442381362635336046684439487824542630234389355661370121634122846171611025407373737915004172508553239399828871459342327301697478533655057345218043935
Row 25590544334169379839985538501414102384730251117904466302794448228093252421379112113880121339415576599713064633344931092567335315417361151553827316494826578933459444753593760524038405685565
Row 2626143587764140557147163716556821234830163130491536946705650151942085923168251552579257526131025193337226557739405829335297604417348685320188844355341423614512470315018191139280033385346
Row 2727225020450153001594111432535271485589329924254173332172210211505589340339350235680162847321504778229232881577562926344298464811353598241224839223768373245111067157492843981878594859032466
Row 28288329514895968492219622117369942535404527538812038357325293172117027705419509253731513603160333072530151842478590316502765319731382732211950994848581733514252509212322902665376034613835530
Row 29288029271066315292669333730592669252155362572417023015768130750321887406388017033757213279549882422346027485882129432772762422043432792474910111291807368026491343251819364319212526751905
Row 30253055536082872687440352755108186220224990315552991751137536424543124465346711931233213203273258221389162601426335904505793414521121079831514353593823762375492755311673678906531552201029
Row 3139673891295929852102322880134711475480560947363985401288097147937116101832364829864206257425165879325234215193247144493159361140834565571163933691727855815526152137999274401389624062111
Row 3245064237575814912442233240062320558314271512205458754671241512832127198529212462290257062277342812267643555627397176017372476499614953966143838261972375834093398527054633273394018784555663862
Row 331476252876411824804419224084880254620342851330537705326230152653292373930915263149650026617655962593347041839448847705701596312974651145101465635524981120255851831450733551156807261944484546
Row 34570937104120837180517030355092008479042781709475355752174589756758303448465520313033485537387164113443006885889271537985930292241687343091447124250993261452080820134094298119103769
Row 353810535824245841239029093772777454917215783463716102497243415395418602227225095072251416082332103324154345512753962542895320656125318304620022227342347797755143456154127531057184622914752447
Row 36456329831518107645913850210910062194123640124484131360720603449652406156754074284044932171400586139692456170625929314152482159145670589745043519200655095713324159102161137235164221482041682282
Row 374494224151214942545752048033426297650836845906465925055819432924024323184844083832156116493742372130201258194218395425422333216663343527411233863407645488384583223274432424736563157011384886
Row 38341755452717497711934582698421317164639511140286138228062035656392840653731247549032314470656475555344221011244580509545414124181135175317226921535293985485335805124171439621929191636175857
Row 3959811348233148843661103745313215447947404339305838342879118156443964981913611402758975463160650211176556795030923184806307345313137195721914173487540626515226374457083059623889270310191387
Row 4046161629541345121092101935332267586448253593769528824312299242443884489597487438943248409916382955115822603844386032795231247649074643988599856624520226524730021623401522894054313471324424802
Row 4153091315269625565414433355115715933355443138712585907277712281894277589041350401136341566351515703471754644416115842653725247396028118865293579224575885314688837555731179453295936873307
Row 421848410023462983151430082134121717251597563228825862335753548223637123911434283696599857445833752304377428412624064159031092163393692367694422254893266838224525554936831881490245045517141
Row 4346172945383746153518242023673821279665050828592240219130211752283697111945085590378623294114333412599422364515551123773132245521417475972263341133793542847632875287100350653308117713484004
Row 44229658553594812183170734152194170156507091212202738413666224055873638487237001430430024624305458634643370189346414717589793645713491101675451974430294889840803657210910714975775234710843412
Row 451218478348425518124431464104470851559973348523258944284380333845300455625813730150334781810516055871916656536142621739277354805211615499817654761310147252753098382045072991210323093741403864
Row 4629555132236743294115261928572182537911193920215259844413766559620525262696677180157934497307278460026153158200234791121134584654420741371562493135535941491472209264759135857242118
Row 4723832938795418327315291448955145890110426711891458327833024442833275098579938884028335138294077482359204723473557774964485321591901564734246314937483141454826593481671745173598374129449242839
Row 4827424812866932641494349152560366536502337262925034496452921494837316010863667130459123601212062821175717436950616411207180254532073189520931015809465346794459989130796154855836310943212996
Row 4941951988429941065589418473417061353102766776430825682283804462232013945271972733729196113804690144512151799576642105993175325094098134229272831304730625932381238374240379406446204841384

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.