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 01041492459825966505442475559180947065686178302236942691698587364811073064147682114593748544999599686944635094464027613535642581012617450456604425321053454603231303948711929362525193035
Row 16893994385521481742439831471737526716108313906188596514692143106640866467252511385669111340873108598315733250230501421495905356922375303715397345692325480424754210576939433528342029
Row 2998155845394853162756512939473456342953546621353887262990744554865209517028384778149416411252570414095195552242122310533800576159055426541228434159504557963624117957984511380870529652673
Row 39132134551056903628115194233322560136338748021358443926011119434320265311186185557598138097547792319456214845283123423971417744208650451895302823774454316357633255452142015856563925441882
Row 41693729206657444710587549754892193505897214762923368289310355454193829292481431413835643407646384163227644933802482037439702548244037141258231542107464507326817175983355950852876459445384813
Row 515231019312629056611202154248243478352626229740959648442849430910151632519847366957862564365233451648527193918653393461120424653661865366619076891144194133143440235039092283519822172384
Row 643604735323020294521579456801866144120738041626554612652829201116304694567635375382819547826954259182760354210242819292553831554155141275594810911940138912985744301484310085843285326384536
Row 725291743917334856516111606147712142147250140335072188355865227329556615175438616005645683134435775252351342033784988195659065161587232544812483486028816961006278857287846715314530519654974
Row 8448035057450433219172620557426839393532561994384124161866109412282349595315154044959430337721037297330863414938206048205288263438635320455048258772817520381172251416512488438027453715
Row 972826985230477136563532254346925055629503354431688385347304321171540492871219739265688271717365760523033872247360913159624336282851923107484272356505176322852784209267096620611400528737765449
Row 10215859723374184526885110160419182496385155272627381338635454300496959375727619511329545896332156248625382102314931574722306312938454151581729545754173554493605126120751418512315294421921466
Row 11414871057811026063899725146732801748161643622193921356564207133813018182551162467543037645428475498705268559015363415299211445169041252412371329198939863727320819061291327239774672
Row 12289580137872755523041631296773661136653443250290127593548501412754451502551582123161504480642471271213331983468842271448937915025371919533213795561316863139286245865897410360011714860
Row 13262516865681494031904487498219015198314388338863181532375410951789362549838885674118410272536577092329453369209418055993377914864933968597239152869517042297513056454690454302655825523
Row 142716557934102390763443649265325359187039001452367538935231516028261995131740306743014968381813563514472178516848023072884438137175273514321534198567415116835742963374214672194290142922392
Row 152032503154593323999327616871512199724721679799277945625180495383543222647203239964158209915701120584130363313274213275705477435851635105435624397925867443632641546523442108441353639422735
Row 16318359747311340207323002459191353355772465566254763428101946392533537410783324524155135887874747629894316011644836589443474810625568688229242145279522591916144929211392487639393014093313
Row 1711084733255362053203339536659484233252611123069242054581878304451432759596812885553222732031002514745955878308546251286397573218295035153382895717528545222242397159046615854346717054997225
Row 1816722855778389834887803044208265712970619435264381961347578912983764505583228527479803874140883413413112583015654784115134326823602212357255683278058543894722379826683385416141981
Row 191617211925643902486635431776273437631163385420646812169432024485019212146457516044925442819923647480628174329266044313104276549287321785415415395356874790106830722996574852401315577140903235
Row 201917266448388411091830448758973646281625562077312583226265998300920404129621727520220294798219717774038351215482127746346447905584430458814132791577840595607233313627323165276127291744800
Row 21314111355262343316453244539494033622051487548827963950427823802254415927935044393685246502699871382343437474110360725471250474230733592190523962131844575841811330524697752803524335715341682
Row 221495785618100052285886198760933205733471892622805968566853523559157217485690241515053871374575148473025427422044558595523525135557233524362545853394970277850713688370413513655337170212134942
Row 2324509031357395447735101470436202126297858236832932217558182504552641791962486431494739393583624425286449058125987570347542437606110391537852105094299713352072282020185003499418351507452014
Row 24346833843162220613193998464860424884460591219032133027279633223417217325322511517038674582198958853584982172050905501173325582885489547644203289334124806538018715396157050842422436524065838537
Row 2549372348570728049291695268945132677440836032178140160506250354924326419272335206913064206146528753289388612395694372417764631711482143410003177412255125854252931152032266932741093170321984357
Row 263630453242649352738189018102657763048571934994824434935693065783456834833905408033364331194536831024468460480566548172434519752421368193411323177195990722516784405504926197453545809542
Row 27283737134621173414658155540124742826000524947481624854144405838537851891030203696125437144500303374047456573548101524931260563626655406545022056533731220470426781020318882150771040898
Row 28426620692934436133236472861362543873334328219344348577431943983243926003433464332521164847395538411866114246619432182555952084251249335691573314042951981526376224793460211022536549246913253
Row 293524333450446874181445825284656001189989178274719732324037651605379419380319041954328153644063553417415542253270167915593773366573922312894578518314082773361348299693644206847335249
Row 302446292651435048803332371329422865373010971089100027762647477331422386100435217028344116294344629453911409050122644333814585569338858084448719352113903584125024874672224952621319102124043704
Row 31202424385874485855428165304349872733942510337073139682939411937751387483812952776242125455263109347944525241258159281161839336659896973919280411417353033943927900412518943838224356695225
Row 321080964200035003509126345922302578710032117714111839564079110746531998391146533415144020461342234017032351782413290454023492386714029921375266455843677245058757943164170537501243281124023241
Row 337211054655216131001996450032705231467856822135407931741548141651376214437485053459443344847175739259629992849499723935695189457303150288942304192120290710142549863274425546614385631
Row 34261051864684120335203530295935581255958407512219739765172109037052321397919342740984841284043525827114260729215522237290273792041054257444910641815457410212221369512171962867230639015187
Row 35284583419273824675476747344501488013404793431357616941168449657985425294586112391518188234605213309836562079540415561266568813903193706419594803456483914233561270371750502438221348471862
Row 365157570831016751589561588746874216196640905771323137781161423384712242382264957873220279131434490508219292727201039278818767465889255023354492437102146644402511144351633288955952055735819
Row 374437338460616571753748146682594010723401979386052771725374818264059419642635080286026644191129542961079890351181417084787519823134445372615895311661345497955212730270432684556762
Row 381464281858424324548240335618377751115074128925221529151234527335854954588394755474589560830015568512857302271239542863032385911042874218258590617994362172306248994245205403106430472760558
Row 391635707105223314310657905441283620601836112150925695222419651876280928713675117028875980365838294500306148921546582154503180527555534038412660319228254955251211761643431811284030736875648
Row 4031781362818651341447638935841153627851386135722354566188317891968272444495160300539444411512245592753932139930604619104723759801864301132133941941161187597825473231321211135114500130811837
Row 413450224048421393650396359523402489513504613513239669834924260998481345995191597447416925203705338136332818238171346555831295234961223360114581175100335225251463386549202160135731803158169
Row 4217792349142225225172662595658982942774227910061429210939584925333115583834506256173510304024459959501845955312933411244907569026611592207292811142104322138884382422753164902184424138213742
Row 4346232326302535733554325395533044508391043318494034534015394299498374512261612584844475500423026744816471948573056254025991678486529001034222012254989552457332898595715829325296312052315794864
Row 44457140671249039054941157657213659433277619930314454506459315487128311554476807888137476424692305605589153558544521991125911638932164104246918843762290146603961593231133024586225994307
Row 4510171074511319042447587743734752593639612865789441322761047557531693211567956385094344025393753140024708664424233234642730334845381842525198517183623573616541584221442599622982489557154665699
Row 465249510447932689164225464089411234112512443875524137905413108330413972800664133445422471555895224224522384181219172083106010218753748266234211836774832434712161707358750061119466920461516
Row 4714692710164959224956180358171197425422003009171428340681191515818163852257836514626341019985841511655854847234425489317495722360233975644255752005461375434531661762362359434829481351006452665
Row 4816784295129050872931131420258775978443641308701853852447235823496102827812957478223346175543385645604372266936595016533353373311623442336031754262534791731106116092601124554601072482729562100
Row 491608591288118404528424569630884795236474638101697831121231945064723407211312202580321913810240334363270347422632255574387013645457104664877540517515672176824973482346425794602578310853325

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.