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 045073201976291412323886350011255131481224043095345295315185794468852381336415417272093440615935141692698461829665217343801180621048332361559759943958460239831840194830814433208141655684465
Row 1359430291751334732664387191417898144208331550633230479332685500599221675256691206356782831425311713719933466466542245020934649583839835254106510434418202033773825563498534044057429630275152
Row 22271277823025509549131957571197304753913223363345302602445472018211165364307281913042202313493026535780478042473851523820704901358059803225235470922744935013477443202126565559339905295727
Row 3378817714410469841635354602190210107126812574209643913284575473976839883934398180825785185827470825151512346818933521306459544121994560451524046467293928633956579645482621337132326631182
Row 43779445423684198280624304253555570492121055553304930653194571852654616510025596141971933311823772189423712855143164958935835410467829102032961153352725207566247454580171153155837928311249
Row 553173545278949161985299113494636404521812388290132641190124839394999353929609194709450961291759995516851674138128152237527018245070211656973434305043911373023132724412953641609113343551119
Row 63460204852823436484973323054597409443322451177546518135870406552402418111328055692366148977917009643025591934123378524054072112318450461392261739385573300264532325442132422755120172122785969
Row 752635879985490222646435347204634775609422510881029331565401282532473921195817551118195950635643156050841963328123392683461314952485445131942802576259320423353220720233043252412749904665241
Row 86133836334734181835845451419407058882643796258728793605712509545324695261548848231156529562626295527387053232416155727111727243724324573285441035249127053544193642229923915760324242883427
Row 9169812715489189843685169984508320234141925493516873177244542241734022471314425373145750465835276831071085152144318923739370741691718318412401010381329735770465348134549239350751171349824811
Row 1073738581928322378134494904486813265959250143913957155328326444038373325154882312827138192819542758913181509771342432547555452729775411292949862744344462215851039405897395135382190
Row 111630257913732851496982456658835516348811425767336128971627204160233372333993463223382161576432859311919541655694073754309919483367474341961468474157982083145025253637344359164813242140472740
Row 122639234838039698873446457846771276845006547138816094285417128291800118526485149384266055975814310246511875241056164100177598277952331330533584320684620569349797035622301255217625395282
Row 13576856743851173936561651531148471453711262826011162370414854834786385621102882974115511834733588610699861420367911514165188364207558936383754578927055781330261031835254920396022798912963
Row 14185149226301950163822114268250115675845882410250853709551253341014916125738075700219418883795141934882171237144654051177546832575422136863558308457922693107640894252358816121555520249053062523
Row 15300291523524070445737237514532199527271334478812058583480313895480715821222202950431102823382922552565526231021996240536792651458388930743628542467188158445129156169846915786320025195469
Row 16414218934306722084518156478310035623168533945625410626721502239622935183175148543125133348842125174544340330715653420596626124890565477371138252767495222961527398418242375375324525943220
Row 174966187350285843237014983604248525943533625221523831028232735103540135446554556204725281658383581346832453597719262378926210627425177587313843664565346244648349028891784276857401177337813344621
Row 18324724701879489711524083636106051851751213231411742879498742061694293644043631400741972707273112934581590313411843186446873022253741524423258712581230367219183568475052081565580114483744783441
Row 19147428035960590734545719313113185458349112811535559241817032825209407161154293755325135173703105173649973988533321063070566059034852966402235233174196344401703554022716489842442465420262809
Row 20189514120581067185824032908283616674894550537362596498450455727458251273127442131250931178231657833159317318794380325017732741392262318035552953864529848727545457517112133976141540831152446
Row 214650299842514668899551026253835672384580610649171708453065938004530241953781847232613639455306101037374756535423383882446159815650123010975803831284424852316472449501473104559653015415211
Row 224719861491268422973321005403821005556428121269791209176882655924006186032273393544043455675545435473557005559264333571645131884480638505398179652613240711741413423053709985437232601599
Row 231252651432633904025318232814559435646124056135556192544255139442412512515004860518753022917892390111046071175176247943285692381512425304772879288123581173210754225176490151671450104535084028
Row 243421101928751260535318149533329215352434577208628737535486336548276523503241536543055183262153158292901880591025854001889196533662651446474217044792260137355982513510372717334439743417102
Row 2535781014213951375206158517251964423536061836475551714862571231618843025547416182456482744051675560027072447435330945358182952241732376828741320509751192178211690235122681243389438471358380205
Row 2639005518726285440924516162856855570453555782219443320153137544940033362551453993875579425923349494275633573546104345591103247643401190443322955301122282179045244219168024185835329041595838925
Row 27464335331965897341755863612253321255743794220528981934319251894240116613992423424130811468572544925349188642785576377944541502665138722455956319328313934423745452387205353803420440352351241
Row 28572213073892145188323991244898197057035785210116074016565127432883283054191346495059431957312058213264105454862963494771147058671362250951625973200827372205045365144548793161442156040842157
Row 29430957293765527550681711618281926135100187232620915006367648353109424202232069142911811345013904946313514165726581224324293204364035540043031663444523437127263414584745195930753425963
Row 30759180252981552295759842382649239429241363576745243435399955623123280230624245287337403651282818054935521203033153643976262112722657475037005497434515891324592357423235384826353829580849271661
Row 314562272983540255726430149135685771451356773314842836518951854065576831124759297726383490393358431317434236599254952923124014735212486816075382450931032042437624572340543838603953715055
Row 322380588251226393255116121641963319925595706381354045570942561199379439702853535313671734465622703087795520145358684523384933501381481330402334158044723929307055946944351005045120728775342
Row 336833346223119412631128105854745207206587746361210243113895991977256354524198468223440644743480291521072159128347636462542304761143921011841415027794919452112715987811408595345214428
Row 3437291630908193510662736595341905412197756961245395159002218259941634907316237231059568541935723351925695662104243705442564558255318532745844214234627174086851052052329248149611578503522153700
Row 3532394667474230232462912427233828871676709180450041218217135934785156517614979344421643949155302359323341072273043537917523053206522743096441236812614993530125615851366910992690122716153549
Row 365623613532743191809292730679935524475398021233011755164231314818216642151794167254211780531321605048197346922573243878500659650541074390446732473367638722633638419857495182423148245751175
Row 37842536290026495734820224344305548422744403163535449922191421102140705302068682519229265303293648154244568912415023257638411706195391214519134802989373228331500571449336080412925588830
Row 38469447572912357044942946214094524025402706561622351712525220055877879390450550329321124313239571708239718793656140438034795521459565869274066515944335282322697274436381537363230499133174714
Row 3939024904151153735293243115738745254524756704536138769658575322263637555298368312181370254828928242146254246963846191614235420117231975141199427341364366167346663073502109556553055434339451936
Row 4012725989135489330973322560355155360759595413834647484028181697359750686111055131142109916454001763824504315349281057487248345621472753132607861333035035649521656224697865493578049485715
Row 418182590460559483094525641724214243244011979553259230682916579157382014687236833811920624396217251541528919982134785397848975320431259753050234443522838162936298135452623214431432119675885
Row 4250505136392846861859476552654817320515672724467725287965704397340232878935134633193768596477523945075282548243745839309018411848335932271997150440711629127423195950473848953106530718801293921
Row 431616251321965133240017521724315119805684181525323456491733411510572751425247403114262003454324178759502304335312204774929794729516823743360126340551800122645232212393932562114747548035714713
Row 441736335034997153436317827151165533155765542407621945786593618595617546735621564722825997813277412435605601491153753319501431514745585949913664368378426322794421276196557514825564050493082
Row 4538392134454156246782375486543110415464187236429363855571981889310444109538849915370160934844391107320510075744581934985101558537612793530628252708417117125866589827324026879442480353769
Row 4614923801307447036965074867269559862255860166536345649393345513984386423874210254220101039293427564181852282824074490313835331463076584855965069520221122496148715389523442362374508027365433
Row 471045045734287219764090576561445436935815926210931174641101416761195228349818473267563428311203826538938215052572921544061797317730346982191422623250735303357134149432854424576110691
Row 48401686837434341418416412070154216454350268530463371413704369374737614016154612746311741425301347961758281339397717042134458219136783844584891447340759542111435132822164345332973168
Row 49196448745526404011262797179747174922127228340135860294936374342415658823983632324655281407537351252338335455800442219032581012623352339483148385348943316639439532734324270481038452131010

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.