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 0570065957244699250317923931186204135954602857164481502149542297396727625691205744052741233926064927265854789601888571518015372183749273981065340854733167234643938152070137257175065135187
Row 1592349244021411472935635093535138622972573323757851968172931851117249914082849247158121778276742195746132622315495219541840427439357693587483316301440383446611867764490333564328507417005919
Row 2497859592593138464723395657429328744594921242381613213313546111844417443549821162396328019654703738535449801594514238904320122479548954416176218732869207035831488590025463496582155528604095
Row 345640572807445928572130535036378495939673705805221458112416442615364295572519325456433121185685361649935421584598737883539214259583464568210014072146305617992866451064609504227569074044
Row 4127159042214543443355514117126451455016559476945494095323043384790171027595976278348752740341530055526255153425079562638204776317743454951548476172132483711918302862351397322965972735284
Row 556923653331011892238542549732165409930291992443433952832221325147324627161854615617347652595591428079111551120441547915658204433003455303825804573333152143032566629177373355123836401539111157
Row 64257424632705671289912378142231875517834945808485712345005171444903538544949018243383147541346223185273530971040225310113241457012281664578835903060762346374710384859437858434917571218564601
Row 72800177754335411594429912618673608437041828321043461122218793968417353910063699677513334185705264049953589246936565763621585955944712452245482921102305550664995167725852898985517919625141
Row 825479212083336250182156220620773525113333144376350039204454149320638765813472133045485609249373925752574441539321654377178445554345541401840578403358433337375735341785180473454612278619
Row 916991752973652570215442440845928386558324609121114371183545163857313239589541901841560011232195075162032322329317151082956723812108599514693741227010531720260716714099511966251422651058
Row 105005239449695957360216844636188940861443140937074421243937180044184925839421057973129511542315509414128434916471694222271165455516423587536356693988206632724834456389411935666499954733959
Row 1131544399523513351140530042482665528421312166605435439972829374477499222865944205242881642554642948622158202219854760323522573910890384452820371496460033774442382269239430024216186237633723
Row 125651404667344116695003258241116012143830454635831801181672033025134483631363711209944855684742536854234457335819535686247714194222360548312602993136121795087584718964021018594506152221025
Row 13310242814304339047694131581833941918231637432522242103624167211733341112739472355598412029471619186626935778595425513287175344911266014628403884216744915223292658599544029367425983291
Row 144611396745665013424505329812409747380332793167453878332863579746252293628424773338335922469634123951302228816247261977175411791568314322654401430233111070276746779825545767327240055932
Row 15918499539549522720573642351587416318814320406319283767240416164624639212642681595406541441906492947936683550160432334389596817544631221817354158318621671978395231853139334916353215349775396
Row 163267365515241032569320872999567936841501650408535951567409512594781363345427212201591187445951367147146294586298840995401200732151625104712527616424774355424901968484317625981158247515755017
Row 171556366137864293142151665880243744065037447019611559239336842531473653358905736435811674552436624344037159413045971135114115246438125350602670228614993599193243342989295012204454488499541581360
Row 184895356112761617361319926555911264746392564862614023716285899411061338317324273975599029963101556049422536236933833890606489057162035251051695730324350541328584816042851925080430032262242
Row 1928372559140058761487243320813490614419436401427529944341782326711044044416521165380170919622274998202711607481319189930365062210758912537466499810114362244138834411353041822047563461549412439
Row 2014114047328626862029110926783984518135135372625496723572924162134072167193051781231239245924082226488842218427647652682388356326271051216224018723374533954415366136797734865714183814512894
Row 21482220903634309117564664900207610793538434256612530742115240325664187138143279225525311534725501135113622248231448120144394490042881140977500522505833495235572156136935023439421126875029547
Row 2240193257484142435871551223981939500329458354420495926565985365340119437610543928392624548712435300843571568410825761136419072052395658295555594643242026232238102649388033062262257611783201
Row 23240925762940521931282380354848866757611613843405420324785176311305656995553858689275693505221944979393822545631654332435432223343439928051649166415505266348251251480274447134225490934014447
Row 244931145162434756962435354373143584319202942105714195155363152254072456293137518828262657172721335535124212277107054925211082227145295063565114225744301046735323284684354121164614612209
Row 25296932945000146154734439541043076285786592647904676132299325982655250438582895862431177334885221349310544722263932921802144926785261425799348281964376944591826635754595975224345141235162
Row 2610625392405465715842351341746923044181018572377586150562819496642427189778145108457345693218128183144090855014699222218939141728507953063056389945355416441182403720343344996159521013312
Row 2740058242143574844286832850512437317396458004586269242941805117468830282945913332747255883142267348425950186748652392511533553788342734442862209844454725495474954125851253017635474020
Row 284015574947042645379115118133481887545445921641433743762482353140755887426266084133291392545058553367441140627182864201328051692125914335872336027796421795563423104801218519802277232726681439
Row 294121166147118541301454450504052544039334129266116631934374339234582124812793493245269618015334780305311267425486424630421931235835196443731348330662556253070728445210345004564483816341913
Row 3022731759148704544149144253595558196355942190136828862038326543757663830578728964783453338001190199231404737459935292900482150256473891552058429281771195637725143331448575661439138731391769
Row 31407445285642384046311279402552881939148242022389970106413305022447117162412553815191010345663164218282378860495552958967844194523015915757372813048545253403833114968175416762398459854602630
Row 32174020682156101519772178141258371749113636735614855004716190037955912571553011508731106282612462366531123513172561449733625520730204959148337837704793814207753051143214448675989101855893690
Row 335393543937932425107980335324979274020474634339540041192427734473349258261969649304004688023382435818943809652164539344372179413399553177447854082577905468437463707188747485358302559183573
Row 344957301711602449199696434534802156446263915512120465443374812632847591444234482560181556213424724469927052373717417714361910246642584077479521835444887169051991482339251464462528057852616
Row 35550728213572402223664655534554054005334756013702813367124004969302945314011527248534423593510031197351574610191774206927630243214370530073213482252148344610462098230028545162182827440445399
Row 36437173324322029123796143656772946313209277942061642546131523461376246313073372102049625124101336084244337730764588226361516261268195721981927140155191449545058735231349559691855411012463544
Row 37515110871307447634954473217563012623671526726744807517548037212614993357410067631893420928193081822158120013905478390124421082533350917983575584626292140361237173349364587327548745042
Row 3836493185421645035375164342221245894172640529694820728404558694033540859513006510454481095141315353991036384636420125729200927525070556524563240524623112200153127621617475124279823892261410
Row 3986733199957712365173535715572153499924085340460122414471481059242171538522532844550733841193774494152651513073478913051081691871220454020081998245840182644773585550111344791415810571614
Row 40547219413915562299335581755356743992720474617954831983246259811847137212617194112179434127752651493271223892081548947942053589437022511919462173412932728500855584623318114331228795096407
Row 4147561418957757110136722742314435033405191651462276170927753369467921348831703806188160239828993417156347601810289632266782757418923664073190658533772395344104995414428056525491289140972200
Row 4234923510463261562443571973610251587605247110415962766180528255134317025995097406930062065498344932542535090227863235314239282928963395241253775097399742863164422158702370152931468295920
Row 434418382038892531932461951532519852632231215851940289619832546336534314247824811200952194504189950235689397223035865325846662626662408443582623575647922462472446444106333545701634241552544777
Row 441483169651778595443544811789452930191216564995211338983992474306855805324496126142551960563548335025423138357407990041394115376621957801743374442194872864201320421012674428418855243215
Row 453556411058734722180398050331339501934275499507925832032453975542393282871738496933941272828281121056321952225320384357421157593437181280196512452217423150464550835421338522334258326963483
Row 46412262634205923856126233379495837259437861708194225828105185649536741634436131540683672323656132790179742162408510854921245715042931107890753421508427523075536564246122022501534821434529
Row 4764744833261389749942711594354218844293494847132067420551163125530679523530611141384643332751203722587039564758697413199058782170306947082068120719453991442431474674346515684981513825571019
Row 485891516131531938133643003321299468223332649693117913223941964382228558051428343831092503325248443491213344227841160146524537104552485657345980120235744196178945593700469545184567557752221465
Row 49437422595660166411261737400648993751457852351899213330443055367623651421150925883087542374448306691193431284030693311362622519063392644287433276763247407336429161021263025414421365629281451

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.