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 0174269338414378983467445252569533571474556781180342462016114981328384029443821808311729704581455207729036005897126353415905104371915723777224341413111295648852789413623093408574728064736
Row 1358757505117539528672087397533224163426592140605527262464946313981221240822343615518317932462307131555545715106123604451464821103567404249775654201622983817280321918765807348052544381461746
Row 284516835106363486223522669176190623831237426683458843754401392553514054594116491870220486737462723474270446438075015530854904121567043514732339452623784722576364355555646101839553571369
Row 32008351120173878373188416233757323058922221103749071529526302811984876350135373402587822583164521181328101539576738019071775389039245652162048071274537720371166159830747331263599310043242475
Row 4600186058774784118304199959305850253756962304444147141192367112257391174239551163211356171328436333838388273321613571333402123318102138327328082067312353451763335237883233147115543551210
Row 5132874932545384310103848221942487527032674103630604006505632925816119356526243260368819685022104057562255251159106093720123713584045577556675082459616093957129942824993435822884048165021045241
Row 62215472725005903695152294245037763452359438511721595574252171370540942995965101722561263529912485621158652961271368945363485241610363387311025574329355933317813917471829535512445921698813868
Row 7468845488427232108418239701729576832652999345718014845873283638702982539321995415726397944574443931396829013100484876935675693565229018013834426035293602152552710593325101093116148803913
Row 85553107844535278505729093720598887762130885725138965554171041944121748755204474524767285272353540522824465421351612378376523983030435296373976252844615138323714339277130253756381239694972
Row 926863172371751623900298826961952327011611642430353839282669436897019652106173212487203114361850595885643281436964611178638217835502554356822490223816345759339817972189936572548585303695822
Row 10140824262069212855405687118754243294001312049405786350172352883044405177852822038153726803834372636153558258329184252340543256785474453217516016395641548856402761442854252625150471333055554
Row 1149125861591202752655424575328802982233657971234574041211912521445742128437321317693861585245292288527747901437399020959904480468025805073945200425982449862595620220233547412131154833144258
Row 1259203527273780337845556726553345150364454392493512341195073562920641076588828876224833507281481722472411364556166928430876954063465525041303119259456333762203321252885152119725142215
Row 132273240251022334488426082615370048555025406444155693434715023872410196756375395086223017228474263229757324415349322456295766464657312100352923384714122911923738529256073431363811093817473075
Row 143454586216056847575007394630534738236154698329903125629272024113157505711244385249486236775855229213149641091360403835621946198324527025205119157553943355130149255406124553325930221710
Row 15231641469525643007377124195299508533825407445142029682390161821350928221404484647644954514636895494575822422752277939525068925404616313931181740503229901143126361345285156043735446858162826
Row 165289121916714053173817174156665743983241833531934148542775980311622081797116554362697259620724042544616751776391314914601320227092721254288210892994254716629774965501529104493291288935655498
Row 17468547304934138213251005542477026791199468341705800188487872313737601160131306282211075270183740165719512790532844625559020133558972333745633954107124215942790541113934673289146518104048
Row 1826251940435454463047362312821063334240919686265033155726382591252859751154292340812395451687018065909554320941373135214139973292449434433382117472514015459513333688441664924272275714522696
Row 1919104374776430528901646110279811892203417125402344216758328375610170295443351570241234674937249616333861521723905312191242993686268826045764333271333735522491515432061125937101893209533202062
Row 20504816543631146051212567395575442831713143574050831442342517704045400010375713735624567229161685930625357730253945563820735598326935324718583514875472263465826142374040553427550920991426
Row 21561228562799523525285714920345833944964824283413425553881140286259912371573207014992304684150039702738492734794837353309016933151232542202865324516773203174021591486587447135367127647991965
Row 22251237140354011601271855114571545544372049429247895139598419401463420448044707588120074472039349232175228581596555048234108592128572119522557416305092502966114033214855279330579517411508
Row 235598448138916048953428509612164179195428113729776919364936333037417132074666326222354732440255563587468028604381421436839798695756558217643183467729791361630578950891406708273850383745909
Row 2422442411417044791142257240344729125189431101672526110882540501666943032199534612823559597610712648138117785386419552229426621932446411413074103551741803228668491239575328599949743446684799
Row 25542148141015990115174813712928134178924504284451438148915591145559264765325722114832216816741592167663250228355462304328485542114328376921891420736202025599669245244464449134340375904
Row 2612682801316034781632532736445791149443072293432837695336117633104794013400223702219162143942215168984666013821884696413455149732019323128252845762919402128835211234865145473524396150251536
Row 27196213943754358357885969527263362854102820532454512758202651120739485178578386631982665775546331646233069127636474604323850412358821482823269254602954550222802277495225543097160237601044
Row 287803542191039782071986352335226095924798425651952036329615532856212438792948158483224493863310914014162053003417612493782171831581759192451445282544657525873424340075068278130362131343426
Row 294499825009533025312871243939313287264493414633892471531801049474510419257554549594356282791395046953069525253162032678381428416863144281445575582745184422251678330611739348611658675589
Row 30135762241371300249928524949443997450142594200117820734483286352161297142047982042326310233720568113941131053230449796423660560047794959584957064208479337032709305219023886512438574943391681
Row 312168313737235430415914425998529755541051160045331692526041334714219398117624262773387951345824578030204947165376832861845593642255685366458010105363387756341454775096210647363228257629541208
Row 3227525380398163045133805410153327525745300372419523545919864600503929953963291635584376239226534821127588030574081108858083460506843719732873846350556241419280556613837203911958236395158
Row 33281746022073375297844653027345955922907515367239953221131306375931045935160460855583023341252188605451533768290449534994691568387316695032900512746233806564222941800596434254862722528
Row 34479623261135435453484547357220839972909889408614034388277719702260444510013159357256249653213191827643177534216263898587042222310054775557155512347577835475255667163365750544409262713142854
Row 35362844724263252543736395169220081545103826471243794247493553833022450649345368428424814623495041135280400425221906531753755534378958012785322534391953542542534633250296448421497189942254519404
Row 363158388746885638250936383750178816412723694958564732274747544711197128851964139611372426464641011267142600054914661404264925475091228650552728368434369307453653265954176240725400177343
Row 3722843737143834201628315211429225152092048851923356814321013585448737415890132921091975864143415016265506554933985548183311349865253129610687732725129322923644178421512121609522810652095
Row 38296895534245076115132875091300491215849231055622681344454719334740161527061464290749985107308532123194693243913837885406233742124481348814984990478741050045636272045662316164511242494903
Row 39727954367363359515474717316357925410560111751985007351144093488999590724775785317148154213036461736319951585985210258849392468351788919414234405217333644365229073841265941722501461416
Row 40215726231201247341046215508415023572707330723414809319132791277708416832184941221949502584587118564252529227326752675368848315297488813043400550881215501864351848564205232720471484360327545651
Row 4182116941869577042781739162547034268389813779421585208238473151136385980232251871844584040434921669015325769284311825894537305135928154790198415173057588128943998146531024236193846121874
Row 42191793410613761773510438092939519353402708203652232975723572365533872361563849035418551817973415983489816512920351035244837444345852598521536884062154288057464861491526721585487383958122873
Row 432005450177656174967357230325950247046822870597922061706442179043033636447847095790135744544651272472180857582560620263127596944062375503519785406498544474088185444252943560284610841862482
Row 44556157127191850244921118937455729947304348357730624161983543754513960484344352406293028983132233848367743065710415838662804428478453043349597230483077919335234244495413383947858503290
Row 4544374692172484316212012167448445859535031495568350810155848193657985151528457702198236168855505785518359623624566158129134097450326364940124464861349674507596321164075347031313922540629293072
Row 464689269852701050338648198342569478144572229459253693263095200552663218652587921845158584142993232331114301154271643584225140510563495245444422313328810111094174532395685111335652779311828305996
Row 47377027082180292825494791595859190813132575266553739791321303143357625344372177243754654011122577157629003695440628961464111350764391366255544550352114625862951727539940743047243045072809
Row 48177322273580221016911591233122683166523159621571212614262684120258163457554366386622174227396039433625203499054540379818272767137840364457296836672513455966871704172221124388292319284733
Row 493678293259858944519557383721442591482621983130262340255897400120604354968242650781102202157642805374318761193666380359254343409525224237261430792073475856698999552799352149792695152210391048

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.