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 025034051395130823165464046564950286922351417217646353113117831822751667269536992540412799543714421961465829765626713651297219731014449113156956436260940131358345639674862191863812881751
Row 159785676482625715868521936759443572453329334101429512333710305909101615073732533034064817325321556411627453984751013406446231122746120446596553632293945158943283021486526822585430649685135
Row 2254233182131981587838944005511244035615132287927884532483018233827366645747353475099407432003381879123351153101280541029891522339361822133034464522046813490214246272138222824882881974370
Row 36044572546819805005514699931172690410827331016374334122712171998425231301070353743582403251153875950252945785253310437632673247518804826424854095691326644002764347443247992749140576035385368
Row 4571215953648611258266124711292414811773463213363244383206242320226547691115106757741679557334673674546527282308479314583655432524464729482326142764383727223397658411283253876469456655651
Row 56699951973106469349383502386536204787480934203444355515942085172421324033091825403527674472425424053579519754282542537630784697492421563804972745558942582966256710065115198467783055862881
Row 65847119537656953207733196925463191188457595361538558512629582409991315915702088456331051624954964597320601263480065336904915024618911192658665854467413951910441730752935267147384333849
Row 7398633587062702291220912739503837954152189936713459292386558321154403311314983102124850916064878557917081121495537846931136138415529411525257223927563681472525885448241759457171656464740
Row 8988478121614423295491658595692406635452354515111383752266039483178795333375440563581111429348981500543178439071225915263657653701314011832509140310974882350248453921352148362341124121633268
Row 9438547462631515110343802464715232322373136619353361804591848967582279367112982523985413057333634753338229663857561445905806359283346703461421059885855573443819749155699685464151431643280
Row 102629775931519426120741712621476558256488821616433712001723085844843323659863655655568117549074980450042601009781533441522683197732064701230755235085453236627092340283128357032876207
Row 115187224011093111212828153744776125759023089384221561410239352106831291478465033963581113579346832800505321868473347497029521929562753023404531001645285925642631755435729832444346874993
Row 123615178260531254091409922101944351457192051435629604189200317276403695600464525783816266451144071589521367528664739999179352323032950331352237884934226254541124529118793822139253237144263
Row 1322717273674184816261160299250464573382911032633163027903831167317828617493569483513293612545043525148961909259436238473280261473678812139323992582488551334544113337394273159457729851825
Row 1412185694228528993066226168329574913472451213597003825558292620432830537552203448173513181468279022842031320497149602571415918926631810169811524425211203139461051569254647411035231345035414
Row 15193412733874110615845451105142874116323545705536692425115462188631208156285883139146003618500846272604836518936281505832580953892664254216265682321580020715613207930596320618863568807628
Row 162230179017111983204374411185351224335843611364982372957012723399396217653142238660348657514942198194147755652980696424384316054463161548761632731375247126404095451119613562395925611193
Row 1739364045398035883538431823022378111219138941621206281243163069264930993619285537881553839580249074587381013435142423532615664512537365133272165944496025235536156258136195297517913833554429
Row 184313772263223819932830142027114741233140632312385853420020801011738148050472469379317412253412310333239223295587213103915556311553213574867315122161397255173086485363411741473345140952816
Row 1949623837198730641398437038953945321299226247533546114331627135788393414120763368291359063447167402273525442612117025331144198390031335716451080939021282321153163535441652641437522944502320
Row 204692586112635765789127344240954095259329831118310257113846384931422645469544237474261268737405272166844224604143138702661226613623220584412861532209858175342111026703600460443592664154373
Row 2140985593374272331884805061485610244729851117454152963283351322527261504488750415841531382212234402361133990576759064993899562181355515862113141862959402010883307404349863614485236623393
Row 227624196496323906081515261407338534941763428548611566633144319145254444602153553746872817557322894865425435533071465858411983529817495699197653014294561553373026998592488669566920091253
Row 23721450911331935507110720831320251438781173388235270443244633289288780516175031812229430073468294941112423405828233027140463940585893591840814118538524414830330514535904372760359628681428
Row 244431404370741116414171517470718138658623431584208840455799531226643008493232611672544394723431215685050206934004076355527514744102280445913439103958931778457154995146402940614134991819
Row 25393458464487195345642862486416674050141632325070591725859944116775164926851169477744152659359739351478367447710893229127232721763488423133611635562113341055206205497416984944214274033993583
Row 26302659457630936055150117687470650869702311899173421824522617387047122290103645032777349226903382516125633250248554115532997305452524188935139424487651507592114463639401151611734225
Row 275340229924865954888811513413381541773830139818284027107318325572656479546102969603458202445710244441428511984342030144650414420336223489231345586911486681671323024162404490915492388
Row 28513877111572447723689528810514384220611583033141729131946591528455949130842706594017388018803703499441041983887258051118711505127935261639328942911826961588456019163108127435383074554
Row 295373438234594811271061123326864334146118143731633644346496442714223446634413954735287339031098873317889358511278269410948171657425123532845859852146276510715618440456221438307437754506
Row 305361473228122941430018215073439986526544034532052742615159304817634038185650247435641264928626615279314741686314631294276358123298268444303493333399756354197131837152283282337463323426
Row 31928383420577416922635406140234711257291254434056319145562947466359095182564049599201831590132211703224033591627595424939489853800167364294442175107408868756631806420640535461235438182758
Row 3239344333214819292581299426313620229919217199132038967267688183593300153175348353133112714921080488428453781622348951005022267014672385549529323703581893123033975542421310021074844
Row 335238390950736239917872003261959821483588347561511029115435252844330531995970929491757577242762560210602711541456345353357113591325021234810463091340934757147333721614925852397817871981
Row 345845268041744480452255932901122779391957303307224332501771910113515055153291712799712207527136224692295433655365273333908341790197439123821407420312912183411801372954862542511511113383817
Row 354807176888110230376328045702201936653776592439122774348624796515482402193345872878274043573040427455145334497043414420381254742717258598137524568174950575939509746632239757215811142013102
Row 3637428033232526456980634165448438458364094943299874124141463413146341527253940304007216053093834133439320565626580513986845007418053140284251047349511836191045366141242163943505417101014
Row 373873712408453402164968953003373221902317539758835647486543245615327452042683994305498120572233404250884198347236321819188918023193312911521199652415561049812622493755503955403425876504908
Row 381484231930823133174138502496372853014578340547162844177624661917267449472412239124645442621264138418331451634510126164798375912104957243246412615206756358154348390076085324181275538942653282
Row 39165838281447803779186046815439355625983531540059553940589212304933492341053182387739785149589323101101322146232572869345624674646203126565435857022622579818092381276850054504559059548151982
Row 402350429760254225142947152714703621153755784232226130539604956142546784622165490584042361108220910102599392813642844269215215252913024365643235756691469318179346893602897233536001572431
Row 41632916130021883315410329875395930467627992226295224404266580223644093452630674414417658210210423222509236202376362952553263463273553494170482210905083223546282598531519115163688497825999
Row 42404117753271167855965885233013023226511236626912903502115988815992241442320281855095712204422055945232836035123229249931121594262735183076541310284733348331388985533723368428346982818972
Row 4342893985149147554048566330445736338236314356295810109745374775380852434349830165490152213522155401348235401893400424412627385257485697407438526472546953571426801036118248945273134016112497
Row 4449924513122415471433261827503817064285515212747524603440404507454953707215854380411693662335636739542104389312342013147657771530111713692112349278218522082565943083123576137354316982887
Row 45345628457105865194163427143550404248751323779400216283267405750205836127222443304597844779995949304246475026761760282726384189332245421861336526951574146117011733228659803057535208617685506
Row 46486424924790453116956353233182820026648854479531640513520979505336852574178852552556155477648804382851278721176162731185925761598641437188297154544291086255317534322371080476211183484
Row 47553542833767181022292661263063425034056232543429824662312508740923171171444055187474630115431174581096485817471360276458672701399352872137314107328459212965837230226822662509141094200473
Row 4854337021966338456582925598951733353408045024351148845603040719445378857317362832534537305826448017765855497945114297399642557651903614408824328432541554242711740116136083332126282914791838
Row 49478016081134579969852974135398951301685198127222247599716755371285038631503987425306444548135372430632601783503092241982319506222627249473463250754351871824797178134342263569521629764128

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.