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 028844694304681260225611043429355954814658572353532418532753824282207252142001121251443540456719143343155111184491326614263253216442972577143422666729124328052856303154947410187620123269
Row 139925320482963588346248247042922228385251001177506135452441366858555353338393445332096263924343360280317921730334614925128156044051903154959964025515540508104712241191935615138929695851
Row 2508157534014421553635013114896225912547591921668357553454287259189949482401354545691731805151254922735517030163471893235657064929489249224804389051718285213229839081165397183619604278129
Row 38554633812463522725046333437603496142927681582505627051575332624143415943507640537346093280357935413696510335252651884762364108172120750542721412064600080685015174212146899118061494
Row 4502210842761576310341637027441236292243603986451548163398226359111484865702443318427621246302723452813223442831331894601462039125609473617605920206342321442684242739729363121300536644068
Row 5303335223069409292858842778330632403860302160469307395742473621103528181986101329703496312351523241233659052074406143945784512567314805161113554355433517251674504215527451715455430095056408
Row 640151029274722595301491484376918120733505379946134502546552359131770462845301793516540903225342718515852208152582306106211085283793342410195606177200570411353799445832353795450779411125549
Row 73172543741324673340591840734940591610023389192393040344124669338428181326349610405515510959062114103039405661343342299740732216607745371428247752438505130534044552212186913739902074864
Row 8650385257445334432557357635585468362743324364075133020639718205705400877461156042988470487726494264401442755840327242951728270966910613153117537323017360921002860177341114409382054112787
Row 94309388911624606393953134561204645612463030968893144339149191138106722832771614377925993987401504925354182462931855135413298307556944175402384443804128487142044331407936311802473617370
Row 10396750105099699323919802734424342374268550944963191244136934292253417351182439051824494269025362223287319373386570839041251456642152724008954778332018722528388621324924961796557030692023807
Row 1133350315702684319219868373515172343055683090425837303602244413872147510552143680322739935677963560445238934591573309333363441474043141202495203043636146944178561251124312317355435224156
Row 123601110827482205501671712466068158895707982530126029171120342324871602194157055897117336355307341839365368540577725382638451722912668673165411555363292524507516563249258492432017705965
Row 1384459324749351215411146351456661151295611093845387548724844978437357234715456351914491109013664546392141072131450813012910475831654431433307124465018162255404601597673587642424071454736381474
Row 143339926574520683773598023701521514533041657470956041222993380512454245035497444111348485983854465538210543780596526204910201955251805479544534806087306622861128315543737345029035955197
Row 154322220553255206691959516510605769308892252163158318863313675716358645245971889588847901666194646124220163013212026302556895644754498649111016468651312943135434255270222521218961095307298
Row 164375614402112972323907495241852071296705391121681183430318633646671712692241468655265666199613095535260639103599441227131772560951803470327928883276634712413057634826133634388085124
Row 174327508833261321185350315022662187541428465131856235255962684282831195826562495561868730511017288428999263541224570224447185163883274643882611442155565254555419664165282456153163680137
Row 1818545477118645922736173289287291941062777312752655471532543724733560556673718317629947384441305014755224251413814334044359540352525104230487345336585658655887394829682507549052563614783678
Row 194147501718814933437262637674062398550224127184288210192096378521052605819359328483889199217475649462511792214423134354513289782121483485858262394261947573028397822892462446530050055343
Row 20450356472179544737942395101564715841231188478159415190347241638582958287931550243553122586819182651459519883796379111224279804233722596855865129405822662894923320356618272809469629783074
Row 21277277138324521583256209199053382334371451344202181966647782630409019827417425704185557573425534694118228931751307828694805523299352710015530159583855282162921268636374354312940283699
Row 221825701762211408439836335878297757314450233842662190160415513844429272213575595659278737481367365045651901013191351612555029193216612662402276117532009371843165847453654331879226342222945
Row 23342543901670795058483954961369227710454816134443761489474836814227534091828525158139545925661267382529022899109035172199466742664130376235097036293034464420415718557921505391299025412054393
Row 24474326411475294553275921281646154271420955641571393548595227217856976683161592437992682147053182633730404237891061273047315672451911531774226424803453351321482287270124651724133748287018283833
Row 2556591613115732820198656825871519308349694131250659923765347258421951320156545016328825364361535323364450208452336585222149568959984463133119825571574446433716443956955985834522834953145665
Row 261075137520537031531095342130885629168070353123494159467649394270190025032620407738315859178351111082206350831405764546717302046485591153477327462075898575440135472841946595625341473780
Row 27549815833758771997431731524704330242038655909294028261888537615932440109455215693447335856383602105254931699574161429292466561325771299198162155344683216440484682259991875931492135511865
Row 2836885683278100935954600738509234061865590113165757405638833585381818954935160364727241587750543358004736427150685554102814954522796284952091306333026935103437159704948269538835128131357031403
Row 294317324048505605808430599033615913033420642164856464551483284594226522981517313889983062362205386813955779137114414411633242394446504563115288412462104559525408603132358442793064113300
Row 3010104259314531213405359825035668948431953213340567412914927428942803106252731322434302833284023516012665622292734408633464675944526111373311341339957567754564759254131714403445860143014214
Row 31535021862625163917334080134254672880320859417873522303669525758481340189470016102307491146552737562959011271323019989432033835284239423509927500814022494326831274131241872034433876874883
Row 324158213973214005214587919982024412308151714392598150762341525956017304083451268623789643551504726852012142054714312479634914725193533301479350924105614507310531690244297317794956233123485484
Row 339293080183598657241342868525371816512193230518833682097204557535371248114134384116271051934631288121427532644583137183605320736821810510913047050958714207123411662238486590519363251385
Row 341758392915503117767194639675374439458091188141425735403450437731135262143659895004416156304715149948322416431924202426510591648935866574214893314835144528232983562202340688693766545033811467
Row 354876360137387862462413928981141166490934665968504844215652764102267738304668444816673403127653021530558883265465310055085388340271767750510053483661284349247454296159458111441281840954080
Row 36529553761657538927354548430550049561545210418848515362360453719065427449298560925914548336210684763594719525537219847155646500435847072718565427845975418196628614499951684136821598684100
Row 375594219357724802228312642192478121355438457839803294463472029323671188913655915281322745043682291537634609228122285963468833923709145313454556332175283117577412365669483514923912528938324288
Row 381145397842922231171345940512510120386749581382852295829199953461955459455913282446484358044613144084133993452500135326742806503054923973585856913532505534927912196114018094849313748674329
Row 3917836674773311313771112319495843852018190748274744426340629725124525315984588185717937672654174543737494376537436285365123290141973847545445764733447550875219181729357228033106189839122777
Row 4050651127265357042142707347220485267732929145676546561188133381545131383441645494624167135941451123201656172755506530674294000987523358729542093376735754955443374075517533438502736885808
Row 4123682176229638214871527758385168198050645707263539073993420459832347531620445146224526781963464539262596161935975640628526016724015525019874463356529262610394233963926404537432612033243825244335
Row 422579514156206413393295102844278552806893770436113233362750324420334185498433575447649062899470512791887296631694547323927323428259918485703397633693985464748773996173858441384101728714230
Row 4345549263091394644043356934147424664881405034931462101815951298626204347205317133733863576534756762467939505826672138667614306492020829228904712548614571131234851181213430318716643662512
Row 44235725695679271437363344464520954879457350001100508715173432257048441307172219423293012428951293916393010791861213163430954531577463858825456524017121519152944256624215364251143959805963962
Row 45160441192638150811461872797426307240975043224718535220473851672150148036899433329588827839223896572725482764292110132926448622531743222520383937240643522784196152095449802273171449715413998
Row 46464446725442884164141173754362054455890557411145090449424923102984574352161006568346346892652196918395891138056523739249617117544716163851382823715863284412143235333933981954849103317032197
Row 4741415324334469214416834943613315050201886295959542474491435361822755231442680138743914154541550484790487445205994191725797455322237347855524026254326944403897119730130701462508437555622
Row 4834283938463859263534338922393964408422505215722789336041198822751339846342093042379459384248524661152573901105847341512220316098824872180349415720483044284415354480131354643056550414332085
Row 49558953363770388724191534303820834153155623745833373102359891950189840964937496935332900235340531954916210919421356114458991735615817556743512789990240532482482535629061460740454187113154872

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.