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 010783521238113114762441625785804863503053592016352759641137543981338245892849288155772568328922871005245373312335608519044972279855241551852172503561197916694941459555514180213580933861382
Row 149485242112132084090558134205843300658971040322889254958382555921490228974467510320733483580441192311073790385748079704491994281144824278357136563903310211633619380257784304566969556874574
Row 22800547740383304141115720131558338614032880222244152854383110071865934123813803612328727422167110304630615501333215936748284253140754123757213355475329441323222920140620922214550121494031188
Row 31425414455582135183646695860258137632038404324193802427456103318420752891214390134076673001196343016321672956196149950381072124282233861097348531966802532258976727091217318095657301559
Row 4555610294553311813474100193524541494346719792725612349877552572241241931205822477681255064601267224265730162623563808401635084123957454416951212067427220962440277530462131102390362928224649
Row 558387174933045277238531904287589914904001696242212196272258371646772414446044451745835478275334341805531233085240338032064998226648163129158310434774552732331765624426052293827592111814543
Row 66431970187713611915134155721305393815304721271132298233014882102618111604300735617774559623214216574985536311545842883399632133426479633931925505742182686207732854654442249042689451250253773
Row 7421731557712818287534345064488192473958805110268524711062564112093438559148124905574756911793461324614854549513032392147135091376483087578139034569446640891924107024896231984828561329494432
Row 834882181147026974883211952493472491240992418264410655535161324953803165533006331279504600045644612207558484410512831652387314755241061959530386927463544474886459761623172245444992216825012158
Row 939005521115947163453377423438294270139048823161164521784209170562914753704253264449495862425885957364090480058391195347317479038331231319014773851190739941534992187821362137468755653294382
Row 10292652929183013763184839143687460343183995525850662005431664715755108400217453880152045579259205088579751882509424813481521180517673589318521064489413535075210202145221434721571220154849934
Row 1151102427346311265198284552355257686112323773871266251302453352942228342403808182646274394431343859781690465910411827206222635210233576490101333482348981925561917112458529719397935293211
Row 1243441360265050475337159044764581455418973172121184951674083334220133552603185361239457883468353659093137623298512375539794547269753159483113344047108536723015164658809135070422246884511
Row 1328517214739505857421754394542148474979514244688834981168347536037871734128649035380359714864133255315573723125752814510578031802631442591433445184163595458871425188221995618151611437945423
Row 14150738874569496021252661364431742311225452064504195490653730523616225412833066126831135180139165138065200566116657985154233748062195284451845696420924544836178521842153549020272687527747231623
Row 15349335639525978514858123371941418441010535932469820647455955421512905525123658992640590243872920947419623051008201669185644271128503557803938589629631788202837531724567458435394383982903
Row 16438443065944458417234513867414739291884389620611552240026275164370933653447432322645383334382012411414569827739363387512020783055452545802879157434152611281315142202269811265421433555925395
Row 17390324141893399726874004240124871015106727212383340024919472567222514844764226449301842479790314382226719314438155336461057337839762574247188315840461815313218314968273212714937358412215971
Row 1826598151897291638355432420567437821724882415477524542638212215053231230848284276433317102866352511722748761776258366447546618026903544385455793723364010453667322731025518501533219911592
Row 19393127522373449535591375218347653594525290037567715896308564611727112717289652951493452239423393141319773511647443114602498531378925581897193188482021576914931179747723239116780357592335
Row 205521933066338026056163444017206716855428434444763942595831125623602831471446172148565020595133257679256732347456159684821224914122157515144517141841240548844708199330192665350535351026
Row 2187453255283947764181540212442548347783084501435225451307335813397387158118405682433539131164419151115872502237953913042296026604020110135692661102239941594555365719120125670181652428184574
Row 22532153952040432457852379052051464540138228757011478182443548372902518847259364823565018822469101241358182632320881232813980447231931882398448675279124233683082338016632763308851381304175
Row 23321749733792177112324542062279418604132893430515824943511156628902555236329222485108346143415446458925282584216434373313021313882762360119733075799808111642277799015382009367993926421326
Row 243425636592423127503767337457082161172657002804549078253383974235739422414159364113492038372854975272325426214444557238632969243918034626202558755906330208625398663880499350954170254733864
Row 254206445947483493541591312222152410625345319313716803069588120583265249121438574673282752533129719172244375072366140329534591281310003784678423842412718208017983603118514172711190914303837877
Row 26823531824323750383735773811219454645642656484555103140580236582885339391028667465064370428026610461565744450280421657981935102310248634524501383416761251273151687344071231116631101125
Row 27413091559869003294202138865381192944024802026419457267444209939204668551048713739581146074212450041815726365034693793189525647191676254914225633033557822151161486873917583184508437563174
Row 28411145442601454119721995729293616312527964348315545432073894957415737682359218131595590538032645094525119349212695156937218684370171827192697159251511408376821002831310445932391553518821892
Row 294019394015457475144475236332453435229541803527633944423623551155215408491319279123998315054451385317618983539382749333380481139794368115420812372492948934559125851631001805162339405872687807
Row 3056331708263418985929189253404682173339319703178362453161318389648832866133732785762353048214543725218192026969713691172323225376274617961172141840321200558113051577428746175900248288054523023
Row 3152093725219280048585541547353885081487526425115311914651823282382755877292011632866128856434074243260612063644406418294376556922901351856160846691442196842548694546430033204223492811231253
Row 32254641518794360599932651322309421386194530293134256748602878386626967065012525589947012099446137611226333435767916528545589452361430804628388652069474274253120555682150224124502743
Row 33275434035662824127495939735169130838045374300144617652025460743655741302234728912048935961892275029844251342339573346211147787837688019363696767596144075650193932223762194622948603672
Row 34232619625177320525222842027468914802137578048702703231093364032191641006532078316116272729395018805188325079317438658413805215028792416213359761695439545626943985370246171506251246161556
Row 355106538739672235547563748945708310221581188262650522849136721744728727285319846479419052560435313355532734543932923935200506631521969498150013752229338484645499722164871265488643252092350
Row 3636329933050843974570569127352169231749085887160325914136112323152053571228823654233516004692441157752466319817131651837189457363776114637458102827423838155575233213216014625120472929514480
Row 37341322755166360538997571462211722749284631352047672114212637132939284941732230461038343112518858451457159419874489272038603113547734414206143030674281290836973594495049761653101926861124286152
Row 3826956926463836100710935482780457820834221475089327125823386331912599134802523474589341952864683238057731187437287432634878393632805121105439219693305757530215722943975780373144131918
Row 3942823024252243179249925800416416075383455119601371236937567803396467129174919456720410445835495154335914267155546875250544955945720113343593452262676729535865964412384539011617219059905856
Row 40385259262709581943862716320223414357569944639823971299625150226885335986235234157206251229396824945216352411642679327744704577569128103077184537471873352055825573333807224144410712541163
Row 4159714084434925831565390918775449297248704209342740455792317144992817255035415180412925042143248211122603567980421017593240596568634694685513151854212852329252382303222493054234119936154075
Row 42108390430173861275436612358562735235681519828074183464557861388352918333354355918352239443011171860437050163184303416412044490174951681718500244063402293647992015334159061460840164584827711839
Row 43362125504383597957615822500127195077318539559543265727370021945235278142131740872353514043534945127970938493180332231831852519228327032040542324064695482283533483413231437692018317611942058
Row 441982341612622835371112476741544092963484735401794571022214036235440674123219916212750402734345853439058424920516219053303194458155403154941793976174483565877713961282222409934503376483171
Row 45347227362570492052794189308111620815626307229075099333628569072886454664088394044835694437653174291483213946050972752873876566215033880435642724630224482955594919393116623912525513903462
Row 464104569448458504288378455313244170430744479262114593715212023024515519224242152893477395462242784198217552744365394575395252954045213916134922542357043923665100485531801457415258535678
Row 47442141234107456850083098540535712381556450295393572513842918232726534313154451915775368187241356741882288012895127408191248864399483336624258161833261579238334135582126836935997248862951084564
Row 4825253885450367821463009183402348335910693935810275741004147127559165179454121682261247586331152300262526652936548827004020951519489125711132495432613412718503653798693011354647888272213
Row 494284963522135533411927130231785937238113061661120357221573754162455915406450425301102310355446105348482237514277581135632388734682405951836165669378544023943163213614399469968542921455413

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.