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 056185844937386313652339395544136932915764458134720443329383041194915134240127363399407050563865448251282796151326664466108743074779255552705329465842771821100413934068287111142449213516875815
Row 1275559927717352830554418826923354232254552198249185819145931669754149639693649291827802605575791417462968424558732368443280028004531256733241394811126431553733360280944615512193434333624
Row 25270535633624517482827005624971271258338502361524037241374004415319932631765431164752013441466336332256168840057731582494947171508464131385144981927674306026502105623594828361250133371
Row 321151177362580057153288182639218905007556447485125360016694264460510144336186818605889549584028962302453540694892277529973620157727994634091428916664767167218804847323622001971330046942104110
Row 4461710521661433517095912194350524455170066340668654804362516801304224223817414197952853155707208967953131711693221844104524220740935133647464278957501157229038772071130352022037603552
Row 5160729965099288516512314447750529703647571425803512270347401269592355816884634240155571268464038290754571264952468521958383446027255974553149733594125810305368436725794764458376644484456
Row 6474446982622778221886156782104104056372731130944052712458317555258306340485881180757315760231458905992165832811300580159353870538399738209971421345295195551439885341357917983140272022314496
Row 747452111327148344674004384430612670464337444412824409464135641195035211802111643362583179035721281448026144768587628923104130631923168738265154341326480047281033462054273430199427845922254
Row 825203254954764351524445099137932984674483145932445211753584724369035657162809172326291247388555781262434617182219558674291740024784532312573169368143619325080686889233327923881443342
Row 9521119474795122634132014673331868371163252671516102935255822106757624564067365145762528274870436196340314905481155814095362042871412537211424391306939641813952391448329145683475543652113
Row 101469387713713221368021781691306715655329323055701552208521852805053255531610761002537959425627180048565069509644865874224628035041345632853043485951242066482725883830464247062904267420213372906
Row 112942484020041979803531524099904507249534521949521870727172649242383419386954433553466782823718034198551835931642160257523595452311013050248035842951182318842154402726205987298427438174384
Row 124616728235750832827519444081454170339795218456745861335397645731836243250221721769076235073447184626953420415911252133135837771749240715301402123530308525633516310048952938114728082698806
Row 1317712505382513781392320434413760135294025843257398760631424579515578126883605179444634761301953924459485330562944232233872304334313620342559115339781653130988553100815531727590695118883034
Row 14394446735134501759614338462659328133224125256548315158197557042591938561333525674489952213532650367529262573522323952711406554564576200455972123393942732524171745215577286155604971570830202110
Row 15260301233074107594713572746349224352611253750855565870191835964239571337043088925158918041361317267684350253573367571732111173996228535132129165324252809247844165506406724334207345326315687
Row 16292016723459887407125644785351192410522320311028865935283246455127115221441921973646573624152941148819914954256554768494920515641632584840251993308973480041874646251822445203147924593773
Row 17487425035072086207855541401647151758103148391829381820538237822707506745811077134554337026791448331133755753324325161899744282248647455143593046295572241566128532454359915443774261311844713
Row 1858961366125431419202770568244485757272813262500332927102009463920541380586853431533065377634343415427222453529520831449204604488059972344496736163591389722573436302556355224161540954568564827
Row 1942084466278746033088439446245201209481070794449881631410555612467290930704015797325836936743404175152095675480144838065114586883030251936167828543662196047086437855925646682301642743577
Row 2092728426326434142504044294827451724151148510529982224990324556924524213589214722991958295518813085482369811524911317413975992281446472429113817992109187831073346387165677587515038764854
Row 21104845034710276518382200150325033267167560445558213673470158731824436422755803373411538514713190591425601285867195775830011246089815085564182110733542129251275960307546163596281030881473
Row 2252393139151832232237557246014886526095741025804235825471517251504548845191350712621339150668223026545442233576640424796489620741361092821352769019053527296530202569383914173819532625
Row 23321214022529137627315501202249251983403036129245880141746565561484612583385442540146327949213832333382920601833481244355134491143771541353327403248971627565859351465555931125736146716653492
Row 2428757495697270957242435263525047373036208537541649352122439145101376341264344849133845788174420228110313687215255199757132512581483733504854403432429923214128370532074963162228027103323
Row 2547805778873241735321287599844303143117532581565585144665041843409713762138946689552314349835519757385584118058174139272454218351173159835444589432915295183650514592349450116584549736
Row 2671575726073042446056561983106512933309500414578150313597274112394964636367311513044782257859367262734169661265170813333424272642884225127527524309314908505226893527183883216195685
Row 27300312713005883594657394406581521725668587432745757576449665189114515635613282831192636111165143124441988579321885978509742722993155121911362217825631044485216285084267699622142823209640204316
Row 28162441112549202428219239612996941599874155617755397633180611493831121412165959555030623643204577433661075441125221263187433234557180741365498367748104024197145923650268024023823174822552160
Row 292633385541389552974453858484354585603854480526402655652531336121801409239942183091200836083481516763139069791982481852066655121365741503661432120672370186513632783705566821044845142261
Row 303507391180755612562294415014875136557435076490054775268324122216352613472550744973597359177327543931478552592532678340222205546536412513783177410351000293813415909125151717359620313983539
Row 31503955081306161646032797427145099361024342518355493116462757974103567242751109425042019602957545652591152457037101167573824274598404131684358148158285094263435886593481245923431811440514533191
Row 32121856285399231952853439566621941266836181857123481614100247592437145220391564105919635033955296239053894915449526035383799222021714373708319477123374333170125489232426784244262858212457
Row 33201847361279316434923883487327336994717121779195388859043232596587827792933549956905306505349391947121915286442583674470527341863387946743795367915389843299174100306913185230561820463145
Row 346613119197356271264075580621289314524272071320535262202825129947202524429873514991865387597441461552296735027275885943210827155463236333133333339663025454492214250580933435820501718
Row 3559263030407819983751468519718342255262313555742308324754909287436254527407528461861617287146393569395718921218115128196128467523202490660514671734438050974191873102373811538925999182384
Row 36699181345034926164918652998148845723395286040963639243637952157463047386264722237164773194257805686352933229612997541662649063002101471277337559752391913572959105896352480932505694925
Row 37483447626662745313482441369721329543050201214432259183254120024631019913331624733654089461287154771860325958503945545243855891152514248572991129038805044519752882527432652535553587826303232
Row 381058283633564057391365556828101849190835912136334168534381551693461619632122711325456142583437426184006255916141891522263526147321011853510728612187387920840541795388428075684443653005694
Row 39196724052869148059546851005340511211985210325081311833788471849547198012641247933053323242526023983675116317502514197953181028359033584970501749702534252751272990519432082034547159245254
Row 403244439559815983326894375535034543713221623124166272924992780359548321404780374821083673061412210610885925494622846245602172219601665224755024046454533479485594597448791924978383732902759
Row 41493426373338302235190855442304643085634175472550364903537613625497230954931818167047455424129810462550131653726714384156332887065376188531932513172810433343545422521011801992279859815189
Row 42362810502765315852891228511711463916252014127225985970248353232989173912142866338526422055599533464174558429112990348833564465343229516931451259733495913233516257661225266957955409534321601228
Row 43540233631707414426739138291155238119285453557315075189357077527520664956406934723556556859318842085901231717464010238215746902078557757714993724485120215693184347316312751228469936032161
Row 442398343513491320398474146035219181084111634846563943333381827334161599951744967781225843201184543514625339235847085605338724994370379654794306160451589352291100451512643164405359258943777
Row 4531305114459632415867177946383218343446734042500139015514241252322936223470546495189131354052655562129814636573642423231543269559611354896475245551975871320463164116134326725980590913965865
Row 461360467035119173231552439254981768471814882639394750541972160319321472347572413603524496544012465117136545403363455544986262915094271126911949106432484817595710445961222036974977502333702536
Row 47517524644504836138040731221126748231793216639585839429048193182476243223104110540838554382439418655281861497849585874120436242447331544267515495358528144673011377558214699730427238923956842
Row 48896562553169113238276344724923351832704737114223402565496414728405458258514563382115912423538509393450003847173536183715351145873853787345047495580307921091287541231837216465949414910291666
Row 494392316351932762124550235620226339301781202009462538134516245432953161412130692564221847055959191820871300462248974021126924351816489431875147112555445079522953062536107072154933990576533965715

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.