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 0502110412021574709526043832072383971721714915502429932255292146524874159597631963649395110113828947592428276985615166057404955102136703726874191045023967290310562933993523560720126786
Row 1222936485586364345794741524562441465205312534936373161306855674613503047866254694658218810192352497359332586431354105793447148557924546466825262886528734942833527633961308466425332135224800
Row 2257018491041156326792105845208633204169406013045562118930345893644989501755521473939241420711105445936454166130035272548473818355916216210284801338432513785697424309234420014727522049015729
Row 3763176120071997790235533123451442914117225076406522801571895167555336028343709177177429544394920560942116457395622298044843747695640597059522680366737264066478650013860108325506495332
Row 4336833643523435571930034380493816913165167623804188404520263729120115163001362241214559545724615276546492335523838183178667519425515502553085585494136481949404733034410438112338784256
Row 551291206355353597742263420152582866265520695411172517343758907564634012591205332965979333255363300538038251842458350369356123526231023813372464656923239445636811024919520148482407723844
Row 654084348145238404436259218792957250314813473561112103413388844132222398615615425527959312705221410927602513911467238064443139551944990217337582873575344658246694090473026692554782872575160
Row 73964383358482657568105442854799157528362917235415946353711243511244583245337312231186071452094555818573333151049575013591718292837427622993545315422891158129747702428561231984858273737661862
Row 8414433263943291413561229423054172112562722035268584343976671882480130988464093416339792207238754603918950154448735675211753142573877710232244922136543529123948387170510364240211314654028559
Row 934935071226665738153634898498211372371523680838132623743582116032802950513128041965266286450063040515740402122454192172024851717891523163912344022553737582981244922116074307275148853017
Row 101257447055934031458477878047735447258415922524378851653947407139052615120854061823243120830232789419940301799272033696244934244453467331069238652887200533904706281931582622928277823085928
Row 11226956632139242238346061663490283229105691422715415119157458473123209147032512369315905312461848315762538134294167583094836993237500635533283353310212046552039031830403021413928599650364407131
Row 1232265857518328524732057575523463223525318282632459318834434422054207130059421754852226833391038152522015195215633634219112938658334196534153662275393842558550925042567935015817409230825523
Row 13165341012803459546213127560152244758296412121927299527475222187543805477258543984903373543873410323054593534673132519837375253343430207215381427658511459100049634462206125734143925384332761834
Row 14329938095854371622424965350293097531079494773917654217859612103154049658918203418265096038051721306413623873433429522174743448934051831199813425940832192431799843123842356237117772289
Row 1513851929179425793863548178837692584397050361851845393647643292316975230523077257253721094592499653182281545429614662182446945251627487553543717505864422433744917567735944429356748752616744
Row 1651613476426760542934803770487746523781100110863593555039783421334458205719216128012424148758535928248453601319344285948552273494332304388524952156893162584644671142855582448326932234493940
Row 1745702815449749683532535946163553326634520895037588314904953181330194463173411284816238653625546615319941354912393208225264484813588823111390323632062982206150222134410367858738224348
Row 1836715632876541137792681110530365432551722473761522625225433537535572615776145528312464324427752763852213949075753158317522886270042511754493307957279463446330612354330568244492806231524964194
Row 19577629814812188569037473721438440055526476719721970158316852264280242854344499214965460190735574567450243864281303321926514347281315371533514820569445036423463731042558198138827434601539901
Row 202773106541338445984118402018714179534241762605109519391136164353442204287546651054794543946553996549323642591428553817734229593054055759354213351832491731909374678550429925326594457062154770
Row 21178668625743256271941853677301952911974946535652913763368445004042279161169118058115954100858195792178924473998497537402120379237452462182916155692348208419511179529056805645353838144604190
Row 22406539142216502817593092874145274540715851569333489368356163720388256519041976517622226364234353914113909349341243304130748336904408199697355204256409930771167256833282854250305038762846
Row 23226154465571596858899424134378117765278234615593482593533281707888518161323591092591192733417503978230729141513136216443867327161496773780368435902773222835444411458720002484161512921533
Row 242835202515631313239121481235564655195628186495044513872383028792050147370145373096443553312006573236252983203611696480226262857970132835037385906536421787063922840434918223963325755414299
Row 2530881221395424383435417038702057500621811322946201351112482505011334922238444081841138317925687659382820844770882365214823252379761132505373472340203746593740949831792172752251705153121771870
Row 265354572926714130530642155485601437655571720432639412512590852844283371731684357147219953373151966044771999139613114203926495743173876517326501139178615191671587659813899841339279911116485366
Row 275620417494143341236149637524681326428282774472456585646119323564135427019401374141263236033595428663261112583802213851385268384654132622356780424425261081487226431719422032144486578125911032
Row 2824752842256845111834617149452245371542100116305573490558805159299825602621505337345086436911074242242611573144462970946314445251847155945253121654265298111330432335410239841045171453041701926
Row 295937139618945677173485515012671960361243871848785958205523851848290810754761382952601715272326451716560059334057446656233139330313642653393314558633204076138928413847555921175298509757421383
Row 304932578448003200436817562497843453589586631605306407028395829140395632135999273427763986348487016599414235003825512880713811537038021752552632185178362147685956126426835028110151855697
Row 312109459649413210445234402989545014517345535721552132643645359328416494244232836284685226741542905443113183234458052521576022538403233001726540618251467538718052927021539271541254562404684
Row 3233774771149949294560550263220351389571237534355123952394184470367215774546517395726025469270734184782413249005455163516553776434443401955442918529961738496912832380553057206703290210554224149
Row 333000406711222473503439694129373531044489566430873144268932771833187330884581271955375596550455541103364250829082623573950305842803331831965518274651083658818325545313253103016074365200835432907
Row 3420812778507335212220538485025754687508849421602514221014294216881526592063290119392088314897111922752194737420879126514462256442828763243181858431936584522484091888404046122747571552942937
Row 3575856225574365930511642401019633171499655613158422011585839451849159243230148657475985120944743051403640321876165136597965081559840173922976834387048604557253348604251280315603754159019721877
Row 36455010624301425719044543132660635153094153541775757599810824726569021521092435171355962102755643811750319923262291446458632899304840711384686576359594610353114002674588956271885106324752693
Row 3739941569264192122595727505398322631948209753625261797276436447264096377686218842068492129285992603572448981262281555849472742662654572127396334021183315852404401531534614959919564656
Row 381918592826881545951511470153553763230695715189662182284272741721820557149493749553616721821514537812513707242515273366235859433587126130005342186931702415132372516131377355394522414599
Row 39214141937725222191953732412144734365221221826525582423111819124182858814571239238491007227172418935961376437213946246838315281256155281414413624490346505996226057912351392631548014831
Row 406245631423844331224105712495265335543305715511047423897100522543735496264233405940228591438343309470513601089522403151442358891013481721856302503125334812653114020762667867313247396724891
Row 411165156820675960266337945012471413802098434524587796133305793508216971979181258222854139713861723081449021861423619259459934308851313295306528750825363405240422526424357923207437811931617
Row 422282220205750345015403259351978158039683062440654226285392174822955655923226232984350528567218121415022367624243731855255735519153088315057825558398517271334926579524752662743194713234746
Row 431669154031941476546556635165770579626543271196739652532489422402754156114895889191344892756657597524981884799820530856844201103394458161258455148144211304833061410465651463555983485445651812
Row 4411222175583959293206420933075317116944961065532147671740375678304459052867108529582362545611557871827441912541959255631544226100558839455971567428042771169833801053433146628115385270644861295
Row 45253532962930133811124964494854328513127117656754665181610541669935201555335880237621421389183611378133717157122274598231436911113500431552624210626373988511272310082187445646502196198747825487
Row 462993466751264469442549891541466234654892391485088738735855561350704792433040995874547831853959108958702396186412353656354615747454035596764501335842224513230447351331195544111255300457822811
Row 472098437553763334234856549441125185617400616505270334621736513050596231467193335641137481849001111754264449301262466563934253924705571745651870147451159125336310327354459848153410451362
Row 48486038831657418834011995032334050735776529417653665219332733961315507952224521957503420952742581191355031903202429321475204264158945001172881169675643844480375032679101861374451029454533
Row 49507072957771491400511512707248608422710273121990111351634040540139855524399616975913468015545414849520454871860363933504599132646973860612340210322534082587964512333525111005054294359

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.