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 02302193492751555998555125375899965239742052509593930534125381275243205640911749545430492110410418541806350640742353564145114491829111746484273260346972342594749225383341375185356943921469
Row 136262107280477759604615303991149538120361022496414051292461178230911851189333392727185811392974489443916815244434214948365592198321205227356022249994727441863172019544555474754991713
Row 2172227244715321247771398260157443848194116734660415554296428744935380520311422180837161081239373324131371169147122686003067517830982436376528604999453014242398191912932404753213011250021
Row 380445563012150030845876596017401736579728854999340011682712252929902623518237652079573647552049505034728515419510739004184468816623825049571238625074395050882284975355616181805559310056465256
Row 44652425713164539178578440752265398340689553533407725782439424844721711580052517964481577841934928208731374084484425914869465720989444454482437821855187656602801104920132656674251690363285
Row 519455110247135525162515674231073547379556874419340811022320957101234422722730243558564830426442354796529946211260381419901179191210571302601275556351724107468136471238539153294634233535641342
Row 61974511128658841291346101931305622192151463467412958666429781796512580572851953470306293914263334648406940144765589016731124950186237154866588328181581135344482434232615641534273031522167
Row 74939345437357152232313121921865081633166364215073539461915942657464843913014221292227232497121344943373179127294906379737113187045953964560604008328142505398105426511147394756075851
Row 8191559229132028593344545782243730903100188084944244574224457663164505955581429409444908911972504035595253812383240633962311126655874377290482251461430124445425718460232418744419210844821071
Row 9464352540584323313945836075675330231062674375524549204579140157463485101045955500468266223664360188591560345625581743106515912364500710272649202034502413153125397227863074623263056113101
Row 1039095205626138148574355382641182471672832162859143343302938024905776432541733933382910614102259736184133084603489056201173292025839392448169455816032374323616859801692301656205560259150
Row 1148247053635639548542753054140626014868592746085412113490025474839169654234014095665391502019851509287159005265050446510662420211999353474849604666220316991771387042374932348502013842152
Row 12227335715428287522747051005526819062246506288758772952122193210285589274383622302755102487230027016241666525138164030166654565270530830785021139311044595571269945912325483026903474731361
Row 134022272344935499334184817453423842136147732231372508824404048504230934364062418334267685610158938581576559941891505243930532241958543000503927022381524649901181340451934236145312949354584
Row 14414058103442335458005592976540233864833490538125616597643415615864239214611655498260632730732758415558923315956366654493857311233844514080229320099044142801212843104790378053212983095802
Row 1522522558742532431295697155729362975274510342711423237912477149716735755128541882194515911644150493048335157132031882612476839756912693259300822721796515433519815676511162821413704548921513408
Row 165618378155635036332230816286861426268675421513022426856963862934554343341034522438164778237445115738820284623245263562013671865217149546647865531135621093799518223061066428194727886975534
Row 17586724845011789269919813346527434361936550748331685548638271634314788243031947863214106358141681641209445104220484154694682225228032851638186012028058431061216015831433352732775492196
Row 183238226719115377550457571723503138443135439185438182158559341285082356224824006167971041681253213221240016111176120411924280178811002989440225231698511711162412276111441453236300128726371925
Row 192311723157973573328054931480745843969315343403755369916345467442324339263656391440315494494934051416289462631494552114325204064238940842727113710393627348917395879314955675832479832331786194
Row 20816209210759154395148195032341880336549702956193999734983194103833453173112734915533443525243132473180547772125661905548716051711975714575341533254492723542295515321951834445398925042097
Row 211050161611484890480027491275344428663609135413813321973113459145148516345713614578121611937540845921475493926125195150512441356580153274136642852271825533690128727093276599044111752345242071574
Row 221664967584144623386524930622342128410547733605317527414311123423516382302321713781151177048364549204524974556137953453652593334165654304413652566322238263253391505716013895477457704969599
Row 2344772112960599414405053542544551327171129641714246681972411820133274595225325453560343133402776199441314031217346132349034062572461912361897303743201352244613493461384558533063198036091255
Row 243415673492542539835704519182650835364393356364994554922240815455951591409033201960336338655521570772253755134321243442673574350536952131605270506028062613210982333739685639215456855927
Row 25478311772824141310015074424734544622353751773833297359744075393084913173277434301207124371940389530094065179638430471842485498114031873399547517455766377358555448396124787479561059561
Row 26858106462823265577429846301848387825382176842397739564991526411554082501346514331219813434501599236002235422840911485367337225364239244735850203652055720112526902525511458632435070408341263450
Row 272912548510265720721651213430506423051255383246839177913817653480212532998363557182377473414185255257258692332255338051023816145932281109112718692363338443238965366552322161569553617352468
Row 2833945588536519417794774176360815737711264422249242700342910825448529152934442282643865276266337528401641170127637695266540331633574753507238831206557248183772602165630608641709535633122618
Row 29544329961718482448422553990445120064407365524209841965807398724783813846225022115794161757892104337413811717372415614978532750491214315921384797499223903938482934892518217149991281733960588
Row 3046283175206829272251465267232914769418534562603528848301443533724594718818587819825165571149210869545651135015425127366349752136443837263634514431195332855121877402829883068237746551732175
Row 3122434002473559064938108523864255451914123860160929584790866504532192518443951245885466550372173193123675702734585842233404206239361241132345252630490517452938297754961139189729791559102931893842
Row 326704614560190546294411459277030545536163738885531448980435822755594566287842643448542958723832268521544581197061755394443842264265124947031217581048784978747340112232652671482430811919
Row 335629703498818411871620304276228036782725164370623062076152544243494626529430901386270859764089795155238354945541442829782186172457953263248454863261490637971392123324404934291712922756
Row 3432444982516407912781777373914985450419650746622818282853555138413314498928945068250231791457526022752166111736324239102710407128895740378880352913297197340604805231038865618387755348154056
Row 355992418633983103596948074986912534343362359217675547401521762953480326993947517456994702205113482350304929523717001035433940412237545214947132538539919292303368543619694153397040585654855
Row 3610575997162448225836286031784030454456940827075556487714644017373047511142864654345356318182712725639925438231726371965562929234540637221174488249644813688196241761052903277355621027
Row 37389524733881364657323941444185189725102284168212193603397426023731377156762348877209116162937512727478861012524868442622507367859809281311893064167618771499456919885646275779262344951084
Row 3846165045569568659032415750362023823851310273225682100113516122777944365718272947147455823669526842966962771155876734552754930436868236924675610322022843558246130814110616631549738953691
Row 391033227389245915594615872278024254716597113284567265521733275212915243485680337130194172332021595978133258435462210278553262875435229131936453281507584516794445433543361599401501665407
Row 4019445642344887968454391175225738594105628568948043965390545204659519679643941108140357111131916230024542804508441372822560041383844522358434984102460657371078217519464383543155836932955537
Row 41159526934550974425256562318633213220434554761182450810721704210753642691343403124934072269429230615084741916361456413427272137575122375183521533809467115223695338264358194906167418611733
Row 423871317513181507289742253602282317185478251321281590525540552300358814915970152426245252178205415161514412280181453233458569054712607386387281535683549325251104198512118294743702388043734321
Row 43474073385416851189502435981953408825913955785380518922700364131547932482232128581477547344821112327103651812551211958775709400247919311872277321707751238191500539114673082152171045184343
Row 444610981285117046026943337174482744643324147334594561681300110023723275929012791302924293590477134042302504856525074679242238124944374503938575035478840315610252922881761450371976984620
Row 45356969500318474905100187915292760845441542254812280422320836105057472443557424732241812757295368163678213372062445827459293713589215959005988831292074359243002108154785134494953464068
Row 4624349363342652195155122920305943855757320933613481529466939364029539851951247358825639851480259054151131320320191581449146349122920263143572647950239292547664590246312393277570625047983456
Row 473984551053350355005267757174854568316516973375151785657599693411254429301571160266349175030349041285742953218658661888372769220426922781366649585261160820355835621262734692328543652785147
Row 481812428586130603854430642555272022478914014257300352414878563619875141887385759692491679279122211831571733145756285132224365488412246323205262475348465945755554302582560252801021034377
Row 492914380924372781561730642243288352585076950461300853633150148239545246826625812429022935532569646074546442256338127533309351130961000115641701152413930223334289494944405539564324061551156

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.