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 052305477599329074953325453335066535015841090230417052800381720295944532010202847829576259651368475912954662117357564864131149864340130318933293455612252359390628083449209451324840265411913346
Row 115613037417413223002554281429642041253405230682564303814083866493047002422155105832729624507536147547544561201649441906357619818048984982562149783278382523113298922794436622996603296998
Row 23081345020563407412562394318865316250439014259441014772404489374522141105352249819345583382728252377219351233036548812111629382177352333492738146552342054396831353122378461255186649865772
Row 349764337226991039209637352962288285833311775297834464713515496920611892243312953945401443042572778304148083644202645792620363848352942829431263457732304120190850051098535437172523225778
Row 421442754107289315555014346593325423153357745671732196492925793725321035224988178775131083694575642053047347344573368325060012243216893277382250343210363218678649303917982385849647061068
Row 5401736932855476880154945235005359519953462963524540611085356547504362138737831571174959692356679388633374537438120435604239857362459116553630075688554160216833002156592710632650449258121011
Row 658783595258116273563493723051448227384158294316445222640512903339145875910307941275114761112820765688219047254179200257354057559623165683315812521988460635252828443418403273660589117640514477
Row 7851129260359658903731267255775921139637561922113118121518344614954676469834823281222231017154062358223753952375842524293843155450324439144327621110102026832506477546053636587122108220814798
Row 85779556220782001587137936234531674014121159144250532144547434913587223646014606491811063381352247423967364458234724415602560945191602547923111663293224775677414330681183195521155916862798
Row 9182652871404744392478442665134275119094957279743504558240528681601884517918224816165514982958472216161533933120783973130331252134377651791720415650366739504606464230031632868516833224752
Row 10434651443567164252547222258677265534641516338549716405518427221564353131805410242624104565561357314335728895185407439375240746814276279629384953545040246828358982107235351694263
Row 112788548167889374347754544304404988640324944107121054982482217856633097297326002050242330012518525838994625161030672887439825482953528629134304740459514795626262642269647305404551749085066
Row 12261418811666466343044667118135612565580551715632269135682180564428542470307315931064455112183690497219132420437614291327344240433208510727061511377338865071337369042425968381180921472446624617
Row 13309725556811647147233706193384578949954813111624362856432315425561583453143446490556511136314656181517495517651541361738146373871612845342343190227263219589615394335233143942658387339542491
Row 1431861400139528362536454124544052349542185593111245994229498246604513432320905414104953095310258736431641980301551349342791269933341865535286927271988921222206513133348054742314346432544637
Row 15555326685685486219782271250536183250280531312184559558292516378153635384507135130572915578172061361555923743824281210113377548069522381457296547425075215154622052398114120344914492213974298
Row 16542927474602157430354192217466449774591248717895601586412692952102272532608441800347523904004587235303747862452143330831880418016852036248311034252114680284336331868244334973136273855985861
Row 175997441166034712830566433433605701212828111133521046905313894726179619974978294120761820574394342624070107999936679409964108259944669372262180812971962393641073095314527972408403935224203
Row 183625001144211143191717542581578711333580345420724575156146703041249893248483794289327831901598859284698239539672220598400347191741113303734581675618324412993197697337017712258204048114755
Row 192971365925495864442445058523703147224743375366284423394085458424511121204126187395285391639355982128657062239332545179942962175354316026171992112986513922571322450551013661258936841123710
Row 20572527294448501064523824991193020881229525560422225551277857645710539517565721238089419773702539810781362198647621473569644864202414334964846525248677526123714303215593655805993570052895387
Row 2114555009176723499865468174720648303732825230334275311504157028065349209452911244705300515319202940573319132640502212994095403130654435016253321891080336259211904566433481214167491740195516
Row 22101133105639571631457921635325455243547589345454846398825751911443015914443619267118055404574146838875787163528043806115038141115789352914295815164468310527114575464915562563122434669922815
Row 2319081611548537132150405951803738468152841165119656542766275441834195333433462877343857145220871612401433115077500612698561656104698276636693877280215144692564231646562965930341044794124
Row 2474318241000418118812452268349246535782569547037033554853313225128519811285652249448195294565854755590558728854068371136285892471118081772116220755263162656531832109633565385118066816364030
Row 2516491763368241435822976380057256533872941633109756852458082376229597044511558259641033390369114582774487121264410290137741735831916754355857168111233102375275541994319127940076953574
Row 2649765145513215713247252152614705529541318303704103146043876161351946305171234544052933336319148153415101326554022044900451513494031864596551534633005846347741303549450727331425120325254
Row 275290348654944583821268546312355419459571895398485641017472886495342343758403642328233171772831182445042256194317562309123352411803581662448744462416268044024310307832574719482414352145165
Row 283580505428078622370457816934193308239481364837256136840782059118341395455628555322540304864302128735835125142927974290500918501096587042205674156324122755551025471592576639145669182450973807
Row 2923684725436155922754322558934040808501854693604330844775454440443473673407759098583254182631242351835452091100756415898337443654259296611191484285851582291187646265895518331025348358614493021
Row 301663135731052494775573649165958280100796459219044337428651631302540464641604561293636318628315219288217928041736519944673092230496038672039587638242318883478722391787312452494944265927
Row 3115942586448845302621167313601839196135394643369627383109788504140694654107939452477339748271264563561343871591561281285315453974573168420182453044385722065822499590133195608688235936765342
Row 32343816201818835447308146910591468627261942807125773367752841457569455294500355017345081491635240056562323475933321664219649523482303053985633499456203041263075310483728483986412143043679
Row 33365028031229538318841277101842839323340304142635004523732142485226726113048576630675078389114153872727298833728481292105144974094227938805978355548974260448722371301275012415385964372628052574
Row 3477325705641585146057825237318727702609403440613659253121545937410213134925307391197915441692472827842230469150950341265128216039061132206268736852493456297632821516635581336705722225801
Row 354063552919242107318834769385641123460436531464724564647485630778810316114658377141223340528747563152295653273374275633902903294734313975483022001831294256591968743835842483540126195644
Row 364327176557022098588630421384464119443403967356810951357471404247874446287298627658136454725899502731347343039932437713662696407934642581112148471222131431865189488142815455351232353323797
Row 37519431840735006962454449055989485736383028578920154393248594185650661214703287252738895475140821692075944925351455536855668262726916291171159661827523436455816124820372300134238931365
Row 3825554595165250822484112649046531146124931444965804829163243035197923601511514103628434850543443559610915742937498311073492357827582573623884306347145029431118575524411426865687544205479
Row 394144531918881771366694152143261203249564198101462168945922820426246537031324336657315635522352553748190849414292211254202436143113074206509622483420235742792375555529324372243388452565052537
Row 40595818295903568814635125494352111033388435023145330359374575460941433671857156227513539375814427373282423105628332948475586515747495274619387342165830490620993331205054013268624401014104294
Row 414866297243214000909490224271282172647379095054358349542112331576848292043983465951098119891158548252571782349266776235736394397357454732982783582850241520737407851021231228814329981117
Row 4216354981577574450621764190145431020368320351686375943925324215547493871545315323699447630514435255321525666484135836635957521856445731596147051495186232482514554552824200330336733523545724211394
Row 434909395250923385100235265938315331924778736385547355954349844665914220259601776544924731320473067246222402419540784823558929872774468037237762206309929539750871664325138211618748228615312950
Row 4422453307239847184626112853903247353035851325235231734312512618524683290140574992383034544079549470518991111145241852642440243059487995147457319264537182054562121314418075293145693311441383834
Row 455201513016632655320811563359510722664811329149073212372048544011286734275937140352465392352423901199281638452131396039835964316031121626581532027823173542650481983271739545194437280832053303235
Row 463141470654802532222918693730504557145861300436965824164808145059781127423131505523278513332681232432737044040153110074274467157133754120319425623493398653364793398930314617415338386641304964
Row 4742971280551615754122784280747384888472691495512149401207287414231482496507541331831386821224862248527426992551440416638475683117924229439625229483244507551005944519540391151206941814298
Row 484564325624313951123455352563607482719541573230361710042913479534263006275726541838120727289381150192349772301399131585992555413303029491536158222045143409415853003638177430355056937293556
Row 493326382539445323110331568250325307198230232464258155772877561025254412119147283554160028852853523746593156578752288843343255312652736108543743066766340623732748428483753284171349372528124

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.