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 05134911123329985094224956283861531161193192327244274371238853865212654833437290854143378480214684046731730128113622543361421651391192197409259532109315724814517467525834255223147455199451
Row 141325604482467982344558525856151442560044495034220038101099254068641115208178944967444046270758313095151736472461273647363732174235523587559465440944104343142884781425518265032571025965883
Row 25632169829234582554656663962345112381062296254592124446643556455610374885460101123348971330525058161733157414175741355824654518450113916705125113738011928431440914119925246337456768285181
Row 31889274423643457550172654714668401731846991490458131531193086633847490032672804693464356903238324487567229945883170816373641259851171087185643001445362297034471655243741853575337516583031
Row 42033394025062502258444872584777334136004471131123153815267850412685531327422864456938235714298049774510444940472848312182652045494593517523436342926692375232415772919333429402548502564831281941
Row 539132764725404748841646559553189052696572710833516596957038022076575143899682994232249111735016140657525999701508930755796419647141039506937533283406032284104343250023022944593338366473460
Row 64529408618253939266116114188198550821163343933513033100734653355392755365561451224613430465634223230493011825069135958801921552624593641309329139387891547483254315028375856795679243317892601
Row 731909158324785840283357531737358049168999675489356435033712877724075133390221789010801543303654735455570713505196286712134788472651042026259018245066536919361220464613415676356813614997
Row 856084262499338563101588138351555252503584549911212564139221072155386452531115439619385194316517233924998675589453934713335810541243164940576451363336134765949869631173293114483175264
Row 9101524323120403924256254955224711254208441414622935332872230541999413248621350215089815842476234741641923377231851034372681325814960368032071347321126924581504259551142542617625699586115451
Row 1051894688249747809426956044168310012805873272154915529127188723205719382149442306316529971724137129631555029318339584913158821581263269436758815707388222148344721414195386785342934119399
Row 1115043075149234015241232421258211103250292122222042324465951721424366611548345871978305933482130339521953646092110440959244842705237559333294401958404879168254273115318222802327417833903350
Row 122187838144047491421133650657832808472326661460116741682759128113413359582716546557104853363216234865153303214942659311419588286227165409577502512573563386715985165414949132660563050082
Row 1320452989593387219133281716456357189813362497876450135299208117231366288719982088154576216297751912561536408396650661216486428665919599124682500171443148541423532337524394712433127931525
Row 1436585441132217774250268419065056342013877735555047191751512675417437408020641881180454990231767081234026395826284834185317243244345742642641948151823201764421459420774009169843132956258
Row 151387187049619634174976206929681365281250045941912415225737644492597940345571231273742908492254231163450207012322271724695521339740761979210250451408989592823034776578517683472510756365852
Row 162863755143541665229518306056555171223766524560445511410426921479924421387325944608518718971384300724113365240450754282010120420625149440144548593465176430973070166478440001583104656222158
Row 172405115919114114138027313009285098719392255546834610268225921835533574140833001309133626464006425356971960268580029464179234541157003575513078550635364130922543810591243183623157126943387
Row 189673909496231019613471460227922878528839624864472471854132305444193819716823470262897890458592640540429012377476519114288294516213969420332265119240658212271437582927203897408822136713219
Row 191872576941983273906520751353384728119178043415027624368712112048461734743145695144451942821150749583509560533124644466259313660449146997123551176144273407303744565600102322684308164849745043
Row 2036142625716733113032036384756373645772124236621724786137755492253321272312384196852267021323303848271313334251604958571025347011790324847933363549510391342121528704095419640254213383712
Row 215386193397584044214309573821602570110793522563179392842082431243024143361365652681684124155301274542039341535297139019423375439142394623277712152945623110405233865482584920434376197917994853
Row 225475331920974802580295285332062559384548484562122851091521898476731594546359254644671319044831946295115831677382181921205984386927904808507132935015124493513535841955148754671241208020081253
Row 235840405324084341903153528594075009439427175783106505364445752466168750642118587613405318349655933015403629015635487173057609583063497450381658137556595653532951371030281240943530510125683988
Row 2426631503350233172151022183200833978601051155128971974040311051141093126830942446122152956003829562442385168215111074218215526219528233480132845525002477820432219372715622286150077332433593
Row 25454702489357594087566414984920190244821947265448782918331309541137473064560012283756456449823385346745621122327059623132289428552053044254882831361752424846781111320886145793380583853752659
Row 2656752279385116845226899117768593223165374284259205932345224692113228590446564145580146572953515937065338219512630823435308825874404198546268848941239326215445092151840133545280452774443494
Row 273953250268929865132403546995643151985178229291811551212959852642278255720104325107734563042390540303300535916093896208549014433934241318554194358436832039476451783134378811935348185824163825
Row 28541424266093408183222885623259531825613328632745415866522552951688497027842890581160650783137250251464323602245950257177062164171659701345344676668599621184041442535531263425385335713927
Row 2917211915426247303314161642544363418623729981318168254263762506934873745166494819288444842447155270548494964977430134533626341932121243546438714022472613155483286655641412401738342020022556
Row 302977513125843630402149042315063174482467176950894344436445613367417618061431372211142624470173359313180364237353722151444063570119076027023615982932445842354373830188535584645229817393786
Row 315014126043525589192643725262349652276613816298915934734478485640582858492319111553136142575282421010274205371333151655633143436274210951335851803339123463946159358664414033576232482227
Row 32395931744712959116758701596271018345574673232816902216152223035253238430054623825081418449420172536236422139735132349018611802401637643601328314054113914962604031304725432108350613435033
Row 3332452813938346733784290959237430017981976251415553604619413985112975034216557824379381854943055567115295994571317542523276447764609406197439904599542158843958199233424231164212713452
Row 3438662663307612685355793323285867939931651157145942721550696119246841139592536653763070196738315066289845256004574366537724797395858563851609346019184678586937364042218527273201430113798
Row 35285249815140121221002494435465145358971390482826703297303621513313629341824863739317814503680906544851654626435048923800163556695743592911092236598853445608413935905382134334984640426939475377
Row 36458736522551957619316139324165867153221222720524446173297501779114217023424397725532014031906514040122367437040764489201057133149807376783741452112126449228064352269617914757527750081533
Row 375559540256125605218410229134445476410831488222843265340362024206854213213552782338437135867350443561210305222493018605881453125692970142246395711273415604143412262185830711919184521934404
Row 3826953785108248429803935287046353379506644054942250378236649551832965549234149823189173951238327492303745179139721101463398056213261506658362680183542358537152300567414312701426056012354
Row 39256539742116164834091884338227715345665284579533551342454359154307719246919641605403941405898566311143583270540584803534519665551103488538522872552178859711461586756933032796104358147665548
Row 40257313171810388843653644492742655238398346841061804616276635734385058119333454179349518454232237025434561562460746941935582786958355539476971616853963361859811811129058902658236630193680
Row 411576162339426423445366268430392986278718611980424021043645333425952952189475954731949221449838575202963563105111171251415422103704301924802826147022164537565258353709489832264887564516635816
Row 4217061206128842932833203755923602374261310324856473051702952512244005438570260001496505419265346499337774214430230351703256932808775517434915885599114229463985267828922026261128663141163711695472
Row 431541108743113015181644592546522939164500230739182925951421546772133401252094281091565751643353433433725440453618525318171220143984482721924850677973390772896124705373143443493014442223082
Row 4416966913563556129184062402551267354583581662259541694475568535141426417421525982490137687294390511636181262435852714473227159231304148123923432811498228402939095361322119049529474301
Row 4597324044471959927174924236125464558306204023305086314623322561246567936591600243138712765034871380126248501446364423458782134116003520168532643465388497920849225159364557551628744
Row 46571246348604052376579596052134935583257105591207929634986577656001795328718081135333446817519011250454833483375304839430632302593148625792473323120182195378957414593160543495552475142805366
Row 47358842725643653685941133236964313570846213882344043251702224933646805485568340695609519630572710509734301943323022143178328657205105283043553126474371032795694969539526651182910153734355346
Row 48472516652765126534629502960235924421716061209433631914319451215874464496621615719154656405739532222522351247627129759181008505043032692662504957184249446744462774793561059411156207721001748
Row 4951782032352951971804562347445646245343094836663611615426179513112739534930272173319842341816197033751404461851593902523949433986335886755264566534623522215602335470954155736419537711700

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.