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 0548017415222172319074615158648977375048299031502171542354304008350351292699446621321220551563633755191303228714353919209126221720212419737951065547217244808112577433993472143548953378485513
Row 13211829346332061033233037201912463119318103002188499858195056407228920384853944473016791421106922183480250255351539488935841237191626571822225510235758269690152941015314926494896336311662096
Row 25790598627585678267315174100600317619923381812302658411555252713304901542310846034278408613283911490038692398328111013402367258145554651506750502106572610612732711531182515213504358624893231
Row 31162426712363161595131204051431368572419325964811191753684595220256812563520216235160177842966205665294135105357688503438957295042336599211781177502055061116159528683812366441195923460
Row 4301089038545679234344551059487140492769450931114168211526926322282998108814021383443914513535554848454923752440389129159885680351485021871058845929600023354215919584610535038259945962498
Row 5422288734539562439501733316925911750355056115716558573445546132183158537504339200747589484215457425391933144654602949486518657645094743559230332385093421571613549193465486650118633584
Row 6249017572690183551895127591927342031155954474175109823114332349919083051136434841827239813412060500442043615170239612719121275271385824773246232442591492179413247865200251389244452262157
Row 74795034813573663453573145453536461527493580543655145577365339149113651384832764945148559314106525523223385973338751744403481528624270863369457554577526542942615423719902374458979611243050
Row 81821479272332822571575230695586325535929911143765593759563940706553214077545952693423357704759270755403788568430975932117851004936534130737101306799409742841216108732952242884128433
Row 98531925356410615425688156218912887189340334652925420552933870522144425101254730792057308646256323738413413153311132526781232670550015791798538746692370148958431333517536003255562779518065170
Row 10362011154691217616952038130822331223117928341601350199734685500278125915572446642943401271140364536253219322537501515194988503629053648409730581243405536783457920812837525100482316112826
Row 11290748861869426656945617115383135162221683621573419744631359415772393205623822918554949214433365323879119524585153284421638992302743535915654670433923548743762307919715905645561727693749
Row 1255911916577858571921562720873366442264620823113573455672345488381420334502310443645632725132126122534773419181038653047400599743863902470415713131890300445034142660404023241935122656465966
Row 1328726124674133047146921222540115895915194315445572338074134953595931404504333324064267914720739475489542348452696538439202797271521935556395285239252083266789651794268331638455795361340
Row 141065118615438921063331355524542369461325462883091141840438895573258171415628114389277418671609433735199794196591550555816526222745405301268958811232502424035888552157747922028364422655447
Row 154734563623333575028372255771662851530222462597190929446250448341167863136726701491437352012755985257667546315775899450633721098150939522986401239053320468514204259329159314685575228204552
Row 164221477208216444012335349641825067172246885792861754657590336724317236155434965322547315733033364421013815277927435808216438616415314559422721222274349227133348411824551808430426135135624
Row 1717623906784312219543844233217491391601359325772529235528437604182148329659602998375216477855896352422386912481741273156130444440528955835400510340128485316552717843478127435662744504612
Row 18514336825643391781743111368515681107214575341226980013403972491173114685986381635745136244011554408365741135263369537413265427487127503904401356692543436648537643824444545650154333249
Row 19585250375078148154453509280916695160500590016678920453907469322452855122211132748450334693368196249572205364322303812374239554054477508253134318991320811793600311810835784987150856103735872
Row 2042924207255334434444531974013343177124046673954152825594686178050315177396981817105415460356692433524938513155483434244173207321138535346514117812676720500236064750490610511184463295959393835
Row 2125561324138442328443176445466055654625591028782836973372109715323033028401564142507854749985402196248146895130396568612823102604893415488815862047323340033831113169100755291789
Row 22369123241774192718195558638267333915123546134566897783019177015074210506442261744211739864776376631151051542868236050652141524985266527005684245247441374977237745555606583508343846205184
Row 231953229234555315983098504214094886519626755400697789223743991867459134631902245147124521864372529428974576672879459437422613796400559923740430439476435841282762151021285908130814513651
Row 243909110282813374009450628092923118635504010561148311005256514537373471210323559843695215421937444191182049004641917895220515337635395213303140401222132725105272493135336221318356920542859
Row 253333459050812466955025440934703535170341722397530058802926582247555506486425874180231848512915333360046343500313831842375638307505911494857371949054090346058263023552744904292297928415864638
Row 2639061205756190837334493409331371123353627924974258426040351812372358361302848963807539870543283806323553521666363966552974497726532818454080333952131925144472462386129682219264842211497
Row 2725585719446699235346044052188715621960485049542955246454045251464232403810486734413396531748445315416017135980181053433732814250618994166260914555167290329842195689355722151939157849851034098
Row 28485347405077213059293311226207238351176220640173029559173946284837237728431234341969954723767292717892461579598460652554694592571125283911385846541784439495730024539407442072457472555364323
Row 295477159026865482298192826964968502822851094242163866330958445464579233331478226125613321881342320064322220519615459128620565670197645146642477026724179171626046242972630399856152152777
Row 3048481229229211362015452353571782415441584306266636713671650262894557359015989523253011741422669384426203142450853994260350475841210856014193303182413115340115223482220585583504047734957
Row 31528538303323866173957013518234057445781226439347303473100478610282597555738958028474551473220594744411133568912952277473338391411403453471872996379939023571631468755421912503056363889780
Row 325951643175532204408101649234346353126994493427922073736380124297043025328448136806231034073195442122922187589755385381382918576604580263242962747111513812753464836362745731267360919222677
Row 3350938804607271360651065501514652923770168756872711282353304377461421742651271270262135461155174832463824176919246092183122233043500496880853273199794356544211471134650531365917379157395238
Row 3488125362503247111022239350722025112303175917432123033224325641075457352484780528311551091603132371017605475250156282774351215503626168302540174328041723318212521940344547538559067634410
Row 3559725404339845745414221257522820576143805261062289566324033403167814991831965791441297013017304792956248381826056314637373256351859193207250116922104332943345176041056023300681669
Row 36116839785076429743364933532447028334373442922585079440358541183274950335631413845942722241285333256185432189961936854314646534846231973172388354697754377206145731483507713311085212412634691
Row 37101140731056475059525719113526845042346956933054325838551234762382464318824865488917483800199043333294433617751724402850351727363426505867279128612075973515765434185021574252673406286547865406
Row 3815714605180341818375944259111143740051389140458494572195742664432103646224875019224597543633703008576729635602381112942658212259914610211517703514561412742292297458321956212289219839233481
Row 3958138795321403333855048754163335615144216165613455507510220811089209335829362604475966616892674413488444347764787153352424912910268544894096355019707791287392326448672737722507647695582
Row 40242630291837432627985778268168420476667752314305048045071489215064549425610245594772365154603373231628857578829456848433052304814483558465149958567144904501150911793105583315531075831
Row 4157329685889472074328148804624216950804074200257446161785692179447825253767387438735583775470246252691155159214898268467757592906388434119656203633591348053544307941124294264762047625006
Row 422543102517174085706270441641940210233481263227056912898304142551074348740484751174175719471087182452369531777892886177195942778693422325402316833552343529638235990272810124392575327451694
Row 433700538559462816497222866212219783555527845119418526673708106358759372091191349592314457757284988398515472803636449321123057422675117949354263311729895702486591434560446771460550134501438
Row 442243401536445141941285350243824218219144522695749319472523542624297841373299764173535719892196338930718043750434721751262422814391996788131051485740145527452675226519710702711569858255582
Row 45674587555594976317816204924225222985333397631532090439453253926889306540743772156911744166248224783302161723574916482837317254420621418925479833862907449454486012075302652804449022832954
Row 461828447457391753322247024421954581113225785311342231637821131749715548512150852292029138416522463657129846156000291651543556441940041732981771573131411985120925192504378039661425347425481325
Row 4750963283583555959281195388483416014190120548065866203817255257569247104849704372188356324385767251710693909550154695818863292125384185595218541364945059486747243530208512512717270846863780
Row 485701472828737164628514417931960287724622618434740561446566825162234399313103468590226705717126013471906173555411128203532922021373254564661462332956714139190612529531877590255385289313420163376
Row 49455654544575409417871503150284417225315013431141815496583940414871318753185358150455424976398428699593420195114323402906508184552612413814519403748682841372481164417443309262448453981

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.