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 012428797025952345218725874317346663660334149814084290307137735382338251831262130520381228363322693373376929841208433731167431009557410221840310121229501258366423773488215426992549203910764543
Row 123702882074833568428031249927175436433667207035024235493717665502834109736741790221154774654137067516844675691544057537284011343225484565131458795442523234714444285361312151963528128245113
Row 216163556380229032890172148265813636513317011892943291630931750554072544714182500916761019405119882592184122921434456856226634962158315814170125678443223939943518283241145878473765057491692
Row 32263360949132827435930882550373714711343513414805937146317063482237448985448214229844054007395615815070473214265783491411511348492923703535340158585123547424351651861650178626083340581613704436
Row 45351409526293273588244593995483336775314198313384114189493013375037359278932647633096442941556859689454102368314023374494851052584163244671986578648891158891572042174334535561940662974336
Row 52924591345124247556171526615061279010895245541295556611053598657052585173633505625865308229471744177238746113503106264631955141111430449671903198884529165806955071590855391749319448862685
Row 645905148251744802524529156451172391831083966415952492252023525240841994178159351644576014291438335192719012320509234525185133424034664176425132760474312737511646198642817784967104033761299
Row 711102124401594023413434549731083781449831405334629545149983439463314491863201014132821568912562034450150272122479231701431313056244796141310114962220854571862673624785127317144475453442023913
Row 8337378922352628491625443132021467145003264484192319721191850493036963860198147825531510927924542275325482253015493524651136266837965055772684359521611953668761152291316215777359237575395
Row 910382723482145525429704135582936751844598245829203304409258363374143332802351212533024823631135160012675263483173210885006394047415994234064945224842524332159996433744492465018736353854
Row 10384045974989230751561443490143168458691992253389151841503526610126275395587112443533615310220033725823542755995054526615821467441975510563568177178010794622294656119965683272948238434883
Row 11183810457554185252317345937471368725854331329959322892495429602443273155804313347425053334025307831324056170737750131881595075115282660122250211532242569392240705652371951764266354499756
Row 125162432046905092288745272121492155575228528601307294293447944476394437947013499318025923254949485432903358380145296736785709420748451094265226632642925494575305112917351410321343824857
Row 13118129463197230116511654328859344461489446794185488016065231395015753685240736616028083539486882940575472121347581151807115359845110441076723355396440102241115781539501458524952125659911017
Row 143099278522791855246656405235531141842102543427523643150560244613503481853961618122744353573513459134741493049253280313518603498418842395968450191850413687520590750891037303856311362312053302047
Row 151030230225791227285159582486427935852426262857341731351943661795571832801188527185010597342435340573331732647584246835481422815641902878673791222953586133281176424775041234819231023794630
Row 161420577829075289437549174035181927423321747201017643872645924503536035511871215317455621024616199616640195228131858111060356576253361765766430630583906246415781407409986472333521907414
Row 17389342535247377732141816419137104800274828951918116633325102234535913145594540315532139143731094543367264315291028344140632175384366425193190950418935572507306441804072328340603906207055703381
Row 184594624589053876721784595512836231530103521016644816270635443552543031334754814388040749974598844419754461034135805211290034464410356018278131842844673284043382023575816094233304706
Row 19874292414913215392152484408490246331855421518035327472752543734378414874369446625715127272425544752483636555232411765023354325247642445803533528405815396618361823567653005742442333774421296
Row 2018335121261357426743172324351284921213923650784825732307013905495586552075137459855733724068104722451297734408456328424892838554026432123382115374790265324161892859340439122205250613842554
Row 211022462575837165552364912631347212612793418122728327871356277830947924404108682710507818052130207535233034334020105478538929591432521105914569733111112399154615548341823371984477236573855
Row 22591723893970544448143192122108388136513948106739483668543354412400355710005178866380853894229449454739661046145282818804692472216948733013336938303499444440672311562125116642506131345182953
Row 2386038743813480655452053213054541205280113435673540131247261592396051972337483731874773544534419624215723042654534237302760152511353262621516415752263396466366944173264376049359187143735
Row 244655215246064799139141952633403829335947278035433927355607577457426895801164830668283828122320353166485142264278467433563584205413542431563454771451409357973689374354122784842591520853755297
Row 2547973423281550617142133125937721749289849031235195922663133221115294058292918484124345933341469211647111945455198521847414640279535044645128750445412466188819884414853253793322923254911954
Row 26972592624613638100712171908111750523845653379272010925998370932775790294032861950593012289616352079956261651511780296241003400488847145598858864243314415726230614592168744863455914977
Row 272627248749251247536741151210539289942402562577321064942158040161581376453085572360532495865346928082623335156049185516133231724698237238865512365547633513121267574467756361323597910291052530
Row 28839925712122618131116498356056039711802556750454685404514094828248020694762895995472034596315694229024741250368529662524504763558244661153569560919752579548340602530400431645485193088
Row 29187785737512249054173478917112609279481356663069225852154015301310532065429925905468357388522650393529405810161269412433334073574022273536326758852561313158694333524026011804593130464372612
Row 3012443406391971659215492202019781023457105354912211015646505052423955241127795370597040303617137732141999502034204018297430281088564338377536064999182040042700982916107714231983451150245410
Row 3140022728394845274803445815913565903375846955975958514459474591134222155225224230832222522715521095319171211143681977528585784546345866292590611371090265226393927128622661462105037613735395
Row 3220175910525057131605599041083480294124495029125831124064469351845091560130224469011051238448811984342394473345671777560168739482077941497128075291229012374758386242661796296632172158133678
Row 334587239527424455307134255619131638543722537657361182226735771705147412554853501622982414211491932085399149480212332578329737652640945773556057012182247215013292267736273666325926497517091775
Row 3439361886192336652097459451694404563553235128597433053094296571934505741644610973297340674284519817003148494959691707417748811481137267247483472565159352777494438503819281817505607598041935930
Row 35354881333413603321132672420212679281450133076131127554472276203049341522123333431642292395638903725480235484474537620225378865398530731133547129751289437996382847206434620500835142471638
Row 36106716715569401437752283314136534595107480445194463129049751824347243501813581726592087147438812690470955481356313453574805284534342036154643502114446848213823339617431470109535644630526741815559
Row 375652302146720881315209783036463533762720572819912983035581914405922186728891486573025511648134413495808073386573425043248303014272331988470036174806474753955571596840983241335629631781144
Row 3822701613405593248367402304384441773203257590535163184434150691851335558103504348159995693857161247853323667488322187525276928518559434212948287056783721495445221891359839822877390941773888
Row 39203843268984680598125302669291963647694340416218732825481542955055244216358642202544024402059165907696496480222425800174511995995590038775397141056204073322846163814265050695502393210932733
Row 4024211027578116820292277145344105012519276124201439220402324370171421161803317054672013767436756943525349670725373696297528482082613597251343441121466335214474368738053086243517031154
Row 41127455044019292058325158482425749015584195613934214341138498824062531531756522515506821051698202610423724371928194090589519125616342744272974433456573191166630315715179354895787172538465495
Row 42478458685379493635237556835149244782554775643481814524655693131500220213771375611991191452251555096457175663251923515145593943466266241394561393454804101161856334314229214963311204639
Row 431106655349218225018463340539367286339719995028389513044445392907104140093954137022555222652278750118293259192648133081899283146930294031874183477855614970350056841687172920444371637
Row 443342518326374841587102259265427241056993743328104634662789182740401478539212291253180126943411643219733741915472819712414450127428918736831856308181014411756805401685727262012592358544421
Row 452830149719383300278812382882327221573947200768350925475360531922022252427274595360743813585956455154113522401650242912532357950312956497472043963613621053412532345606398250344027362413341898
Row 46450798494752325593559042728451513844204728094061580460140204805067849536226414259334846583493247444653304177288321739684292491869955742076309251013052651222944993066314824123145703637
Row 47240541059639434315436584646001441965532459715657305824122554333247384713339150841862887144250195640274522253936438339074395261996310803725915343869301636756595260200313962692311142704724
Row 48235317953977808558934351274228511361708213211313342324231654761336042733084287497235381953282015531581210910329514453938452645541888250024113779473034584347551057874944415053635042929442955
Row 49368943921766508135517064377342455462985232995144171655569523953851800162138735607511641015391148516331918258631955225513919328095635356137203323558241183763543616802134112078331437742361343

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.