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 0399925152536279224611524979547648422998138730151151302343703392396450824543111337049984443351924241716585829356751424950156516571485435741181637333635944793344980349314842003186248762398370
Row 113295509373932639523774225036854312078393545731027550023025123856434741491192194046271525920211930092922398118845320435032124829208935382780586257873148529318651082386528925824094540444372441
Row 23552562843812178115353004297416122222277441541627325637027157933149257658029618682444137857335335195938264738396267228924464744671176394627645336167504153801708566726352077238134275226
Row 349574007552282545089955757852858438345233253464981232773296527844531241204237891408108231683116748580251933129322944182086123639402910168548383467147016961849599249494988032225379381677
Row 4503421224466442320416333557395114352750108046641167316558995106741584394435413053563953903044458858873847812368039271489271449595431553252158771212033022346122821685462854461583373455203167
Row 516773060219131624503263590323361109715165036220327295084215758832335374459535377654055581924502682526540324154785119920921845141734074294467933106295788402464548232273373390623843256241
Row 612838503778892190435963341458628601373500016442571109234883988449817812667180824102454583230541277594275183244336825423257015323200346134357968022020365621751020530047462111278827336094569
Row 75399241797818532248403231292306445923114748214117341318367249334778110757295580312733841754414626834992575470323286540382630328250164483552930481611183515063921583364656551900131845886782424
Row 84316257555017002011369543822510395238525741481718902371209890585316263953246334615458384404331043859424421462561984429418763934640288640883021539520408735136856276215062953366723584578
Row 9161948212039107752048141805242222601386764134458071517383854464402192624673797396533392933482010144381772376779535053865615238846248192468464240602490124319263131468727334647252521783049
Row 1044504644846241519833778123420842216300658513010335552362625574356981444221143405504470155821430183142694162478794340352752434984437316589662150289130494365589629001375325121354000299318335444
Row 1152041724947390457533775735402245392124815487837394058386121115715482742602606187626252501477540005752909200027452741144319482913390585126667665585687530457975502418235353559204256463274869
Row 1239065879274453023801518453021312427529487651681971823208023616744745312725854322431554933612359024922654323557663522114056442651670202417831994155420972730303376269838525456505845254201
Row 1321844783363246144838256552262427505618795661482154008004465566524694891447266746435655339416723031915524248751494049687133328324319594716698835172409559381050375647594504555322411410243712
Row 1415613691235412161084402642461175355073332415991420165644315738160299620773419455718231949531622725042539238615272513946521726055161301631340714764181414017995779555934554209529650574308
Row 1559155830250147216524449578839244952232631047925774256569651813417599658118231472399149623271377045217261979381657822863731561127874202126312353989518718731554966652891375236020721168356
Row 1618821990182858739525098364354735823562132885604590710185215269352204783928320856644114352351604779413291151382484407854944366681321423910204191882492241150237805845140947975060410140175537
Row 17202912245200142474743604920515912704058164353473551954154872424843452901299265531163147055375303935024435114015183971316827423171331014881530222964727992872290214638382299156027095461994
Row 18199967529191529230516249045344512553384836423308365133844789604871200831895518480634751808952131241062511402146524505195326142415481631304724519742171178814572813509651071965574675067
Row 191581325545853867303921337204244973848623148235381247437761628410482240785078299258665345805496156416000453457075067114296136515003691404218375732253956855793568720375873216058131501264
Row 20634557953413626544458743430440555143429293852212495305221821463552587241875389560372650735395412111052682572922769283515553472175518157902049261041941563391132783253441842964267917362836
Row 2186611242438159119718332002130611014573222818691407378322153582296320055631557219911935610133119762143551449394822124917755687237342121277256944327938751144185110230123258388452278408461231
Row 224704181430166228276036372170227325769913522435067758942562195424632605523233737491083438761434043225987517951671218564955852647131156125406494817821679152327735200587334505094243454031556
Row 2350394634189227885716233035484056651353532355818475328835403140041935014806314079524844663356816844536101777897041923339505342252796476955534428241205387959102326312942425403011355439
Row 2448354275234131929373801300214734817378024425235113245142884337524630564892559058809734685939111998288015444128401498229632288121542815225501512836973831506231393066517455891353351148354409
Row 25240344244289249918914227361719891106516111751201423080140713561361632371264413284201170644671267879405626204390289010297921314531732913205354490851944650685310376920923895176156537495807
Row 26193539311351362098560114032976365640221366546505121581859436754485063191035642565594233566432863159553503219637043309413040964444426619340445668316917003690453522462740692410511071403168
Row 273016495142435759174989190315484943540537442647271418747421157139934520158074103901349626373146235332812501341346844174357396358401932488048293834427377132394170418595244115911091822093
Row 28309598819512093484283143553719159560450603626402134171588386053484672688318289445942150648763735107203414815289412717905276432129992759115113534771309957553749354977295352328362300989
Row 2955245482188359825903947858275532892175653411018354546175338544137648918961853179828531389732182943411254466564122434188123412541702550715028299512419192054446529375599308122751424457
Row 302763203830945604890169852927183854553836792787357180191217408255983768112451062686317835705623277665118972917510746594954541632193843111325104561115130553943183058411513263175332533456
Row 31735402045795841706175634103284532406122251448316888340225834102424536966112805484736657486773506226133074259551376249933533534148334239109722434567562830379110753471167414775357755721
Row 32374938625262596405132743272155755345795815504713404807258068136408181777588253851404185175247936551848395537081623367614572008202405259347513241615300919021429205532412364634392238755452
Row 33569837574836110139425010358015968581535530424815210760448954124812454728861351615894203615901949527718255823198570034289534564869399613973879157529934737311022971217231930575705173118684251
Row 3446162002441245104038145833151826104051315251073340849815942140337838212978337125578756683774240627243478413645911729275259314112624631142171919451967275924573492383258642473377412672851
Row 35159442452224151433258891924738261254024874120211301625179512712886425141246052370337913634826871519546903344296859571944561420241527122533303463532712915403621444116516637695911437654335
Row 3618485259270452276221530975816220344027841773634134443784048405691143512690418112657263255381589240935291328474756262176400523301402462638591499444240794938122542562571256926336196243544
Row 3749703314172523540402050561539311424906425948884532435289386118361519472033345960279822721185105448433753368654624377123044311690295546655729500442803660514631851919403317172353925257741882444
Row 38129615222403409437943587514726361339283320975716406352814051017519311342134724793516665771131992373306341234949125156624527722969433956655634853201189531852981610438058263014539750184147
Row 3954172489293945833145365017815518712590444671963470471147353438304953003993534250058888521798149752311623451046286402657404531295596262727332454407579139574311425759194780296846542218173953
Row 402115504529814022250159463238721045260451227603304164023555930191356004337170335572648596034761427292721293644294381385534935333952489427825546552665456494785516524092088804476420182716
Row 41436335544191920300243785395442913041523207342471603592717392136387963349173424158557030734942473554811030553942443048225426073403673452640450503920483335454439054600104683233931814710971
Row 422097213411291667520671402468611005940293041482194553715502866406219541916198278622691425169186924702522120756501231217817473364330634142570337638151256447637544185262459473721417428131783127
Row 43472837659139975189260418651659512530721308356525030553720255646928959324283154444082037572910311983345052044796523353313523299724345202186284638538441971345651522327270622064652612674335
Row 445193957187936002993160846304976505738343771428931641294128634075813347125319713142224365346645503582671459656195345493048113028092411329424161041226914734874405761203813331047544511464517
Row 45569713425831192049952974705353296850654971231239953782261348031935907121812332176269010722152451214435483498158946932015128635184532065030214136754382510827393353142073311344033553613273939
Row 4675325591153443266623305894480958773391398457054051683460512504888363433912562201524995301536739193450119515569182758903224386437651051233336585860221010492577804531940538417038273018
Row 47509433885032159226894399551027224900146122917271351261251121355376163368840342358975082280676553522196012383045307733143321091922312150714325843540728932133133424347445245559751205408
Row 48328431545430318122365709385617701927391630084972993333854043101526025253608692236830143584450031471826324423911422236417984706551712281886175293657423522286336575291834465038671238175031273762
Row 49535838181302371140146295518322718731909464942363707335437524934523955035870498130252732263835544566128714205803303645463565239323643694476437642323428299141951905639243038962992182283022315684

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.