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 0204297149592004283519611501267477217941774301439755733464228025222434495344507025221861760315356994125784445910521290146853175626506542691944362139513735851412695513380033751972477497
Row 13545554420249745286328219361359367721326274961673327941916032258168513453022304769147811752319315923559253141003349140422575847217013405038435231245829284873405751712709560248341075596
Row 257823542513269024628924395454931032336123653213674632334352764213311258004006238117838223924126592121223442415224223884868470248814360368712521893503257679143588727542356128267293259
Row 3520474227509233187227336055316331851493688580218173921870578449072493333245325678282112721260600434040385712362113928504667139100834293091100694212991773130536811313174443365682357931302653
Row 4369946105976516427643084140439695580132356244451443640528110634154142432271093577353664815373417132797551024410951064625365735604099295445199671927151166823765236599416391220414530165222
Row 5255212115662158854114701355553663324919532879457059511345512834225371140684328991094425257334348331435064955616323897929112115205376720752320321154542570137132975312475916732268442023031523
Row 617822690162831038034359116118851732416194516784064338291651843565821124322053622645136743724833421554163317319413004259659512476361123724383137467883758782178135635724788295930804073363
Row 74985345040120504481186430485193011553452601464193274353292993293460005408765569558461699558733553828468129501700109517894939877297126855053326417044517557927131453684306210253858568137241105
Row 835603893307358525977101532123406514348438348012645332032392185466015423786850151517519805734520230128963915485336575800244732422871176247035817271484021122768133623938928845602409748841357
Row 9439613431423386249348145624589748271235595673409827332735345244545243502035422849898320418611647381896226932742493857412439683409238845042409518751275714585225335166584214085584344323891366
Row 101642252752574966302676233515044815418123633504184418981186381713371784480950861361230958963857560626828091042862572018484955476956433730414357618444663149349405161832319423201146174224135874
Row 1137122429589322532897310329320445168102219215423687204220740249467871233117831521881725507150785591381832384065320643142976506629871172156118218122493311851505494490956503893638112333815493
Row 1258833388517328851229267231353401154620274053437358656304223243909243316614265131487029583687581041315765245256942443561269558236552600247454934723125379115985838582345522866360173754111549
Row 134369313521365401313539333687396619912021254554082261121250245848426944112335483334904707456756454901692271842532230125765492451739962291793960570659483231893125315834991355491158961358
Row 14504723335214470212945157596620185656251839221561502539613162581271126641042681158441313857810354617263646791367947832159278327842502895459493850574256895002428540459903633259452881534321
Row 15489046692796428719474493497272496213443662363572170424873801255599620065209218254833201901881374922402149245481521010502677792473556616781655951320161922672583196724033987285939571633
Row 1642955159165236824136831290779113173998349096349361608256429035545335130335159598241254886365055461420242002523645982789238014922279861921557638282046436216645242166543484768513520633722314
Row 174341656482459051806335143834804132340584542742824308733145492491332345973493471620811605974081359649471630217441341429932535049985563294753687404949250710264844702235564193855164207212
Row 185464237947092898464657219223952419045392693884393592914772134474954746514319140128633185223543741843922156114212465405190128311261324588244385651885625114438822022734132228654003061321
Row 199705586344553172826264617115975188428412911969279555374783663466293755205716294835825360323449383313225727682852228631551910109251266854019266436722961229423732037502042941660325729125690585
Row 2045124756488245620392228282365922951742531621214872120943813900359348563105163225218782955522813214174207810452724134578534825384175059926584456359231151113418339801538526226384389320741083853
Row 21167137196823973456719535316357024315777544020791115410023484087310230305367518020115207463710795116331554031648972722142614811098352374416698973072549655494023525097522746023143995755
Row 221016282218939841684572248210733443326752942528391522283997579128464323529964474240334783330117422966197744603925266611187135685508211544442096154750034286386557795414851480414089144483418
Row 23396940724082110043395794300436611752871240254339452816594412371344181731912125649063746173551891704408648533971259150625621420473830614568227465451383992585937101723394626305516433854681358
Row 24915358010562731953935176573024155540280514754638268311632763326242071392521357646344140407820195119203323526363263499836271096749219918432359246338211765374317802858095413283111445955942
Row 25247264429105037263878105047801996163535877415279178414576412562909320494946145963588130063997414927501194283649857805243287318255515657368418355943495611374217558613352491485123803439
Row 26379435345747260150831739425442145094376365056484245504724591923251209342182824249144295928596014525257281186214037129303683236919768012484518946223367577925353452453329964449128812514613713
Row 273845448398537050851856209817451662683140144719904287467531613212296440552198281138303372144314243622418148593077315014309688754658191511227721767231330336129134455134256244227247548303128
Row 2824982248590179720165744237526175893438939634257619142537983003181923934655227956571461526058941764331640464288541537121052192051045408316516340903841112252917012376503278253813424187047475479
Row 29270044232679275154611972180653155911333751473055534007258456712132513916734187371211701462187024411694261916584944549014321808517256448952917241554781497938903832501021697401638558422125229
Row 3052943649509149849524410585052978352884279310546114463543736570866238816991253590052063873855131256843583322418042952510859052470111629891325251957421133814074993567451494204511337554444
Row 315555426037831622891345384553096042556330254255182546945084476386621773422999484536672740131554925002731502811724544966293648846861014942262283178548828574091514418844922126591248543782
Row 3225402201259468921962621161852039085426497946111326489324326528297595000350054345593526515750373041309139894383573131365760497717707051023578639151133525449337411690202229793339429453835355
Row 3362929986662698223513641626449757315742344313210964616381449972691369467251025748263631231103509731521705452742725362236555042911181338043269157295110431117363505326923165191659282589181172
Row 34384831615434304810645365543644868154009546237709983805489445712733373455263128567234425004300726701926407944825723292446036873392475131292664501410252948134324936434917073221123367256631732
Row 355567518519614010569536099731887416856013574301028881989374125374774261117412504419535636502165333929221889189353173353443942314309399152581874493255614493203125201216445234315616580039246064091
Row 365040132293942326582679267535471472984264443882677111342522075380719125126163030475809218235114640466158342261053113353618488442224658498120549105640391754241310463053354288400028535377
Row 3752895419378137633290733281038043736402253131759346258655365393519929464948558817846463411107093422715520174032744861213613728315893124855542643496616314134465130236653154562392174951554770
Row 38245620373434260139014550461296446997645307509831745098262146164938490042425777362180408946565285407549839244294175022183101066484123723037258242754968105214282722674552520269015584315
Row 39297057554414338831867615506993170832534046643217447852964213040325127179625433932510405726021434135748916314721918592396833682080216115615555694123383326753621046371357111812124620321890
Row 40248819391811403752802652327211293203365432929742971248920971962393193045267875666393151505580185146646453204444118555974383654564623246459334004444747891536597036981677514859751943352349495941
Row 41211953645449424186441324876474427152057438289644351439423638232804665960143053982607320521554636177925406194931531923835423228238453495566034604563344451511256766533833539814481136845864012
Row 4234768654751695235152503205546124964113961897885280154342570150245663599415228128247602637402422110083644280132872061406466812922231211822477403024308594953434336353450081780299449894344
Row 43222658004027144644224327193155481871355209220713228395736963077280542594773353744313722150395853857974991309830410715516290173137411645395721175332342075350443314032561356305524243911134014
Row 44372618714763537056572022773264459944848995771455824103466453143321074353150901410208440775971712428413051837288742243281991476596453365285660546440463261507715083911246939243189102255983035
Row 45147259773821931435447151657590339611091351458415863877428924192027855083072503264131365307380154884471174946021737239834503407484843082801294355497140035795179197102631513729268332585358
Row 46329418453088418526519655570247529304373423216941275958493886261310172160102012686231666569330191235332142082688281517431834347359302568452940983577364726746285140579220589651400182743573527
Row 47356496857004250335793344705220128561959081150593012762821269733473038371120361488236910852407428251342192427325781723169430161020403552541679278846036353239356222994653233983701357827105544
Row 48364115945145190290433551411229328727342698585717595959160443523522255014423329300452331196577056424503355797550571216100657743501280850521775269260839735289223520704035124936241683721725064
Row 491495162251344073284218349745300477943234484172121248762813547944031992522125465394826451475357734015572194192090927995275326130145917189913963379264364315912581435448414513671389022894342

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.