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 0163813064513743172484447812580370043083238675565529193215673111370576646495780206140544978415722885392133301241130864938254037303125712257350922292273339955293402964572271453031682640
Row 142951816242035558701397451221571936472554584346181043968865539470759721123799288823851197241627244161247349942690564116349841457405313391327545058513484138545752941573138413376165923431213
Row 2203438424101441850385171141319829901355888263117688714087582122105414527120602897655634583838610181174100294012172215297450583151391409683225321294382126671181451443520524538425642613952
Row 33526320848418195468645661971185955682911307617825884213320971275229292938071522749473270312004908475457383163301436896883334453648684287522134342581080300231684155478330512888804325516
Row 438082131203845572604474057561511349354934673507318253603840171742282127938166123842018466355511733446260146043259269752133305630126895660175244511705244593858425751311952023591483634295717
Row 5577450902101179137521651196311974252242255225177339716542233409234318932160278830621404272629031154584521054744468055334461445346235612442375221222073571464462930935640202547471873243410903765
Row 64594387782759976033730115144758345895512653674355357939894916382336311272939341590465710271230682577331033115862868170947391694170553415423285657875256275049134623110524922611203142974
Row 71146343908273649991934396656801707106827952568193545031306362920864730523064434230858135346930917183835419362151515208224941423481814923356278311725063385039671630578524692936341426773582
Row 846557404015277255533361370247051981242140613491757348838423179230553345345087505559729374471122627229404161136361717436003357575833722910311810743379231623154785366440712272150612504576839
Row 9178436631344138060058152605332275576634574372250940571728226614294637538325022016169848178005362288830718674137164717065920531030491299591028633903323136184669688198911774744371634421732353
Row 102825267443694523149151693885437822404751251538864562434319635053732310536816353353985304102359731481576736894923593941174726134410270410335784154248158172905499537033361142989886551614003
Row 1112327964338521710995360518925795126287715015064291832481677132735185779490516712260472145761255242419362683332228011843132440322638566132483737502124373164146531318163210223150644887355725814666
Row 12246142529251182282721793606476348629271563704225055953342191128431079931527913945077459232102287822227311734378485458388393105762202159322941562646941802552256250628025851584847122693926
Row 13564319712319472056255281006138418012179576165420166003758277826213690571922462383152027982639402656002489387343125181479839541152111726741713644367930962444585728573098187334578554650784544
Row 144368232492758885121356539134720531786303152345839853851700365820982343133751944787119420511884306655072739171655841283831907220959711028577438835748582756692779506025237635444195114211541
Row 1542942757734308139502785496410152291170327301875298628133782519527834810496866645574794335133638545865098329725365194838829327555723909122523562873224046474576497052215611782430475545653114
Row 1657235231167145175565300623701502104566726862622450435155896407614241121431429633605078287223295600443341113903518726761016491019062686342614715692579516211795546243064416396518204312204032435432
Row 1724711539279215494411512011482843323150502030590666939181227524365328324434159490342373621320826531585502896536252271396963809318816442220230827915062553818411091544419062029125646583934538
Row 1811004552344053372172647199037575674295413821944335014775753537312019722844591010342381175021241825365641533080231345461617341330985056275052705703473930265377169244081321504158841074557730033045
Row 192421291340784801466320262623184354370546312900532220435997437847925266408035302292345752226994777426258258503839358528952594979735060515911755686147755283391107242727122150242410899421690
Row 2051694472398126263693468014021955526212525793284641475233435120511225022944797397858222187408522484899234467259871175361515656464342178133393021318352932282443450865128258151382470170042494972
Row 211993304629501814523210344062413012682734411724433094327320891435505354274455223547207376693805586532502943233549491191130694242364255275634685288818159855635515715299864529875086207920394513
Row 225344274323212714943103711352193397934691142517047742083340630284839874231656562471287132072185586938515171495559291210346746354846991733442717362867619571433617604884510938432289213726813162
Row 234453233756331324554318181192339398914633222198361337841682431155171094623837275760271824874643182732993239643010409424165346372737394888554449312281532507756022730268933854411100029014519
Row 241046528452468052002173354483829206138017925070447442074416220019463303174387655832274595251845004264125693415364054701934468547541179549075529114938458349725317375404237904581245759895275760
Row 25173214035342400613554526300939951095423163456523573195318353558097344647464656541840635030345918523611591618414137567535735540501715788943542458648884637500952252011365840451849006484591
Row 2653465394324647633456227622225308588621371149402318124721356282829844554370488433433006389238642206525747047244157535153153502474525602265220048364487150847226232656274424351376306326216734761
Row 2716315562103463644485966842370546691566186140208805362276434391627496422751134719967363126374031704502404543117428052062730490869851784873153928823542310447421561398341044325142257303289
Row 2836965843376046925788862431374753874764178556032802402902187937546710602476234846015579109016235625193448749844923177526804765553513715342420380130895806427612675366155615065655374324425121
Row 294803491714693404449625583566205717512052104167438273720543833615090478037812891186935861167313529522723464026064661082172752685998319626714494575423755015042288159021781155310161534764399395
Row 30125712902263484224565397179451784037440056435118127491151153322158236093075181841584579410657487564220505723711696345627662952474550281794120144253587379246119872115792113493269454345134302
Row 31250923302460108843622071844465612644215351471998033033464850974664443226845042893467050632471782399531642164507146627258373925381312731315656592813953870279114485035813577485726782241
Row 323288536112834181403034665148124340381550282847528017523683320455644955333552194883473030895161484319382742242079454194660408247805943226228092882913162146277276481473723995156321119634111
Row 335461182299352754270215341172084894537100243135196508330925139134559015426425715214053498421695526499045684681220153027912746171157842020598119361371898306731190514358682732234500716172135
Row 34443258743656248548575824201038474391690474921348127926313264481261252004948800305620198951725488226214064494387835402926375111955410260810191419454541021095014330559032934961285421045572
Row 352053105137120836702360125415846212660465124991991576249139498628572413240433111822451338111514102110351119553206468230084257505350904926141234450833330033734253132025310278045952955636
Row 3610082699294628291211757298053131859209026750657723274332158242363224712362706133012685709506437982910437357815054668213251213663159534025773915231918895774440921554839518154292159500517924406
Row 372404497573515084205479853061115317158832619183896513032033254447057801169789166894351983823578143783252194033825043345362235397951301744487744352859204743185477388444134607108716673077867
Row 3828363866253537783063357355914403608549848222650584224431895921157219334798747918444324426847282737287558154404595168212393816321650178793572257623191180207311403830191535834019183651555952
Row 39633516147421477348530102042225884194625583470058643650391548814528148714568462667352919864975444556845151279472344661912388432083388136921835921590101361121559354310783585222549592112
Row 40371241529583793944494487533874512539046663234385657711181064396524861281155640751381516642891316347643674900570133261012341337413970379116842913466650711424405637374658191143135775297422772261
Row 414255383333556362998462495147429915850174317861358640574830137757411743424811316740972547182488601599298231373859123697041948713967281818224441580816714614125253222004181136235763921
Row 423104361827322701714527920941722139369347033275155259394244574681022112563263165123714302526524958331465676219450404597529826571329556843716071662927455355479540209064734226465255434475
Row 4332142174512655854754390207913075854275535014894135127981551267923655921328640271340313381480820504287354143144938308427882151525719131735573130338141037156569453750501920133560045993700521
Row 441884172653359145107534119643393288127823305964306544815220497821649505280403059875436459845244485517585950855115355856059995284138913439054782877178323583154411323222182593154251962809491
Row 45447583847839105436500223955952486014795067241710836517011220977906983853187330551007598553771225257891842053861409489422418862803565988751985611574767646782163175947423863297957193953
Row 4636763572582673145785810107580223881024221177424335114199743191917165652061114126749521790594411143548468649775264404293042021975275549325532565503935449526357472524955688272281316054377
Row 471827195644496945085587832056427350592582267619897834651474357155204130847535557259481513198413105819370521221423208221404142172511092650131211914705558425012872260223820699119811784114
Row 482288536567125475351580235306605620123527821043331649215184504129183435212205395936146918252196370738933107468756773221975212289235215562269310512222312228530033355560119242539464119534372
Row 49499331724910492946407341125234646274231103343031452200845154343552940771035579429833472864130170124643224323911045177161196234852050259881253149333458804379436741835831374269741735902773

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.