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 02267254831404077166625754428241419751670166111343328561821085572110387651754285317643125464218731971461440223039235503597435843795374738025548140450675896421944604647639576316781068155820515345
Row 11429485751314352329720009142992562349741581594749530393898398416404652144525533141472045999255593291448293834433353479948022261429025025438485816852964369195043503875451131233952292341475334
Row 23708112343594218274516824654393711994082248242472267484926739139985934457333961199202256243739376948354459150431791362398332074934443840073844362713482950483217794668225815655483409244752890221
Row 35597538817075772322325935015897566364431134503405323135306193229805614446652082993438156631672153342018269628041791123535059205877532427725092994515492444603966259947753914365120842425721
Row 43348349822827945518473535521304127228431685119390911505193154018311526502955732139863627458253151014329947783925561525705806268875032562343172441518055249419736653754324142383629445228022966
Row 5484251523369375754492539374334075747846552944221639965326499947124172625318612594643902680192259911511053651585158685107329210663536510359056222212354046513313233413128204195453025742034
Row 61213989770578442974922240624352953477437473660375843411692315939062975261056582984496295442945497504251171315950655327295849114907347750654536191176184821404298344938594064461308456844313
Row 755805640433036524808520258961872211352233522339129771685152313852753205578541120082430159811013200633595326124672076488454515172434332745013620255354524502276259301239138027182916196326842177
Row 8203750622984482580333719713245416280957353721701180159522081795364525343672736373451633397453343403814173888245579337843374290254953583925756584326236062830299624605439151111915404938
Row 910929304440711640549546311242139939613859161636904573250214731203840137836294981359854106553911192571211595929451091333264212930575482503528512023149439020531776734160270631315601048
Row 105602208718821235185521595608493214631425381568571442212913166310828133923192503840444066617520411724182414948428155020249842305410858436054411917146133837692220390934097571854341958933544
Row 11573258994360236643681872917126355115549355410355661029256717142352847211486928107129992814270110833395945510745233628495336172210150741353634273758282406444106501654422738589920279423573
Row 125483410397235941134907230137163619554116413264369834034503219932230425597344318973602193359411648239042223473245626153775152653321320414659303230479660151285434429215736052000286534012013803
Row 135549225230016184993140717492670179226035712253115939312582337323812314102952205721344431448118412833416975730815662585216366650094724140389432964423269050615501333417754457264022404471938
Row 145423976107545342819221148985946125117451333815923236411783682832337220891736115931355119418593648886481495471925703454703268114362633419243461316342652482790558856774692691564010091438
Row 1514562104113020264926598912042301392848802900358229501712430424301482156036624443281147464249261379540345916211924074995782440521541345573422274051238342531322181047903129233412153668487248764792
Row 163011803296932893380233852274300532122639554019252339231386055663298647752770128339483383131432744199269547189718253742561946153222867437184535249511314421846484964415051832801525143513756
Row 175098157553313615369127792136156711444215599655852484619433479245153599132401400316322336242193229598122245431472951621375304255743795203192139642031155305620253159467031071442123713211957
Row 1815261354919276590811411260363812134262396018731407391304813195735431130363782526740312265178930005890150934493437805151156506915187597323562761549250271941598345915181104843108776313292400
Row 194533924571430392396215889859462076417517124682049515057855413658348925031749347448512679507044738905150201924015441324565913853799386354481250195536361703319227465470536318574045274319284856
Row 2047215481544613225269810651612555456147748963605477519482553705189131151759446549154069369328163205216242003634527758483226544051773515218124312113782694246536475506437742912674395618494545
Row 21368326595817460251114114517815132639374911533157458982454404801809545636825364546296942514560518043372191508042365742560915433183722345340247876682330232577400946553274365259737805042
Row 2245754109208833237442761749890452054714408390225619484726284457802333365161639283632673084599647855691545832643074192559526945803319329737421524233236674912367751924374792495519856061569
Row 2322972404376789412114024576441742381641112212406729323904199621718428045609572612243508252427085592176342742932971979526348923171486756232664581128084419565982334150993800587756775976315
Row 245273545565257927915018274358134011271013546222633763209711653822383580942925301237516813096551122243738172897554924123372946864992227254220442655354092517335011197108753424379495335374673
Row 255822331610319876443291753384034115063356368245249432204202044133697156924494045325057121510277528393015494525051343818201140003600122235301742579165655155857358740808992595140136012175646
Row 264022116158542318248339822029284370510551145866845680469514564864822146058946311216625688397287753182588417815526252317442391948344637585819292130785851783177381148816081961386
Row 27429646275728884851431222310617655756552656795006451426893049292313794871447657053256771660360450661212047334056184283512448143143105328510752706466628653861075174223343709201259453763642
Row 28288434923140584519114191305159554062389015501020422193632343166349041466595531495622211002344249306552528326535584469236839595587589946372164802516039202647399744822794375367430427281712
Row 2928631074308239701171160358311412418528921895359407052515700354720451716524531755195562945923717543789515613102361024772386529619811822580137591719420149467735554161440733266952167103051991768
Row 3044094096369122292497740426824229885433258031483294816176359221510447818545362483223118488724222394575823562404543123531342110836463754513553212581993106857958576049515492963252441962438
Row 3140153732174371419732065148722588753273005209114334843401132324854533303630636915348127500025194973660195144915555007532451262261536957113387171153403995322751765062242133194411202634114544
Row 32188120664763264726710672024236529532151397118255118207414643356336275333933472259693219134111742757482791594134474966493546531563112627703926267354104152549726445062020685358295143794570
Row 33560341211054415417333111594156618452845511724902334546344782191530632874786511218121620589101859845109416317668339901268317780477351682685012131737784026569333313255491510345432610255559
Row 3456012917331037013262013726505234405152538846584153126738673980531310712305466015455933951592956574279119134851538139032542545257317925511345492217136928245642897441242315943239030932939331
Row 351748613782379421973172368481149992548270135075061572429425783319174301973663871102324507865404338320796565656402587534152431093170947855553536924741356372049192628338853328452832
Row 3621001419488853964805365219124610577334962159138058635375327235157694804374418325856176170417882123217544342390204446074768461561234514932452863192050282190406229938837899521318295515744975
Row 3724104509344228314155110631221954718210614002152186926573027170454724987319446123553147269513818681120122652305352136057834242105510652149423830507437182315147726534594641567411928034063238
Row 381441485964545618896211345934134418175529446011964489957277551574998153713993941774184378333661203300233062992303508956843781341756524028552043585580184326364131531029402951458013531238
Row 39264143751894161334512518001118982358113049325040588837643381165892151849173062514822398755204625439721335454309313732082552245052835838568339691590365214434865531733978662554527455891251
Row 4052501535154473200217113336178525438793337447451301471319953519964584498033131014266899545641030534720611392324855088575150477014107604333570425721652055515542581382537321130578839025918
Row 4114672843470412651377553221194905235230929052525268755895592228040714728179241313933422731386174127313043794198285935353682343518155802404366034145942387918943629175545184665002150301657195456
Row 421405594458641636177813784744446752143324464263711555311330411845255412529198239632706550645324839198719062463505223584677321112162461232919645912470242746912232541759772724494595832071024115
Row 43601122040141734506377313783132373372444191562238120391842291189510340936000439930102508466364214541892922381714085945390855534408350983116365749513921424582199251326602219413472944225968
Row 44466055218353565217617155559470736124276335183430815692825847333214845386462946354633493291637842224637401111030774758460735539397393504949405553681463495858345898503348595622295457341320
Row 4530107623953868397315942636509153352962538154494131237912912727484938664981252997555383811157929541932383026665173155830159741803559454533425980642521545361841775932204126444486577623093447
Row 46531441001771197812154453654825453341453691167829945463617547048625100944486824231627581845793303111135115075285157131376135207631716142942316527474578240428981386187885754903443314724234641
Row 475751459546881057470792859727943876541534488339515972012220147993207564341442337217913761301251633254451562318313244749220332376659614360445418524531214358193811507587430372100257950324777
Row 484103466317329950952020366829475894182142834771157218342803409523645972286186536095697280422511301400911985553114316631675181744074119419542371054175213075091136357782895601163052108136393679
Row 49106113042347574643361299981426327564189327824593430861174794324146425541341551184046297712495348488811186424432470817353610603199463952823466204012525855285648104877259214565200148410943168

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.