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 04973277652752967299611143798345544911474245321383812838446829292894231431083286439238024282944980428512734454320657301012217825052865144550114002941295558904414540820282226245495515431392809
Row 12261424120163852414510425136541854962341514750845181652793366111522192602410620825015351441091241375846043958971413265613212614271821727593760130717632563647532237632164973455558252125
Row 2747426231282954413744937681150255411076239995437313719356744858904325420811964501146348433823522510074795378083192045261257115013546984894229113793951832245427932786184512353632401
Row 34678483915973178301439100055261446579533052276714183135331864318542307575475560811521307206239454092224544564444287648563121171445329920158921298154023371092484546131806675214536693859375
Row 4442633345983557746402044352227324288197711761164833429628781285459448932176589243345139845277312527895951526945838095644488311435626446057831670198125145958395736891121479019853999755792891
Row 522504713323763145425993887424225503156469935927993581150124252040128340944021379740521977148651737673471317184140496230914519338438535972598317394214253348942912289116934934392411725335675
Row 6221155334712622530495654343296242726044137475266612274994495079496632818318025645711925454140358438455520311735191730367099019921995946142534952372402916312847694285818417431936806
Row 77742754398633372464407727913867466063633861777415451165446514411075645508925313139146156047704307125316281471995356495327693174939105278030152895647167435304032345116843148289682842542540
Row 859177855679137713444449568425967658314591363978413593955572214647352736435913814410188954131860357325604755440081312954317159797356932941542153775536549652074127313559905486108957119491824
Row 924475308320485611962616271547695176147031695988276414851585373711784525315755440612653576021885787575016738765461262226991907193059022762312525185477189416939475062168137105463266144617231791
Row 10460322765851125520362039104217853712191712453334615315122634517591353881034539012812727336342440740468871673549226103463409448853314534992053523902705306323063950339692111015658543710135045
Row 114704033263196738667160347841554327642754163738236930484051171739683403210767246544134621386153335721351947697342563523911362888243518743555403865851081313493232702050130131710130184284
Row 123503512449563968353635771829286832975347163740311909875516747973309104123511346169814592658630472947081931504648094948333023124071228527916075861210744753158145311211893362986355215942951396
Row 134510564030935968229837234696100656533741581446011070212526713355240442783216451127533735964286415613325384919165483214333113993178340439604081412726565087377939749002379146710255050482134293328
Row 1420371939802409190229433970522779258864709293531972702471836016612799172733161885550637137851885517918099354000523742623611764342244430771285414230320763001012501134963713372910964374527
Row 1528231690241123285402319642124580500551462579424234082615541717495059249430335472479651095772580841203268352118484363189423751185358347863512298519811724156598587041445226427775846432558161136
Row 1630585288593221675059573928623263259213468951534508187427363293538657205273110912852581978542854842541854126279600052613337528851925503434649315789672219019221360134342932334078372226193798
Row 17299537275082325357054509273659594694861238469412235743981531430762327424428652998434478643581776521515915853293642093651593119362732318316401241591815985934779183546289005409260921324844935
Row 1844575349193348904134291665334918815182849041682152025900339736652141331552622075409310977024992505331052052989224536622337417725514714467321638193483734410343819024317246228021714126
Row 194942502853881016312048517182112990502713163979127249773155448152878639154744460442632477270747004379102311611180273612871221763675113748831160285499421491881231012731521287442260028151228
Row 205151558583147774035253734762413356046373593296592437142058598485194017581705193439073586424340337385530447533372344570238513901553326271936207010343495629473919415925466256551982526045062922
Row 211018210485649243795309829564532262714311869497011335719287166523464806273524493154236411875095228858494750427051093255119112634644750491259314420045790577134351659474145671378161252323723418
Row 221966171357143291358266661612061415488531546697644021321225488339132661492318030374926483917773493216338927243938380646894109137730175467404236326735456251798741252592142625727139133647
Row 2359792404827301513305665479248225880218015453818598623419271362325013935403882206548593398305129835990447632392703538988526811793171156963122137644871944125566734895072652372299820139722391
Row 24141618544455274525215063256524159814951944537013794625116230904320428444652806228572034733716479141241438578913624102179155142636341825351421395081275521205575469914899543323265140431643935
Row 2525084448116222271921487710184431580718027242985173198736193555450157572635125618762210595433653163327716120649199503713336721115940528798895753311303176355104026474812405013236647943513
Row 2621231429476939983638472213638001999137820069172328571842844438565835715426615290172823782410475311253649376634912443127856133872463611150947684974230976735243141684267940325967111636903537
Row 275414304437126868128472118064963786529729385064490981051102520231938781493462746441845294132745239732935638466338301792966426714473647111314675453160852534749454643163658535534251781674
Row 28130216703015946351532412722037421456416742877439418535842266032993489377247662941538040181690392623345347328157595524495410611194525410064708249512777447091841241835852344271342728931569915
Row 29665335385644435255453970685489212504434416203150356095457250843171951378550612660562514792445858574936702751131845853415165224413459419851428688877267811315292288126344901233751423217
Row 304288292622789472551375611912408350548605159482334452573474588532478187014601165274641372296203710184929938335540704155164299643225893546418837795954169226395112514831685988596817171465
Row 311837317626304582131349266192330385515575684192457111326292014239144664329169341921433155315354414121615234381293229872181085617480014214543541837512397975343543216854760124082726741705
Row 32515543662124517626971655571011102870123254915802421957085909383645071330237839255080477448992514309455841273433441039473855652312216247405009381644491196865681560948739005317396173538231725
Row 334112174880528866473318597923045904312639253743502034848512494338574328339239755013307235845500971290058962706723162181824702425370331165742368233464332199439848683444187571685531293573
Row 345183520154741963592513036954563203035911268275252122085522116365787233713783468568257105461366657858041852294659498138665841550154124036309245421731165557153222922332245335006254316847934880
Row 35154622614561125517222227183215264079212521843059599120252560540260565239441791130645141112422718365644323343795812202532581357428618192612740454444153321245693716518355957411742596158011393
Row 363904159126982418270392542542346415726322158182589035154467170812644745753457061877513837221059569634622801565732624193356048538915978155518154231390159728625815375235724620245936983094
Row 37221222673100408814058225147110142841947757154514043163981030429319532845252358532816338559102969413634821589595118046832807344617828954850260441595188719887072432212750222829315633154781
Row 38158384634281632234544578513582025137419533205564759650183856535500444156945450532716811561758380751784587963249333679632330200137795552544356391025694936286257734992162142282912745922
Row 395270967537245962648552835445447064940141711982307237935274307157307948503720398814182656850119016472470161224763743153417454709905341135743269418105137563332273351940560538612465762940
Row 40509534824927513137577617021784224633144259598848474469757513445318310381863532067150895654261046933515285544554454195019363381246220733156416438565401147721145389323211840857424614138
Row 4125734996000557641695088523077837812744363322361198558241714578204424417342084099113516842135232007233046082081479127452337228927451913458183211431236561338874868184950844450203662494263
Row 425395701436153023854573105243929025660472569324042809198251484722243998058653674593375125412441283599124604961484272358912185108342045695655147229615571131343325035352422231268349644669
Row 43366348282343425525784883696541358743156590813585878579935429602182111615169050711172282025031422355274436523037170723216995354663495431133546565025253419280524334777268322312318364324494429
Row 4442574138349954299582850131227464502434844538225047498754854000209930303649462444945410565225313632861543778573559715035387234704464482934715314141217381544884669463735353656412115355755
Row 45115151834378159956375433824277227192366355024532336258432558051048515332763615293349241753781216128121315581693328495570208320323948368216693381450544419987119902552320645742876301156212029
Row 462865981132237784156510359389684185753190032675323398352993270166596765017054077491040139633004246597017612565590220515425571352753193727262952564694304650095943124331457656111601241577
Row 4722504105983299914501379299569513484759519382679249250920518114235283310662928587975352119144052097580152338378225527483605254419717395552389230862648424024270413344532290931442766
Row 48574242105694562142843215581126895312561226941649598949484396349420225932087375348451733779532631964826591727339138034493313220124186275229614002563298471221755678236021634626756251228273349
Row 49459857938323770435731589664839381726932230161911855361363153712113392777046769101482850588384130135213459755242039194541212618577718919742934285658137505548204223697331403599910335153925

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.