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 0224257874194178826714463526161016887293081550731084241269674748309494234434628723618132504845312251316479246965694488793854803080272621513525251376152139808414719408850821415483539112364
Row 13068225752356862388428252164639144683335113948944272618197499727685498124852847112228136934303154504844514943601207221761744229023005472321181643168212549771306101932491924299242464692
Row 22490549452201201172258846302037103734741186539746813402145122304301838452421466040124546363753185564886124225565132593350454625515224534657404875238277723493568174103096918715112733204
Row 339963694186320072239550013251803385256743595516250034034141165236484487139125238692167487244362340590154042526516775730404643701592536081092137824111477394476999244441725133209518203619
Row 43485434344875652321429221991311423264517316530024246121113715838126319799302641438924065855158339810283330253031225149148607349246342587051555224938183880765982882501121922252484934554230
Row 5577896261921846801777558117075106211048294255225754351746891569224502445194126832527061250120617163442345856589616883439924306252616718221063378518842152206344347216415188136213331638
Row 6380732731906413159783155533716945962795225814924482260124832787512641542869123115312057544637375499591753784687127871032550843982223032153960538425525653598053471911147238284511395561536362108
Row 73484486736395540431313765039422975337255507146240494591544427918063403566343583055564237044965111415323476506821461111117656295978481451694290190420825189421933202524035982616184726024215249
Row 859227782303556444821268678134743574521595854921178858315735956412159245164639865109626633268107732785114133756994362125947766582249581933150049716761244112953021652916360189938724480
Row 918223035511826874131178159545208505950685454757343018035233409526254190274124316170353684289123215321205159234315076725253211151901939242970189354502896159944784439017964017248444202207
Row 10251125445367321419113656444534424860368723936108124475297206328826639565737294491657305078330515263094578959455300229924884666551343992322395718411181399327135116410028375162339648995450
Row 113662285451863956176949163033507444112648623865426116128744092673127241346303112159326225824709722266158714117155953201779441345055734182342127675255386128934116424623185277112041059492391
Row 1282245785503241511995327312319211987299438354623131816195881815502139423843161394209912085509345352647851464393547343855475633113357117145102684429443046711287468221635992283417444163833313
Row 132654214817064752335612155096881600055948164733441435712044177147425544454303598431254321145153401919373335143351566382729883713553317401069747835195074713947655479580743361523157730772076
Row 1431111306031554432451024953502243968538083835367215213367541125894114246453948601639530343391446363858623023715193730548264996208525735062703560657482712291355554639625075391333731664
Row 15202636192028865258550552247033142508637263857102277946821898739383524368935443271400383482594617965900485951691564884278717651770204412699942747441179472226811011250949111922364886
Row 164642592524301912324263273712702059263712812274200101240135965278157123437752803564538533274191249534524286071759174647136844175624100844383361227749659972405172241963416573541601975791
Row 1753943971259450381823586794977643913808847515055545559583337281838402165354331172661353955214382173529364116589531333907528811035004325292636752743702475730824548390726354107373936342894579
Row 18252818321695518853711216357011064152168610001284559228823879146135312458388630135215967156131213602566886039643956543849157881133567951592348324826449949331264178345241551416946151633480
Row 19507340494934287501520541407261717212266580567717041071546428367504622518439974886568229301491465145416995633681862311351405910360534274925565848331542137810982121105528023192518563739415140
Row 20482019384025450248674174596632058735598388173427105528164431529545695973178621101351288442312405568514222922532253632062414213008726431664260260848641332206873586749164001511523033542079
Row 215202514041895522024242029561709384158781030320419405171450320261814466928644215154441862727428455424275794477237801873397329196245254942248114816513221359168035253298851202853232664696
Row 2256091085585040261711587623101253302210424408239763997100040372521594251740025928395360227243632657312239019805786108615888709355614258181119233833111240263857519320021853193394374135
Row 2355523757261394173529985756439211914537159051231195877421651571335529753494118740871519504332803520896347235595269360641131644433255073378132952621770144854072140135263740982125280256695479
Row 24577631626663863468157091142220160446135759587322193872151655033784894187826396633325204528034676268290080154835682805259372994631212409654426346091258287643671130509422382646564356151540
Row 251521225422034846429950053521980590543224634734601572242025546284361120011055219145739803586258730735824523227165439772423616932975308159911980602971188449241434235635241155557307039971167
Row 263270510238647263081397213131543796545287032351316110549284291418649192704788588921533711132345091235247750664305474233157455766193002657459116122810238721575679562134727844549176349703467
Row 27203237573356418414684678269327021155175910061629199125801204260928793860120044916703586647348320741191132175558811015222191238582577965325125427892027240845473033403753856125240314624913100
Row 2843469813769193116284117513857475248892562753491131539320726891634253139434423455835129691590438735061202362665236927264997467344949283012610654718589575673120610701212441237592846943
Row 29170112685500205142361090438174222924064239459834789139146563282231849565891238350021749333946752954440858861366216627312308386739991808591822352897355397651884418369517132061759382748840772783
Row 30379459178521273798459508022053454454371307627532237107445602154330814572509128464592616535816413234123642462014884244998194722081124574426672041949301264931988340225561162196247104470
Row 31341812185753406321441405387827548171520489430419443892225141525016199481952203942383058694261391732708165079523155253548264974233007112886470545893160352110920543825205259467520449612068
Row 321022418010485240484270276913185086184754846105394319653522694390722371398249653974919260414512743465613972818486035748865881453748954733258531651501390222503347445085927411646211543455532448
Row 338312048184557504652329524933308469153102167504841952048358530907801702542280407225035627252133622367416735731800371920263157671864238144185159487317263850418238922897237759394825466718651
Row 34572029984722222226241243558449915409315679131273175342128945039580213114197467430362046285692849435232867542546981585754417458247976391206392221965448337898625755524407546855914208779
Row 35378728823814583357374742477549695608420036661192427420835774307127229793110294311752557321216051318735674598463477553764249165631904082139219312857360153910564026273053301082504240028293482
Row 36550957724656206693816119696513835794142715751705676181223593757320442906133564582916681589255999816975062339745262543290642981199497243902014168535433965961781355251304565364148942122568
Row 37577948251315607493172021651490341612264887194237681793239496676446299809313982437589247621927215218129115103429385812882254398989427465708305842363124428431235066205149155305101756793933
Row 38199661019143711501676229815225893358830323322144643195575543452132321514222715572266554367913312605259463636212273456856172882482598743831157228559051050587229364371131712553946751467266
Row 395893273882321593291450134905895109441253516336726923132248317331194631433054034535537952751471374959227251695134331921961123559292783339332201283882311423775007630574316983762599148708804621
Row 403199283315625785558462632614913512020149145423981272644717631191690204610014804442275433416517043194415657440742777377343575932350391445586764062590826965553445067622782921143823974610
Row 4134833397341419053403284670510740422556804114100134532470932380338354904478444553981174399838471849275767328726715377769682790267434705636274325775675967225737891968570925829003511641
Row 4223891989508617863162308356335010335839922972957763065962566573935662201248114218763448239856645415210759222314561756247031606564748847672730120377787519731162943138211286028763776
Row 43506153573918936280531560022192421521453320381082323536437293723241034593842187354543602593660465433973871151427316475745629556415092434587821084652229926293185433637114201979443941424389
Row 441898198345755443343483431024997223097351025022619108321312182259145642060469932164358132740026945038820467334774961306153749441635481612864681918282269828907925199550918741329169044655893
Row 4537503164310821074491350848013528432734731004328853437742312169519255172637110957995334399959045323507246358615197928575429464091286150532581368385410846951326111119821860148821340286795730
Row 4666417885528599757861184529329325814390248935084143543515981004448741781372234042866636665396204855258832261355315621990421733491518421331351635274242842151132291617235274235133202778371498
Row 471648317757831714843517937623686222392016242011213649733529349210851633091253533784222545151003496180124203773263839175421581437001134656287948951024294049174943456492710793536445614285643
Row 48361845192177996274016279523634272514400865431342958784131456253410093457155739492373500251233001579481755300756905373152518663684265349346345009202976250898434075936862153744981395
Row 49254619552952494432734523006162750303053338220362743275535604608312218252101358432430205602832400439672768486555041265260204932203212254315476635549317356932601555172953433309528839514301113

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.