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 03648386632072693366615833362181746171270148556342883237830587327623824673977469912084777330437744394802413259941785465265710871720792424108501241511573116548503255463513432413326631172540
Row 15245175324162720081832314210303083297710392290412328564789417740905623414839132394351540473242203147591083427935352121335819873642128715943853393414254474250353113279375624844922408252891746
Row 24338295562147781078421046435237352716032347446023892905152566454525333791480556633924864311440603707591958281838936465314744239555749865073156256091132246153621671384476764353476239659
Row 3365050242346524818240138722382596282054399945079223072885434536076061022293754524994368556433867120735995326306444140535361312526558392468145932145276401454802103154248904601496053464284
Row 450413664551712214167852288531658081302635566055730225153792444774263531241289325257804755214826694863695474818424343711230215540213062532874435653805127166722555143198246530936603940
Row 53057490311119011592336825831746494529974828205254903266112510951642485204217289481247439750273728408150674321298578529605717327548301862681164614894356153261119391192469259163081479041385254
Row 65821236645646095192209439864400896101519544456929901031703222925251112119519953030507844361243107544949373222736985285423032882493531853101281772472057402443335659154545720233630922089
Row 7260812372254320231663913438100029062907372996346021804276545363014132738462233423073939436910711953117830723240995274422018551595413715575633989483749388523134423691540242956806192423
Row 81392534410301306553211924731476810201327923834373432761689525829873047482242954334382427091345539025564162532252223093268303660645863130396027632568220344273532275839924335693319542972020445
Row 94764480249235452225216282651302514582394722072869568336953625374325492525424871555567618118292676116317095999332854555585534835344885621419940703943937349350551858199542404705498048343276
Row 10116824051188452907144543094662191457862634432637404836061267466974717842990269348540036362582551311911204226823322477268827353822002121248542214781853554454005591226835353484539256125568
Row 111089303525464355581910134726567342045325189434383980167046014151262088024465409425734922686270550925834112404248444585177544469041832273506244152651671265159275613448414221452336133930094581
Row 1250235224339845673905219045813788524826872621568216034476306334251654688179924755125614271022741305237458575374244173389325610912894482223263188505552731426584720591296529059875784456533591153
Row 13426619722246197612965145150544914854201258624632585974566409410145060527922326131719695431253042926282345562577102210318781831521613484552199227227723279551825964994578124347961104405850
Row 144487119932532005326817856843964860341945402622420339764711296214911284316335654853280557483390495019116021146062957535421048704039957167348992546271753692587255101829857813972143833062397
Row 15112357212686342344913266518859763994201756871309492311601493116015031614252022478831488574542711199449517582972650591319304347213910274878166525784123178339561166365438974404347753816939741704
Row 1644604854912236956483321588541232865781210415524635402166347254772621173451751907409011795595289321754356455333664129854413956574958292249244138307320542544717416024838391798348325262209
Row 171078487943907643923983189574217842981435621593660958982722467652094323325022393455183045282258331510643836137843743333169941364263456651515404796519132164227022042449525812374127944493
Row 1831430357945938464252443993482126714426549839344662474172857114053447093728585288349667446847737863925319429551960360721218251813968371942233301128231905213568184958724014503316111432620
Row 1925775792862594159036775943105224611183758228347312832604408204379381546345029194945437885920285140551886559536682513266731262348457457272868439731015787394710515208334124754410244904706
Row 202206555045102566239229146151674828346553625046625760117330725476476858164533385252109520483011187749081141821301153276861047383553741146536110422918232212919423352061903190935438025725
Row 214520113550072701125029529537871521195019912231480742272783574172537605960135650884425424049376737934711103020771075453543761640377186278183922384876439530845774432531926113792554343961810
Row 2226125204999539129434635350027195008581741525254341203723079813424168956555561213349345821162539732911672182108544524838107420237135815899180628063840486635734449333539633275132678514734988
Row 2312235413426814414400280550311093191839912886459453481867121023212974164054515233000467221154059157749405927575235312505476355923068307555871765424655235621118952731683190617140582239583759284308
Row 24121065229525394549442398231574834111392138884921397336825273244222620140316533074203224876854558624169712451672146246842252957238543245857466176924754413371956971778316911895813818751
Row 25261236864190165128582814229444434444249552842024706234427293936695333431824326510414531016451475821672442782473564258801596276514493965107356372674264035134707514441118665573191124242611
Row 26535664113572154235535418334584494137747039735996277124364360376671511152756428748711318442019254625404914935695297728335951192342472302760130538663295470958763780193530408413208115542663109
Row 2746443310391572354633015402415205821043044462405638922997151641004252113332252515665801354825722294251345505288474948755889582538031440471368241304873356938551624360819642246393641881288162
Row 28186781759103018356249692342494028312031124371418494859130531675943544979589952752062574523847195586302575341931785306300933385011140850455989522326868731424986500894511010053588232418
Row 29560730071746430217015647103023575707278846748421667341959312756033058538245713811633258714455235579611454964903595436903124507138812514777467341135874280013119025198530951404143533548422987
Row 30112733053637103750411021271342555268129532793395202337514220210325233820275145543273399659775449134343965338503328114699588541496475850418102539535769567849735835272331658812314501943904092509
Row 31490949140042344319920578383980559141252951554253424608360838334785461297466622322533542248175836303471749214953372946261130894649580520593456111334034808533322724794218045102149544724344356
Row 32435910764731428916363646015975473443016681744533752167285995556553855684838884154018193555364650074592365245012892732586754510652096509452564978437340221059193342173023207030035430462590
Row 33333644926461835465248938995611106844152141413034269735579441114914432895433313561011382232532512515693488541756112279155254744044443222013884424620754108913478635854155176936826663992113
Row 343130440335081210318316335285624232519699195950104131774419531616962207264841624501495438228541101596876430559514253316731774615532131931582144478643003343330137066587304150293647915052082
Row 3523873224520187036931441324055061109252143291194617355040948275740251549161313204318005381152545683515213667402622994943202542810892444404927933012421223516359805750547522473144481556817
Row 3649816435486371447694136265415581875329041617565678270648491220339420294556186058851359356915092520135218922847988308212293452481913992153740496740305767828425151124569309016465025567644662772
Row 37497454681927213537865024207311444622292294525422638034438505618045416259392548533654454436375359208912788922606684320104997514645954557594046375758654364831253021309044272453138445414761
Row 383061380750552402756130746231105372121382856781540248038854615446718161246419248651881568949325850383044024336292625125342342830863838875710687175258153600247254272893422217133698395521854656
Row 3948666234800178324103787155619933145572511712277847219556021234199330542247650416936940315271204659965311190847631366273316338394263680102547895574326868255265073249404946483564221520021105
Row 40506052035580475241775900217889111252435396718125438110650601868110949258852512422718073406518318581220112436252737548624982744482117617051641515650085212494349752708286788254215395322514722271
Row 41122944684689384128446331114748103041132670210021945395538157143605898227143873397574133004756454825212034114718984386167426002656420125547734204360047324779148052443564304814661640443519863339
Row 423543211251051289394527364851583255951853288547413836804282455638842824109046472923177937244983291736592747314417371496523316741129515020125569444439345297512720803051470745375250306525672699
Row 4331498658285935563224715646908121727197247012494005141165917152065144226304698363420982436413423574426815178350105829938401937995254524144252938684004575333762711481094392158011954463
Row 4429675186561037817094063523258382879692299136995200309448062770520146838526811972521562654833555195242074057160229692740534633346352481841566276235614942382123863444490831056052302307
Row 45245949915784635351247081943603991395354821312739792249729995264126642853818104318154596115110480331854116678196827131485136649239319617091637564465818822173028412643781096568651391189
Row 46552124453657516457053370399520162571246210921172469476826613918489822637254038403553672491780537916992611342764224851774169646185605060336829981170494324452276334546212938972165438258362355
Row 4712854610396260035095672218055413034404041134741268412818433358458449761785596437133508469955073508574422990342182586389928166851946758322710212685879148132011771588317602267551455381470583
Row 484440411232901668413424195775341847781325171976153235220575377244855836434694223114123805832763132538286426795126461910442537469659116240697583643153155181422169433563833164416137903155
Row 493925233640333080381035654661435836171481536336223035201511985881357333615391439200755613695465735143352421320301541463641170330643353536734465497449934205459936731378398856633620277120632944

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.