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 0240344451429912761124713334028553829263499568313644033443535185996120410784343070323767260221055262244525652434361115332673105520475664381632949961843283139225341251452853374949280333702152
Row 138803803522211164475582432213736226857861695878131928429333366250547486593501591349014235932370733059513509674310213894477232425052951214757256874414551185642928293697522441942023972
Row 248533702456223425124449423445831179832943340247139647289472719123238984866957458432794685439157112963136794549033384766434210403328683164182130275994361832033348971620621036343432944933
Row 322994250351755784718295611481392194255033429707384544684035452846315855155446253473187319583562258940194597221313353023215563104718994280400330464293409449883795152256951640598937291674620
Row 43584172032441057359352024618181322032152034533745252440951791442223745793146866638864554461540815010053973878266401614621986126025185578461113657593681435059622213509424853078859072681
Row 567723743346456328291806397129791906336885621721384231841572643483537353104597034937844320345429973414593933034298845598349753219332935384851351509302610404876388232112591991368290150345102
Row 6450042595788332349378473659871087503483210704008405143981546409835323054112445721929500517832188520431505088423722515092324148465879563489436631299488047493335712581843413762421658861860
Row 717482940298331948681988210110551192525114354281501523526693465114323152402776453041191525486238311342320215935557308834521304274351623489524223724595036142974923042447553265710482044392941
Row 84060121514702179273933294081353416013637622505349416485487564554219094287549255221260558325635735490922724555334852122614456268247921301101448005381454740130185168545319595816493925225358
Row 9847809484936920694432293118033340520335768744152970524950961761549109561592946569612947382441349053639535214262997199223418455674302276349810436162701461430311163430355121151914100
Row 1032057514029497671297528001124587943947613053435675353852801241184055564739194431711440240414732555583350242766502331233086477411512062548521254861609200452991084330827331758846201329992685
Row 11156817384628473931781032211573286452352498588723575583466135081645414556335054754163658035838494425361596578945484594247411533211014854351021335064324229974299573928836565322154441639665688
Row 1237961470444154321273427843753808587341642356446763724714799173813242308387038855508664686528837495341461052923504557549801300104534217312318169951061261572326924813939054952483756432751145
Row 13351266369443785349598221264689459114182193416639734925211381742231528551633281654108759641351125450130865962414433611107165540231801333371178221582060373357642534538397217443749178959665276
Row 1413043294929239138895064351523902149347753355094583218835323832220903216543782962253719531214107559242958482317132924409930172175028540741064091292249524039810285748498132153280536454354182
Row 15152838121144406557642357514056885315396314012238206144172455108938235605180745105554191142208251671225297244654854731627101325421770507823064127421719943442217933945679424018112133532956342693
Row 164508378374739261519582830921641512455381126385516521383971935121527026254324696350316112090318158503900531451793533200636863911575316125430558047041070470442412196255844054333295434055485656
Row 17401497943513903590440108444043403985618187324043303578321564915521217363618282439185824772997263810595060235856061003533739564905592643965989365273538659824608279032854390494521993602
Row 186805816388411191674361411519371171406425381528366935418651625244679020243411552755282011371362561044215752455462033535234436123735221091597446640452767253058342951994124515918235695949
Row 191843300311044598582322405959543266157113985128130643219171643003570382558972036187026644565245395847635761175861144662428414711691025396934099843400406969413855349375846031065205721734889
Row 20195342087584616277232105574153537865691212049295756454830759255573104443335564443240112505827175050074430281410646021702301648102460163215815670120631163455896523523846513782545915753354502
Row 215907391049452308516047724057416732018715230380325732246261250323877419247025082130721575978542454062843243999220316774501211055873445441847462216247529125417334521413219591743875830494922634022
Row 2236501345532958071322587043471950419323454153587084526354564290468042025051154111359214499325431404415164029693364390399010145247319820569188516625194381151067142512355933370764556131908
Row 2311497673020107052652734209367919131178104358152167205650622486287556302674204021491054355028195305590537523011549336549181698413119372768339522109771074412221542116393643214171299780610462627
Row 243479308547754533635159438375405346847108827105764278684117015553423639105305309203226831425596810045596296518096415591528737264366382043605959165648995305250359872015226727732855396723261090
Row 25187728553993909553718233876540141884023492058431163657844796545541434755111130424059361330297458805801292838472126401857234981441636324518239150750571656234714063714277730413497157324961640
Row 263273606468243861219171044591099151113874945363754044668261738202299113440583805191571315215963427292846379234500113225634827473812443213595729531671105544643057599921002461466747162809655849
Row 274338477039405149211635147718492722400349140449625176141205238898315840581153162111151152372135765818243638567822285219355522324243447239581720321422941196695632308158445773328622315871
Row 28443289102420641403217557844979199322202834277545045026232682752697974785988111830145106178626462186163024195471386122895914414933121978555254871762453014793981136442532485389579331156581375
Row 29209664524925109575142781754193759084173140737684611321191637733299146832605060599747393041136129925525175035702836140749454931205114374039180257145793373856213965514533884426465530421993763771
Row 3054592823768419758632128118853873877475822225283370211531334513851913136485249848734473294917186113754821164357342451935303210672702122892948302416316270711732538199048753690332440122881459
Row 31286418641331133648131347319618718294360376073294791113929962019206818264434238345325607492052144812610384424935490430253561354563369216698038873532808224641122880254049034019553592187
Row 321360535524705891496113904123442399942555935348825575291484121895982500731683868535959751143471285526532373874218832949603548264834293439160948183850505128172105498530446614275514585042564151
Row 334017212435093992223897984748903352172010786452680462532921082063490149265913395117432017293520476781210119115275466534255441589285035363826382943822716118110237931825278124185117288944814017
Row 34181543931967355840949025604108711179426145576135215811652985569349908144075170619944176549938199571916293538463969515661478929183218519718192821284193036142897150537495054266973447471659
Row 351548282133643541997286313601954477942945799517452455459396321622676316039815497344359103110339141585953934083159341395742314096031056811956596820403909474633437083920557931661882174158425041
Row 3657215338248356312448282210453307221551274899353486820381312197327193268194047581176686509248844605467020494864101891552713012292010576136764832805983104659315881139947991919271177246375978
Row 372712339511543397248637200211562086248815653977201416955205402414552881285522593863390121903744529998956622010176142991987447216933141186941793178387153355264358899324023722594244539540485325
Row 38325030731881151249793144934865922459524648904446371858315865587476247643457409640273814499512661861588371058156363035383159432224981244011525430592517441888517163433328881217191924755978
Row 3968259314074470837453068597439314655368445114291719234142339401321672209275059738352638576744692970265556854889512956625570506037354278280480342527345457193552453747265315851980359329062652
Row 4056843656324835192933014198732635669167221514797133417213856506959986605871424913935328184637307528372222505442951271705113278349533631307519665618337163412892488431262242084286169042064945
Row 4115612455338888263897539625475319730155903232347201551053672364621805638326425171272455350041702117432115988286414164933442438705270531250824532735982344128858855764500759004869267935451048
Row 4223168093564358853612568528953557785276339811944208182250643478113455713722440655531163469454379263700533657953792881843269536894407282304997455703583751484698119453054280310085313936578
Row 4342532342131541610355567342473549021365113178397918085471538520892520358165910311095051083305335583885406140891821463923424162476917575196433520993930323722353042501932134850449025979381010
Row 442955259711124063310121941116658795176474619003814108861258228445256917494331864154117722831734389507716629851426723940261037832002571059773118368552294511419541082012015268930451270
Row 4536061987445617593163468349311551375959325363773326447538310462477931022559546010771888557430311995577450454684281931522904806477040481968345229793519121135725549838365305365188130075457
Row 46290326015917398044895490101148452645551682082370145788751405505285525912483374380255428278589095721492771396316065674564152236535053101246645536275471847032357508815932434227566398
Row 478182146471461922018981403309018553552586158185157553438267931875434169018504969196556836714321565538301564388134931661469856392131331718393029471949294883227147894701142743225082210615084515
Row 48379533583484575939251155408035794984564314602477130315721153434347339544622192288253454462167040455889599131271994149916425789485651255548278027936273595263326918181739457219743854200554471807
Row 492467163946881811101357585659893482982198318464623177170237471318348140264945384032882213565750277851631288027891078468652562716337310662816373092128054077390347875922252655762327218754104

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.