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 047150027025670407857388443477268486322783144215130863512395588643222245653164353993144334957489922565520985382195514568814656112549584394196924351078283147134221498217984571137716835002
Row 1360122482166113931795989520782853561530623234157045174114225564230724619161155075696444142193916342317248648001700148824003947365335381126425036323203110332472644337481647812450504144225522
Row 236593250283354447332471270189632633756695496352433094291028966314035114642631237224815091501584324281303453644702255630234734158437632064830164551012093540057961056464328893965153835201999
Row 32683178232364931329147365514361550162548297937185103124526863775657551620224758160914224553266464144262816024961262742847435862321540334598272916483614527646261331437946273783506550033439
Row 445811024219718924457502853250921923480411011521072394189559695608592845662336157521791612201351059914827129250553829473136354853928382412981677676380738684156191750204262431191442303918841
Row 527962542416497518662616248418561443377691152722507454641243434236954225110304432282978120051451997546234552911369113733752487162616754613492278319455348422557202583496222748031620566011711041
Row 64769421542691747541534133744487686865425672240440530533866457225141357135444587045578417896230744045764469363935573448325150400257945641415432234392282497554521338030582386195155713743
Row 7330540284447288322065408595626105172464826721064381150452552383208238193797403125879537812624600275743209854708389047282013191831744895412325814850732175234983404185818784908111342619894931
Row 82058139218921367691450735352657701720223436594474246557736213140370020119904432195354881835381113657434923562617313854168331234042381838915492455314175261272365129207181896249643395036196
Row 94539102646274925134624303187812043225150329341079318556512110033947461355555364387458263014794544491032894882394534843421497021113913548325722215136037755440286370951947765563910494712
Row 10425160440752125429108829189735997207585539423691327529125801118823942372340237541462841616855335966316192998171233012492315440533732744549329037165489497357134314187845342398720322736
Row 11358543448950422751105135956331767297726313478330738795793171112522536120315422526922038382241232244667446442116981200456913216895072240627934302038456034074669203871325471830242437984365
Row 1236275340461643181377243724401601110390458111801210443791932379234514337585388137551451287504311822000159030114424538813752050472759913681042428280817043530371115145331581458921263360633425600
Row 13419112225975333525095018451645096071526293259952900498247212890534948255317215652828475867204121785681193334403286527530401476497301448113005203133261514263748514446263217513427135346412775177
Row 1439584931704805479727452982447746774221762395134613238444847420481453250553742966514242251411177359754837312546161612330125735424005337753387493583814542678055763377424028141824471448613276
Row 15121942352423602459165221322434489525710492100255736212642561997197913101355579373521345368411137421815934508810423210306527634516651735510327974168559120535216169046102836433151713833310
Row 164805187102121513205470532516941650525978126922468108719685919175137025021454718694611600108430152093920463243791752494248599385043732258451253983952162465647322853112458194821104315692522
Row 1763116439146747165475497559243394360643035145254831628315903234234110226322922641288502431172411484219373454411445935165272849219012422323116411665716477054684861131726304944290658641285
Row 18300824951576327237826003881935442232436465852782116237936313351162059534514278556693283225345294599488334731505474647574513124033317845022932217252143744495285922652774020604290713712224
Row 192860588450082528316712611057176614345293271488932861784128361835675150455057384363492442331222514935105242575241761219763276496984580436632244860542823875389269912752675448214032922049552
Row 2048421786491537651913629133528537726653945598946401220485562310244147186718843575425412722735529394747559314238803148330802589398844260753337571355910422407958995062529938346853234529
Row 2155122062104480534782377433314241131526456621934747274145221144358511291676134212631586176353421484824464118665508496339559116824994864464548753196685245957301939320624704604349551588
Row 2225139628511610315821923094398283349593490579553543549962185224125607727560856757322067540426705272187431293620192847173644332315675253481375923464463459113051953438665955015348251119134954
Row 2332371520462939683586403263728575906376647618332482412051564049337356371807571940993981023514783168255524130419214643084142929831712539756857443334245649379939001482280202063743285392273
Row 24135511043725321334422531518143973344565436528143524192239831298619838644101631466243103112494232937493270572040213404483023933936496281432517764787695782422312222216641346130463627
Row 2554433910403710742571234741861512267519344782239559552185122423471211853161337196119484066174217052873957811274810034438219149122475326414834821145029941495338317763889333839605113568440815298
Row 26284514522584792551719994962480459565773155295842113742587068510061352550524554346999583812148883175408140012859216132985703361335554495313055543457193455093230348546714401226336212422321688
Row 271629468633262845231541515169842345515455639528134258400836727531137592021030705429343955458954878178023110024011191926302697195152571220210577229173382871472733309957304740346624835876
Row 2833852692294528141303499270950085278293993289485826395985808189612042913266841213250295455923982525322272135171804259790244955542371546243040424363123183362364056062219279559130272174795
Row 29593948414915318917954507117118473828389253645631488265412529398027493069440338053871765401949923984429745831011471537895053124292413911062798530929526263200231525636882580438137175601129
Row 30785496315081717285527516347123824374657234294312367336061415481147114213411916634838131939785093500655834742723111846023507811103678808563628405520345958652421753370859155359512247254070
Row 313334284457332171416237101264316842684737589053863339339754663449107427430843914579354344995035229622074949165413283674572346625175455833467931652097184714338341737818417251332831620207557
Row 32470441213505247261953851542482543333196153200729194815252323745647120255391743304897125764785178974839182072236841242628107222442977318486323611860368869450563841270019752655522343482301424
Row 3338874044347248586202257646136717427173735429753454806541232151245404468198330925375399322075201335861297361588717214247393151933105455014493750591716224673651591958112457460213215805863
Row 3481325632954187260138852261461414713558497413585279322152884471325383759194075375415414542140414594353386019184845439178112962002473414834602261937443215409013012189544757954094735505057332572
Row 354969380832550923491728196870155883886118550275666248010284400396356291019170728445108300750324555358644413289263641745860160419811842113433019124080503014991966214526163226941553326571182
Row 361050236340251585370305747122955149720015591567018601194165120443306598039561386500954543352522359794983191715325015257327136449357382224305379449331260529193385049612793204361148365349590
Row 37279173555992245408748212224306973837562084331046821472245120523685504999130118094290223426583250502647013860386240504450653478540482897287128695121594036062876202391633444169316145495373710
Row 38354718385519183740712176508630968772946958492613951610371054424507580231136275195916503254183238467103992239512471702594230841220177811553396863425142723809520831985203817907464553231487
Row 399552950200687034534547170112985257569336935031395363435872614541147419274299142814082219814783284301523851928233738712882528658773752273844235453403636795145172941825395362176831534772509
Row 403162504535001442312656982919410271253032337504931745219433530502970107314732422510951511567837333221061985100525849705609241940143109386111402807779154955188238864567325631052901306743974
Row 4117782496308292840623918426016841163360542530852969184410997757042239288348337882401564167496738204778386841254852184159021347492383054092840509055769562449500140415417845514054945481378
Row 42237610315166477715958395744541456163611353844675452343958144374426952221213335847982169580637992105223464353494716519072610922205891586918147305612122834532224765481226732204462510464723846
Row 43225938292644442836354424637285850843985157442744711266644944602253430853312145153556765367299448720402503311130852975957534480436003771443840412408129531253922868139851035533589137042067198
Row 4430354211173327103577203211965616453443072701150852632045231128625816749903222320444027261549125424171844455315542151155132456472212455165229932763611915181046674615331839296605629791475377
Row 45169326982420571953121332514310295776445845028639702906500852152070130624912431322043001098183516185026249412465817296916221509566640421228497853733717514948284575435279833624442201354325747
Row 46450318622966280329594800442019851294566618014262128733103927532945382905470249092911385037373367328453472817252547160147110502022443738524981323722729654530193827662792322476718255346143623
Row 471254352253351031258390023871791462841114338478755825387808401832395788125555117535784144835192575467235953293122422089152478572914481581986534739672777397420781114276016595013568567737393356
Row 48931324941087154697162732903368522158345921428149710691156294526502141229161749182642694313024435353159240294270394749601518205556752153681296435822901354621734328504332425484198758921624
Row 494278508541454232015721565155311032157558253721034542890215742161104583711804685273847268581066376841005495755399121724032449827132574169932854139325243872952834375839713754647255455915750

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.