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 0517059863523419111421301125725630172455361775341219313847585045023763800534840912729294235894385328723152048162142415338791422728604981434049891054412461918283947394524058784240509043794615
Row 1289037272705561866829440023954260849557584953873655075224653453415123554501826585412785772247518564944865608402831012497175458062115242199116375270616559493554555131326281797565843
Row 230315107186828843841639313190112881616508531547163005106845215119348946195235386313255400381148784951412315067473780154837782886341666232705055379241713425408467956574123168372526448024213
Row 3126336207625875436588614654386400929715132178845192910467419343571194498913631141331770479398748934751712153612775925279913132000538674818858515133589338214265168123401174355427447452298
Row 4526210824125928771204157957701679329013062955321441044268521334905015109843404148991216024122672450035863026277323305324203424381735262533142939420430844618149343891573470724935840392059824854
Row 550184321300284815413267949802999570517525329502837851766763410508037024614216323191065513891481330443730273230252584174913465585175718264998443680619964140255813243168343309039307532169
Row 6163153664331395054714882184042841925557010164950215427652951739452121217362956292727321096548440564263582611452193578331438235944164517725415526361236982451318147131401533414771696107259983817
Row 71808295474345404049227259623115337414503631105423265742698409859883224170936855675489023981075422438752771529638725871104825133056434873155622381184160859795687223810322013281237301102799
Row 89531819484628708288117024932755447342274627505953305451388497343241944121155083551118951945789222012072600594913165398902313558821529384227633231277435171703100021447623301594115053025918
Row 93093512542664317004620432392058263031386911412429477042752311298211750733529489125895231589047335993220327114255212444234335669487717334288530856524113233935205254476822903529107825875646
Row 10150116453627395347442614715339464517974804166204147144199171035905931599728975583411052363102336440035392893508019795385229209450741967144035003437779214452341258310127459724508298335614438
Row 11298045840211090569311234454369551453462775249258842003458549583969252457140680346016392061491019132032341748955592185518755058752964574299714183437151176421140026472213258756051822611
Row 12206115883414661222754745570413915052987303410974842490811464716187288757133290432412234053453452254699747181143049294421364251618351025474213085952881281335815915390924224822505411386945941
Row 13851398442652073203627981298735354531085038447315295401988336342657304671102026101483460025245391102213464445215920404386301023265050822058544838027922992348718301464501612312451237816562180
Row 14104926754790253112741314192122952660366445446994751146347221400545780848924357238394411540153023427631175358052286393385349602722338323440365303252969556689835393441924464114581929904893
Row 1566639142465450423251865380557512495555855554781349040737412113790397442463093502494027611485433311793930244799792013401662483338041661158566839719092163352846394310178704683122846602657
Row 165474175231594414451246432746569025725193687349153223492324433625143482400348443901664011485311095028572357922554382244857281335607414146454250887433482279502143136101369636494638834118
Row 172948436625073114237713594222140410824014165854634621386559668552642404317412257451384911594345011012963408646845220329945211471010715876843292991115023424649612280334208287155594447
Row 181187597110213254612615377515625577186016074224063460056322772470712192840303542093989537728574601218028904808505024493255237242042755612881889433644424661954888742574648519102933541737
Row 19386838859451857576528014571944569152659932140251912304559794179114401682126588121483205929303445774576355256061929528934732317523353302081203457874025172550515018386415692472423236220373862
Row 20404421623742192248236703226105822467786644174664137491529834662572133232525963056230256149203871586033422331897120342774058494444685392614169315974859247022603033253539635231833386295
Row 2131651113690220341530411391285163448115172059568357941174627426165612415953225399242345123132495749086557902770749395438821439417312971742531225811904379240983963347538914079210121524735
Row 22334121049873440452654985713483440612264272117519742225505734123983535153571029341057350110325020976492330983076107418324173178281838571704231644275186722565334581897162656839545037801307
Row 2341905789424152473290527242664265419413641341526831951757244613561341492329404033353051369279249475318475590143545541207254434354471790363247195518972913141832382180461349944626462646072774
Row 2495526471094005339901295256561375285240101928405955322713506234359032225239817995137381650361317242840305942105426372716200852832824125621372429645277509858163286102638753839329613801823198
Row 253604257949972741394403340572822206239983875469871458833981353758943602126028582878358267316413835474002467819274183187655307628722270115549043273977966432518515664503817333645257416271246
Row 2638344485412441911157428855731704229042513630472127316012349995430238959035756365868408022155323117394841765691557554223524405935451715521618331288919412255394549459356651708582766311382215
Row 275658932579143349734794196420902742139178123165561530437531061019559149382306509305918445058165215087661478217119033692273527962714167176950641313858180627056384122583049424496293559604086
Row 28187222654595493041083652581561644182059178632057514521311621268848845085281827418903087237950112916132035075850128015931722354418765216523839123312682257329130532576304115745692306242614575
Row 2921461078131630354164369420461080501455529302931145265138361331330354885170453575514261826380840024866538136931927364122674073471835821108288212763153396128927054890581384915414417518048433904
Row 3043503378465857765203246637774069184614705996548737374068420513195175108625942328504728835032393734632881547718792061432057834101697444118589990639624967275154324962223731683030441448622041527
Row 311080453257339623564450914254443986330325052306308629144003152630994901243110613868518149228301418365958601858214520643384322559539571186415824662611460245159141106275729994019759452411185660
Row 3295421783528135266935815523282173410247322807935697287447508831032121534935633166534067384421404475751804928587548395882205223661647212723156850492939497715215219577012172092451920993124
Row 335733559227561398299734945819340122514998232921253837221041772022226289829253793194658642769346650822539468211741058781429779037310522188336945462006770796100430982921484053071098504215333995
Row 3419665325594018292094340591146322087208456892868380479324014322667609597746731378773567644763694451637834791355853152786552446392725135273313022625365221743465053508447255532232415721982932
Row 351348704310907546278546005062567339126195882176214245212901349452533031575646175247410136704331282632016542982539935863115269189540218154680262158765247112494512818746363648308821292900
Row 36118188415165365598551863696281023864349579117851935290620543829926286825083546274317543557523788237443872452983160001429949188429453141868213040094677451623574468300429113732354212022985221
Row 374628584419633823400119912631143507057921974507012212922953416532362820294124414974809360059645109189113361462401136346822638347726453019877384442822020291440743993198352949152936345841505756
Row 383752539312522560299312161669488425523131289418538135532366245725514539430183355812144906455131974200546613316573616588854083009114019682235536374886490676717805091457913112753503638621291
Row 393336469418494550360040017471799586618793456348117672864490290648314915261246853764167323411563258181324661084832813014184502231502734262135494480441934143591875895212647381384503135691875
Row 40429236125124583269240657155082487257255930519910264114422041758478411724532752605138568611343218115871141684234393291513334744542159174394813065825581910315754501820563867323823047144079
Row 411953404033381091372544721122553643422538377178158285510525543691100599853162405582251353435557641535491344213915720215554691673195280727633919127838853455561942238311400250334065446194440651
Row 4239358454733070428048122237703489261334905644208151635838488719253757164581012115783232504211824812381183551008212486303516652958104594430051326371349439381203137193655975490522903732
Row 4350692099494248512330398433281136418681911118543534945284913115049279243153745054809431117084946433020724920323443612651230346015931153278955761186560059403053151111241406455397227165503764
Row 44103158771269583941882976478425175047370357503408354205238671946320565615224391256146114431766258428482220556556317231319593159925884325786556352152302461029182052201732724104588352181309539
Row 45739569979421991142255947833989477953383552501657414521003244457618862806379141881415709239343239804343331431975651385339355350464613449112044917448059834254203148449101752583215447514469
Row 464959254126563743249289538051229123711194425888497123602383617249472848201410520748035664123852864574141218697271623375686270329935959525887386411801123498356052011395419652248157044582976
Row 47390586821835192553134204478410448323464831499468345161697367545751648356124382827468414212431694537443952942943285359171333272021005242251552050013554351534751853345293700504137032275688
Row 481263471335155946133594664055074341358145011933498178239135598230616351171307517346865357018126823401585343845676541564743884055559345204000232402723403813447635331311257144590825621607
Row 492438682124349245211825430352025226415635864901469632323288275028241808750305658343090869430962221804566206730881128367431124995579760335161622490627178473061303574817563534303545063584843

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.