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 037921472350841653065214524892131176127741857108022113678392273549142570431980557933778327413402264307116123411399336432571247369232094436194280599171648271874109620145033381449763403124
Row 124938649083151315301346687115009366536711576872592747711803480551611844443510332972039521251732918176319731593283109440131374625710201720651944269274010654697507512874510478334861541749
Row 220954206123454721724266311024314979109834285331429754272090457722995834129130693324469406628695057817444312284011746551209417133467586959354514368444126755147409514544017360500735322516529
Row 331428412434581339215565579823721034434951213086238430964512358835454774723551204143598273792123021171126127474443981803346268233582558464963132620554691319557523640102258882074585324221316
Row 455024485106622272661271756794614927995369294957095102423657219722960182156637422104303398106258404379984179233091595358334633045200925975916483516563264354429846823832534335020653882221
Row 52249269585417861059352499748405671636352543477713139466218595751454017351610543810551728401922603981417820713576224448952513504545891264227747702874394637245034234367554792367517855235733236
Row 6163551552991354856365327552450853570328031840505975425175257194868749365933162332369157472005430824342328235531161023291057032375459014602738474714492685234817062438588749652049201980810605309
Row 74736227344052855546815513832961306126213727161128715358103341265524913796566535574362151111992423457452718262708668322947111841496245235872433724754353113328251707508799312502768452724942038
Row 839431087294829975995142365050313657384240604511328475348025605305552142221223991488540893298245343274313160112925077386333541220402810311197301453494142561112956063798571755041317584637705560
Row 9127936871749195595381555175034029144841271310224432629187413264964189621761072412658772008438256092963900367243191237845880160220281852696582615861819441740923723529935101300202938221259
Row 1012125962128937804898493751732990225733123216193287328774129408444259654628529249768202595389659202342191028212343806594313374365116629455132167359234570417179147072406458612265407454112234402
Row 114838553358253347136651789243913425572433692230151451663146491742993660490642818012176587942201530499442332600832507111685079591238923384524521163256822520198110815735199159522060155853532368
Row 1224725525122205617525139430188936887455303245316470923665595571559741385662274245483357156219833706315440862303410197277932001886146292943664231297560736521415374529981497323816292231286
Row 131125577144273704889471187457173384553569833122662450433283868324460349823418553737412278586538715170222737701401442836612248158758434247121234732130559018363349412581123659435054550832392799
Row 144397155154224193204150765627589858372833162116171940392557431876431729063124995877523446633945533023981183306253883165377168562438861189277243025074578554152322137634334621301772521122303912
Row 1516224963107028292273527143581004560749497891099545876183316534732125253183527954751501289142501380304535541875195613254553295885525454265627342455573931563953327434083521265556731827
Row 163081383825421411319037051674187946762819193028916272912591256334006269121142194489740615225119037095944319593910014162499583025725361561037365800322924276585076779560129263980492828782159
Row 1749031333080114586320522702287208028063258144989495755622792431110858659864595170538185997146540933424970349852238007672907767356810812426126148004808228416171505435625276574717954480
Row 183856213818484778381246010843078567549242812386031851898373658185230501119978819824246251334372320136312073923332038603314219030161206481942435014882220321085132784130251994025289616094319
Row 19159613445091277711404897250827983547409559282551228720325074931513658331568332375443541569270384123183912197248887815420192874351464317061605169745884408596141745663103744926216243095028
Row 2047822414567658292783344721964058517610043013909324952393178282729384687514038618062758491854111072181634665094222031261131484107362141793714354648514470561753553408325820343886585264154751066
Row 21113443421455927565559471988409955422027251333833741439220942124374223285829292943586610984607127022474069470256919523977112991318405860294140107234063306362522944815546957751791495014684543
Row 22227715812666226846325952582988147475205978291350503944165925444841275448663178600049434810117947149316764159209538756010351944232656371414593945423540532343401077138322533562647108794725
Row 23802490522953823251348327664550411236504146373849865609423256058702288312355103783775268652671595650336755751112537714164926370247467549012184177110743482296528240229254957252466544975435
Row 2440261137143820764064436712191750247619244811421939641749174118504503384251613225548499511204887413389113253452148717588417805576164147721753424546962775519493433253768103554834610172957002877
Row 253635901511637152940330551567312851172933088433715841290519611730551927454183517235535339459716703550960312159571890522847018642117568020867415090832566959712131355555346914291406555272506
Row 2652022241447536112587461434972165277541823983954262527729384377208338872178158133881317366554353409590228703538441719323205912439022632459432062540435348348437122073407240216454865259649875542
Row 2748632632574942676257931298563385519142602689171857091924269111002462948065976521615877974361330655221497552518281086182052547414430583238215470546272046924884281522346352717492611393811
Row 285503129918731034411410431303165043763251253249902871562734812907113228071041960274425928743802741586623923911187234062939475322691559156658112870457752354447226711325717153126264604209050245528
Row 293206457196329742033202575151311864183233994552634458332941495297957096104201147246873291196487626182265323958752335829653862585947169744847774548322517765496275448499004813281746422948
Row 302734382735685534157751761075364650861753378731792848493116544076586241594352428130471294498242864630246834463405696172650554633260925748103246587939474245791919168958791829522616454955623
Row 31523144898213227686240310183121115331931470596516464551474415551040661209512041042371521874501254561810462855702566545014333333318146917765535380339242869655159647195456462677420640423874
Row 3213964942503721283561154954274303449258634125537163688024553052582453545906236644425338600050542512414240252025494101244823290580790442003254503652081331249015358175350166267335824064583
Row 334534230734532608522857705861388156485379554983042363491142453444004762421841075103638397127357742703580742701935542857739835010187520463659243853355418270342122410717695696137738705265766
Row 3424763175837288737632557494151455410186832951960312253494443531444951577355934062571384319885582250264258312262022587231089175989116132912800526055714902169436472269349918992789574944275107
Row 35434445184034698511870114595944358502732102572112214011333220552813733600403650265748065337238069923643870351938441768168584058652623358240582112655131029454826214615801056672104246091172
Row 36296048681059305643357650594360333922112519180750883824496842721471166029532283434167229464485507846342432561642915103154823152291384331075785192154249354717592744227236954703530458952983934
Row 37518215754620627451319113044499188976414561386478156265549579133993437103643983361359223423888433811665975849325732621763974558152995471429426104031143335445569558125988514253234131339784579
Row 38603335411404865312266844474719383916343566553647752671473097413555773306523845264427219613744753011335940383393132057373738535355047303249415657704754175726055521798446113084586420850704356
Row 39125974926181425565701000307918745719371657663060219031746791370387236681326303256462865387136634812747391068171619222270845288479743043050478220952024414358604796675526100788921131492
Row 40209429882431285107748620853510122058585038350738025078414212202488460924827405516321655352251286364735115280152973938514374153586634946493747318918792323379040113632379942855198226856602377
Row 412487425015505414327146434582412099747193421734547118143303192751432411798232815984674513330082352225685449061321332680442552620845720562472051392670393223251568553618099405040525750255999
Row 42178624152266160375053984002328015863824271847523425310557352314240221884742329529236623354534659954294846492250504193261662714515184518185760185552941629334878454739631238318231054321215
Row 4339846895195510217704604328724311275197737782233237442822843627355259663614343627122858277837131722451140315102370373848125355282818481696178856772369114345698814462048278513403682135721372478
Row 445212383640054755220911939762903844303227203858428240232202127379051323901462101952025647360538033541192331944216147241784718392010844628550544023526459819023850475361955485336269321575382
Row 45501837844548525189142581729692582108512015485343289527255405756621140929982746545236232594718441536864252309046254182375339403382193337672109359958293015237540655940287727425255119024892177
Row 4656225662331133594048164426831341050462653764382343475873714724001191176535671188568155191421417212543977487240345644203597949911739169046651824437413710193175119545954646157290930033496329
Row 4758142923420571653722931393944305402577052955856464839663655446521362030399899256925525442910633955374356531763195411722374231581437955732528658925225202541138472704592346315092201458297663667
Row 484482340485958141373108354984832577033685725385819441628218216241719264164394943543573039947380056904569484253542458530829831722387649265117164244753151554114943565751459126435646275067894
Row 491541416845531040114418136344456303623825762230017763644763162015426885396549548311888434751353395230358422993004436020311632245680749462351352253551826306335671526375773384165810973525

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.