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 015729612644203853942252431855062271479225112642254157123634700292028352460150633363260567157674768403664612311986113355635857352621201503156259762460372558012112177351268847703969427124652132
Row 13013546387982447452957519560946053912636591618701326480452365026521432471035801205419324562151721234252421730062466396414892741350229843492136758012481505224903856411417705168114477734442999
Row 2450443142042165830602252269651874092498124991386563130814882207426405418414430819073593289417845563519148605463362450386828863677188811585466258726794135598277540414369589623744388558121003
Row 327173686426582936991154106028275440125455163714907266126832805707580024284264589051142462032551420613938765935408659395853383791913263046245689308582348025852953537915874501112723211606
Row 457634817596920585172220047827834122541024444030710888373220992007219520332969315752015811792701399884813652479555610141110444377206643591557725197246565473417255738001426279493543945213
Row 55504462934426023844709332190139229626163587136631575367349185221191230502899569944923146306452324704864534126448595856137211525959430361846154350352047812092396638235369151031971847546
Row 6759322621603545183765391328443198146084432351993117413916293154113359642267121846331001214357209216772987513016894251245519894413476441423518482030282942275717034041286246511732451546735853
Row 75936982113729928164712340722333092568242821218598247793485319351156204122422947635376190459402377438432918458595153724744148378918472042311654015772465047532854209628903650530227932484197
Row 819371376471118186397736877343037559139009161363307339132114582708917202728301985155659235924916544226794843875117516218653007117386045603287185076490140705141186444235627318818394974
Row 940061736137552171250338528833245166430182568498251362111317615255820524945144038121326581342456555223450122630904768410349585524386312463010951546230774306121237155525303154024664200319645120
Row 1056423464106316481880258714679423398221152723353304585429544248587836056185321735852295655527342973265436425005060250158145596437460339084072425228839833399133857925147114858541954115361
Row 1137978401161218140719663095710550333685504343517233855505451105178643814310452352235707290422093039967571443112563623729762341556746081071180317958552585294354159153628495439781833
Row 123060167955733316474353434741084224415811397172945802929526147503054458146572565177898240422635275626064733520412785620144548850174751594589029895504266252064179509842153084105477122514251
Row 1310564021984247345813679264631520364709203150708893697356744283441342054778765550307719494561913578465327221736559432831337246416794854319826314537238342691165101029411527140221533990377387
Row 142947300222732213108114262982850547355235862116067459820933773834531425335754174948683185106234675269155445451374328313491425595854572200327558577041504037559629093499356241112889109942255564
Row 15319216141788983223417085528338220447649215268389155349285749383212804415129328764294135128965399416234912191588233528763397598229584099583756595290309934123592022117872343504738196122085353
Row 1646928892971257742415920188054003274580226075917725555724057306048103338315453552712025192633304198495528611408248441835122105303988124742385747479890672428643195119611303358140420562531
Row 17170952054289170020916652421455112893708390620955320531932865153294523834399325021953962422116323032941521886519351155401981820403331011001221569940712472127738834164974187129370055271359
Row 1815992632871147551497054953333233691489017164916515661847581922981165121483116123452322393307219032896256816942255222246313456495539253301355162324211056877164764445556335399237223015958
Row 193338493111189245785533815784771450814323581597947255055334814507648022543665923125641661713343330671664191842939053759421556802747498638641012521939284959573112073498355436292600347821073536
Row 208624089586911543803931327586452973819442829491634451834033373184545734645321895196135052343505339242392500834042531268374357673310335925392429290029774921853999471954103427100429327992824
Row 2116181444375150938624813700156947172596294832655833404212235022425483302558483237184424733974212980550312411125744011958734275172441497424334978127923709849402331571531742905266051912767
Row 2231745055826306850635975219859762851181723905578408147412814443420759436673130232863430971808596451381887291141822855208656694683566533626134128549226253167427516162862243815924399314512964424
Row 232370210352905437362520971732692212431934417696378749133576262441033323487941992463451503540948575307217722971358329853892731275544122708511757482684403217845002407348260010633214595942913131
Row 24263937942875580366724132168335854514083279282634295582615557831804685112349615473884155551481614593028405238191959955333684451574389727954504290625415058031012314837101535177784650194125
Row 253850563920781559151926268243673496838961739555220433301278040771718636188059854870841129409242961611542747361711432536414131144451256412132363187925102788204024011680474754289201329583478
Row 266064890520615237295298967488836741323118822621749426157222666247891231314004894169748597625218575720091011495140118541151687400329205879542238640718052805448363514205216463544944607664
Row 27599024541121559859285983275245271253997276639003374360028683781150856389321315245320419929694499457644928773554161357325594170987103848984486325633285617190018203836163418445098563935245561
Row 2856751293573012385255334345046902766127155234155430517641815213732339139265213406651992706592752861003441020971764256328542269693346019882662544535315894216319562664114729935334584049522749946
Row 294766340417383198469547425706551936312071157444853837933935118151535464760446459536562415795489559352953277447858282487416331832820364197108633683968154156614851425940448183911363743715660
Row 3015273631433132961189290236731665894522752424112277926353915261335935085585396416653540159915443341631426854635923284927833187585726512675679460263417983382314930632101258713453760235124295207
Row 3156922240129132973621782783188232434687242074730241509255725409824404545448730335183528216454533264549977638237333128427129181226417642524942489530544373519430346294739361973126797112
Row 32168157123522551331753609481538152349407137325250952297337948655405490954655587179928972294535331645312362074423224633679128942542980569346383164269758501053241441184381182942982366479148242300
Row 3329051444119518762699551231905354358653709836145702898378336032151804270642323724184235115955352029944609380930551594311855965934447556928593767281732372586212626933767325358242772443210385780
Row 342107505962752335051955176645125462423244894743123658652630335617602230277194711414083407820354280412138389264453598836061423924463211246331871447937164395103212056415704926228026714479
Row 35293828401923234527920092679295253843906178635733640385488649032653246217795405433749512984510953032276173583847611280402256322613429271332271107173624128551629429422364262296550752263082910
Row 3626374197401619474195288738402619102138562946358511833172792446932704810426843042152576534451701531384465216910961282999348319982885503473122351644318638384389541749994036158257832647622154
Row 374730552049808416473686320296845424797443881149607014912425918515402904183423645763458589454475218428550364809387224327802703499046355070243020282751291914424712188751211072573620031945593
Row 383927101928421528373231961879436631074329474220375069472934207439542960276169148773061573128942091392413553543770167537302039527884046254518867844902618280325784011290930924737392050603013
Row 39455312211460597851602018126150642782671441875165291198310703642664595220552495396948527532254105656468018803003224506943192370503610774320229031902156295852254749231346314140702594897
Row 40564181952432843225153552114392376202331935841867567142774102111029165585270721904544102727723719402039635157150322762677398045894242262376509948742269472730233626458737686312553304831543233
Row 41440413007949075436546280456712556131733302499135343483366172129444313724539516317841079593829534942444442225102381765684504446582492256752594259509659628253272031429163389853525306815
Row 42190453705224161082735702103537639234104154318823095858121460250352927261636384420509841250564228423274241141951363526223347645629584645811214274520665847296527225903188518361110111734741678
Row 43362436594315295266759625336225449895234241057121193223827417955303243623514518513504209579977819420337382209324053963306215835335012392745685019174928614755188125212035203732508717525612
Row 4425132670198723144745253381320052750244546258042724583361239630764458459316872235391319315274698243716264096174040439865467407517233412179649635531806288310801487315717724426584534411292178
Row 45428854484873188732954618192243513230159369545825515679560243261833139453340284083481924691531488430182652576228611516184575358543105591334671571263125305412413829212332585751971334426353262142
Row 464537214261742463082179758483947634977305586121988854055104439915034366216818831461571439613712259049034834102259855642325505053314014366743185108939399334765210348251624581011505441551063
Row 472498215823235891257739974170367910013145333028573424462750621883302546231535425322075652277245594642245630744111342227185436902261407220432080508610292908550433851500251747054455330852385073036
Row 4897189623332086513158641770506341563932126954091269413063280822694156534836738865772991113985144581805114958364220424392766121910714586340817504043709297237934842231085299133372848808
Row 49161317123292344138445369202068463896174614445933267448524316267736747151990434761327418714611509311003660549427045503125313083144284815125837565524820933652123127615392621362498232644072

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.