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 0563421212390353921841855585031945561132129844352895943432156376345944541211271341390161511440798943267226213353998332940355736685211247204043146564752362532846215404554044510638411584
Row 1391646445968292927827853362105286559342362230926631383538644461620438729811702425757314616350215655936306243741320288616675602790599151243503469034565471249177589848521007511839222055842442
Row 24472230523695156666349627294196380216594531159214112152801131244274584444811782879102821408883128149624969695532323642132902355534643992349647941733490055544532555213444619205463248735731942
Row 3388813554773234531112198487994753889722071370031346644899349791037144572204037625438152348075110485302234756405367111842123792104334184634313955495219115853913866302759852710388621531093486
Row 412493905411556017662238141714951012485450631638265717114071201963427249641945635145918951829334231448794972445180219514202356815858872224133769923904604651350035575810540431515010084018
Row 537475250222481130042987213113485673689173616931998582029385096545338601590576276416845708377755411475536356464363540041474935827509350683525694529825874836569331545700437233391980472320053543
Row 6526550243865212150825016925744371546639337835187342567643913017377556842799338115219144491451027451128588449585020161314055230223685193111592492492633314024971213592828684126338853984637
Row 735010954482451228040935338558449251527288533911169488142726816551639328420254438287141724559233342984512066730542855196364635192131444433475534575385178634812800199248460209470123421082
Row 81897410736785054250747047145934370393940031466189145981477190559332995519250456795612105306040225374754170015881531866544607250847171807504527235134334224714865404452527673484319255761031
Row 95445586221684372900126455522930371458911510125252181357834299966390690084513024791384831872205314136365123570758491970552970954885491134823795024249356342265204027761941334334371148745701
Row 1052044053162630245517361011743005209192248694891565310613809520357748873408491921173101453540678154996399739851863876003866400529921078236335973258151321452521122937460859185762570235035101
Row 115344281206831163838185413015884192059567902795566714385747388125595683156855982703235294446391807179718055808160054631999456834825760272111015752432693275542615619758571854131878483348745724
Row 1258792948370641172752993106474052103513399948605113571653503144340448134371861141043255098285427293525217713245303255618891194510361151514256005253368139046384235125717991001377741981444447
Row 1324904142506512639753031251847012985588837125598145122423559350271230971472286739133305759101921693268587617525165246226884910556049488595307543102317042351317125154468201352074580162228655577
Row 14217028144137340846472119228346513737125317134331997238352032471589658045274378537839645550320549524993366744634792292139881289449782115976710453895270256643953763435197721184284314239295558
Row 1541563450267721305716517137315457129756688144236206630351455299539991036507553851854113478353555875752315843631504829392419985286113369724104034440744635102950372647749713373549266134364915
Row 164853417015904324417148648912631345338644075302427984290755123776577121884725434844571963472110550725483822988126333238411472140237343193602510619214798324950721357248722903876464041948
Row 1726051094402750303010408910603678549026301091978462657635677312557459735907449436668231445312527681423943724455312744844111319924282485709501302228301535434711222112448259073935268855894503
Row 18190847297220503908308125384071434468747723270514436327571521640727273101161449993027844528267935336952022105856693100292036672497104630892428385035101688177541634486447608381534435516
Row 19219374285334182438573694110351895255249275885440811753952411925523801580551621769194924804396124920075915268641013224373831473196379057733213181030385005489032762740119728243960107792332562971
Row 20380511052775344155825774914423658367832120314272920782688220830165118323735440971920125033259310051287351882245737334175425827143556433744131655359382143485245587532362127464624932694602
Row 2150406024937180154403310334366868551391764401023494678553353281602260750775885550637245755341738862486227236893325409825474012207723138304926363939705499987517835974176422248551861643322754
Row 225068285672979046782268243139852783484953385540574553214216252962152826705660373297725362329310434604565559543353264522544274735393749914292951072375243351401715427177721153210358336643394
Row 23399744461985351428053274905416927193936338422305347578538734084349140499584705291744691706574386829054375353310819882208534921422405185395944422747397730015662113342435681008242479123572230
Row 2420633411505915422489279537254404395706352447633676272242023178283856793090539036261702148221245192453143167111442230401116465940482423543338191739502390576342862666301053181215355299416642934
Row 25585157844783266350153992383905155195314361087477534804403060308045132731294010361805239134041863735179220585057218200438164899211755592002494950039551225409444075269172853495909156742091621
Row 265615138827545973261021275955102393932869416043481138531152491891408513282268554715483388680586458956144074186924059243471499313231990943823675739533254443403402515438975532294247
Row 2735228886664598873315116055033307133755053778528506627072924205299537529117103182251373615883732222428735252164135055297215140174316566140423598536024294526473552235362953255845282597
Row 285202513153085839141620821957599850221199416247982651441305311191028534168430434252440155441539073054593750655008145391116531910267318034547291115704831192037811064417758504765540763341865720
Row 294091283815452711470274724284173378446135028636523530142465378546474486326746532883157548951940233118005082557459035503343419027774542314642564016310410411764168317441736633612416219136895455
Row 30991514451329861960394423363920303820011513105115823707061939567494537105594528441224197126412738631092172838515551526173639514519242413404774431427042146007082902511239481706176816854945
Row 3136044750249930994694527830325534469410515493416369130942885818483127216761302483234742727395627122036749583555236515681590147595550694768367012272992648392917073785427423785238180717954668
Row 322264481430116719725048367243702822135928323244413328123115357509847074855572914642104509759517854958312744635635941521420062349198586443252885272423943648333913114301550753614479393736622028
Row 33443237743878148948082120121258555025418155994861184596251524713503713434573165522914059336124718835699173210324022187496014252432540685714020993142264623491973330444950923565490484718911437
Row 3453622933039530933445048923605635302350105718203826317441341137611528428889603671350211032783981342285746283659530159845764643356728944831250058035270321630131769342110832787377144443275
Row 353871571143783629458116153705376510552853780374114856421284137547009652472593688297292811043303351831364204883839750154338591307584113882874483150933188353350991024447419684247336436571261
Row 3691810715872340459341721395635802717275345973416586026638606763099406792944202323499710582264247618215262573434343003992475926892247189715432645724429345238721443194741730141090596119881473
Row 3713065558440331713428464124262926591418155022224438177042420833231307120221554505237435887557612267456311176546351828902853455131913122398318021258556653817539571049583241441449943213472
Row 381848593500244961259170848231289367632601670578940185980153655194358212220154369150954316249745967498013654988442216121591740306199443704309329021423891592456319411838418624983210102572760
Row 3930812038228846912642504292335389454435608250595321003688127124685446103535049076492060474129722140400423275333507216582841178832494787476320928712859428659424427529027727434807153350281359
Row 403511373415358492276427659202027214395288627095295407527654793502233983130587144350182068939403219905909132732745765275743733213427137761560148936491443150524811607370259724139654304505655
Row 411984129243091763241627213324929141011343817459537501655486024517754034504160050445163569851804605397726752145907710220252421491389522855182604193939545285103591248521136952962272342411561
Row 4263232316721972641326282586454894154781928340759501192473544581125148330495604761151749204764509522516874948132412185810523534531810186514862630782359484743154287581718712334230022383227
Row 4337121873550059804334207339666522730120845812459141853285309382230771072423595768742072980474148895432410949823590577545933973135370721616267605961169721402003312332222284579823841001286
Row 4414455794134555445483036393715951087497255795273062149581155628784248192821394523584738095682453647411863581744174339971119218434627743628201883442248342729547986100564420334898407
Row 45123828419382844273712684292140838233156335720549642928515032235795276964418053953314016544712191317141765226152734784768195759384700360810475307335794125929034156416613251534239450352715028
Row 465555284312145271594510243012433117332779461033193701107557474810546041402751369745479192104287417844722325159548443695382542835182400830205033349975450333147835390538450247351329491449902595
Row 47487931052969264537834015581812932445145423705690402415281215551231553411611199513054083322842601991537141652143033409106520603126346846913574168240493169119429234225377759191404972477243911318
Row 48301430334123569534913706279555543524102623781595514750285250545532756222474632420122131321205717862364560719458348754776179354446153690177738876638350275273567586039492373237511248642176
Row 493397200750045249408555144114564401404563532994994294152155294281146096552451329526859306154800311930623733558321289725852107053863409213842083170355350274580374778640595523121408757205219

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.