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 058094841298152581218344187440055674592357833157018193333815281232537737203662457645198935587546354379432727522312835501556947812253421910701984869273386552897424954149157829942743841
Row 1407237343467339326765694885446518054324512391742404601094400314623251812286540956121569411938483707407012222398390037874888429955884299792181525001463241534386011152261912514650537457634803
Row 2714103420353012863986508148122674976291719462741243917311372003818494354451509201288140361910432947024961382149953418188215765921428553813094483100124911910154403251111441461711689991158
Row 32248440533214831409420356911650142535685672750324255774616109412434201309047155631452244232467508111344359557845222051507599457792402357433392226571628958331034270389482146355881803760
Row 416822454958306587421952979216621202683158431033693317624221696595814555759416248614873422155643119045845503636245313034890244949881080364248623917535522335038265730243745225459294736944733
Row 51271162412732026490839483595996413456350795554373731022116250756112339577613242626374739262531814195021011476265610825271356149921076135928777381551279175229663660120166126603308372694
Row 6249241955068335575431545047168921501721420802173353292124117419974302538110322623131380118281475798171829051746108299048061618100333753967282043219485422506651401393200216342265491032005673
Row 732035231275549167720661576509414954002531392254537513392518055868264926233346742726138789150151040595524405212955236246449314901501520317096504483161347983009301035256431412498645511578
Row 83160118176320961407296638610775916153196947712280525421601558382869457415235387835391354124040292399278157791037321543191772342393930664028520493571341476935694171319554951534365256481796
Row 93053510266948675225380461255992265390942954803310338395378298352042097547726615361164291027705843477518095203019423620214236317365817169015571451127102961896264387355307003227427541661615
Row 108814592144539184233954371476856581797983547325736524604485725892260168238549203039482629872081474244879401175134412922995701272141675984348514567456282989581523383121630592233844565053
Row 1128422623248096042429661177176048721051112440333630306039124879544841951281112549617725280292323954678148355120278761983204988585631241526412251114609163322518939205494271127982309965004
Row 124129467644185976743652282256511136221851643732566423713601593859824535173196142926194648145342454499493622545695194042185876407459422923313200943463995375659412412552762283369932643053223
Row 132602142137551583354312545821276553035269435761355438184629394461254235365019379371852413006427726321354723100695486485421752519933856575885156704773125547741887569026261416484237902944
Row 141494155348121947258453985353962492158964429578356511581066450727772232369040887152851463028724786236449992085170111122573381232423134232249312232823634764914303033576138145516456027161474
Row 1521935539400049643221695860295743001911103850003714180300519763701622216743449452430434556552688393124458621183804244155356283696423347141329443513494028131698317927332176388949594928954
Row 163799240456364416112648564987141634244216990512427069635505236246558581470267656373388540517048173690591558159724184125922133568482320931611143225133471999430427163742479284448321870735169
Row 17543727127473402173444594395173850951616374449184479378149284577132520923981211310539172889133235228801594376811762790457530444715131750974886370918961672257315055317458453015672573238011141748
Row 1848183525433623291336515090930937594558255932785435774472914174946438385650715931279598841353862148920172654519430841503330148512370362748127096334004552185842944822407101253935525784872
Row 195369313646502341119309425594413318371546285347812648161442912244762276407313534474965734285536352619694257139152254548493055357899065242387824194549571124112826669933719553134064078
Row 205260468023741324104251532146746497038955862189755590143064335549301646613386326024593592264050521147487886241193342533956382483121213463935352973103343842778141823393458663411423295782806
Row 2182951144783949203626344152548151182019549510165134383213731755353752985775508284514173122105816573581268324591084416242352861409047644868459138795357360142011924761429563553515136517415794952
Row 224626394314702876625275379742255485596113265946332238328391669321043231699590530933452651295627176942665461608278954355027340039413171474443699849683727525402245837172251242196338573652
Row 2331733370416124728561601347201585218332345216615978168543045485005497578527617704301906595564115374653449517291324554661334814745463641682085943160023255298995435218684631271546404237
Row 244046514010245152323567274958751313794154215723732188153993495372049335725353347865690173132531892950121946165777215051171639519115072352458851972102553265945025179550643563992589412335681335
Row 25101527281619962012597358442672566611613559313477046624152120727901840927902134316595839356943121334356126116941052533244971308353333734319175129723711547149675457430945450812386989961759
Row 26258231594581214982173628738274571549054862220215313659644309215657975808584128735541262029628683311420572780542466031462844206540833571315738182376312271525268213993294417527481776
Row 274387250435633650594621949663654323375118222751420412925223329436531845805570318761113231843964592333357211841111714107950658855521398929094760539564956384030414159982305489027248392422291
Row 28569641547243565120518365031460252694799542058383733405067022651555291939014274936686151158713524538143042864449468648696748435172319976848133499143832903604521258934540621992423241845412
Row 29437735233228356751714109290923801602615379168722992870223176014412226446012142558191369376540221265443345582674474543013591423031461232219124062786277381426915707546631283153527454008841621
Row 304707488278022965404266746325738483735114825558118471627276923991845607567748804394186431912142225914641637178328013715310791526983976556947814032580490397256805815543353775852395346221664860
Row 31321753892779236857131981166619242259572047665243122380710176501887340243807113393118346344763653549081684277556191701369689428471870584950441392263642522584616157158573779305517123665
Row 321074764695493243411503604532035723206149037525419587651025431585915485003657336418125881215659914552272852312883231712991831171433020165026505010695238494358703104174439644355197344452623357
Row 3358865995311612396601275832335435784779425142623257683059108949831968305631124234352920542736576565228795588100310381134143339014116226033573327253129505295569532323027531843603732316321734097
Row 3456654568228952915151381829277447744419148146496125253291344102365128202624466717241517587928803226340840031104486017531524849248584935664897325015563919568539852553079834280248461709420
Row 355478183486113523593264731465352402821144209558372034543608376794664192766712562561258235358285813222630422810593847861437210125091939264452682068725572755557161057383021904618505323394899
Row 365912263141443133246366034265913550720499377094460252337242375575350873645489227602459454611665457483619331235678574413971900113646194464306549254621259927628005797492239283887338553859051682
Row 375011444421353504508427064068965411893229625398162932325974318745479124951225437451914312518014633307018013346385493218829762060990486352716013670123750744391152674345163062190128897763122
Row 38263579761651081112550455413811908545721863789567351024086395514484799166319578388131512284367859669195624440445883492419190269329264905857222046735253566330254444474554841740487831875114
Row 3974169315130563941068505416455476534151356723882552601479341559551413599371560555714898127153992398455671884486316541004063124724122578120929481533146210452818435210175292292323661690
Row 4043159944429160538294643618238815815788164262166392513404990254457805981610595252375225148244575804583759234413658462342131354863647144612124399505359783052544353204336413390543156732641
Row 4142582699115353704362229018699244665244315311406164513751441126256343771412949875957158310983916232348712645106235205805243714814845094707262549325338720467177517265105529647862335526636113262
Row 425604167331903942660312437265813145716792475467637685356179146429701921423221662340281696295524174160541615872822118341339153069568710424892619402015519404487228031352989339141098443152011
Row 431872557424641271228723381868476821827684924218306350483308331037374228381284839904843396122837716575249549154365696314032634669660557949041431355649234633644655514333754563377626609982805
Row 4448784626347548812464341628225150357091939352359811169383849652352629337834422097172249792648404619106313993407742464181963827892279537002228283621463157061496989500139752202505652261795
Row 451518354317820466024813456292322804752297349753443720832125624924765573538113547455227825253191131615147576739293326154415222224177222543317129133765681360859685314373342083512543289147895841
Row 465147486326691863497428526423625230816995982521430151951567116559893229478621141113989176632951483165550413149514919895566241618735504166164786838851754125031432515113418229034092286213104023
Row 474084190837863993596120675885983333459604462255919324826547831416593299122322364798306923884091624631142112752782113522623212391625405749465088382816714866155085377431812620364335323221750
Row 4846981391599210057224350115721395710238231135084219365567463471619321731297691842354834881543132425035415789273324241743994804443351348523032611131646903427557022155258103386316951735
Row 493684152231092793391235157394845175595333392912367452065803224095955735657187361853471564340378743561665456042748083423424354503368380125334933125753692853279952413170377521195606152423155482

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.