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 0160427441530163272810753375825850323914591996457356012296124840454770275042556605629579041815850369050277793928137756553811165529673486892180452716703076174154761921436330334347314830165588
Row 1532962922085150464047181673298036161076894898323033285690350035051093276450944552245429242202321202745052960643927181593756655175202139271856161548624694532938254736281859915950144536574416
Row 257409832868335824045263403658351055328554876254203060400643757954433503451592343206318034812478824904144326442101125451200136158922314047840210353942627291378959063022496733297021824460
Row 314781233384016172973106218422644652274504026585048476784340255103426911503323417212333224715792484851318454542821650395926675873481347553301451816921996372551433039199233561925550295997
Row 4478558125916427217492445394821712925842727561052507455530440048413034584819251530580059318601123596246612801419559431781568317045783421241414803148556442597417069651534068329056896000641507
Row 5433716724755904327453440912886481033041537377027212721475949581061419830111654297352735352458394122231706844405273816566824189121072312314243921134494057114826146657333321548839926863621
Row 612813844789434429174277443638761565206122103204480551710102468359311685348122438013630362053532326420917503802616516310752203417059215586353937601853913240940684965568461715091338181611895042
Row 734372041577433031653023427255652805352464136404807571635765303806497725175441639503013293045380728271695126549141944458023051281253580459801251332648741324927458816264723419891568128243612
Row 81277983165057792153445349555826413772209610684790469587017331821121341831348346291055282967399916669514793173039654992156264108495234693163096577103958444852250203212353613370841521397
Row 9564617151965175144001035848135816633014574432752128594345192395916744399355816144850272240600013596712531933309012124824302055435393317822532421359154147017585570159044042191179717765154
Row 10247591838434656413745652234741221448532255363856391594384161157945800412337537581440506221803439585629561308269144334405479925674271500810654347566653323693476310304270524948385383525741803731
Row 11177314933914858476814855617486540021298901292954442330411722153122356051004615510851403288235482593551044553806201331661673461125972711397894668253848659412794336528933600901476239814660
Row 12885446586110635757387653154484168343720538251565552428326073079474156562742449127539363211149223901482320415542062382340365895548456831638433421535449632595720419202913524991234438641319
Row 134665266541923234742614134470759342610564024002496534535839622377346339891587415848226913376299739314841388529535761073444929195214103619345896486349625557559727984595451176797815655233
Row 14963540373818291536122447839243735462144423812685827374520267815592316181222634832287418759002299266655985092038371026364883528247839472364455638570753653941482246814951072503317373197
Row 1519032271241353005329475921963527427447967332614231326180839175521117718832524215543761252328724323266274566649853104434537432611399042616005461296691436355833542474223801006564850025171323
Row 16984559257625076505155644343585153181018704631985379524222294550187282148515827124774388711415320979333940615009239258513421505388919264115585357133603392080530016094202948124136842163
Row 1718528769561876472555435968127657812071762378658655269579115945162453820265626914548624593637953603392135614092254555835413544035832384455851842409375710651907205153361749787124207433191550
Row 1829144465120534170844440972308252333379621706212340852022323522382727540857503654569651425590976442119572274526913841208207336093712177652235694877105254221754344316454132645400325384474410
Row 19543150225276217531025162591579479258492187460719254882762241457302427508481811194722419148151363431120757883392353652717955427588814873513571970733734227337411746937275772869106838214361
Row 20407655613967400337255789491711182108438556891378270740921537755449945651784520817732919401723935817199957211886183440039043913862439637522446213735973668454621744604179923622069566624763173274
Row 217522580543046552820012551821424652681435522660512233436220719882776431425824510318194226864096564468125319844411234943193290163486950801417123133772217543659592800538162114384318183189
Row 2232695492265642601567567275421465304338138929324792405055535676325019943513401872269947102844194256922894813446346522538249746135168373243943711223704548624352639479936734986299330723062417
Row 23489938514179513150118749137975723542316343866382123137729585531146570245396275448482857453301683772553252119645393549954523375512211437252974380159181617493727114279328510552988714667
Row 244483331434113138823152017735690922540294326592156377416804026113358313144144546644355464556275841473397566746777859543019127531941436436504481402770021717113029466332722275161746823347
Row 25221525239513737743475292588720374272320967134451349436522303505173644593558178025913689129339615305589046422786362540371427375615715944115552927915981775495168522231767249945817502508
Row 261929167239781265295115224342216340553992153668540519342080227135244046463358311020654429716225998128424881326170147614012240248355295715495430301323178919892617463958341007274618349418041128
Row 2740454854359154006643609104520823425191107419161215962245458313877643969806378942434917557941354147478409234530101394485914382508306331353135100212211240330277783032935910173449731891595
Row 285442001230213192455950555189114673175335939502691614273425523277953944235417534304217342244914782256744945537701706454433859333778253852331606235449323791395552024581612366154894016
Row 2964813353027331637784086247136762068296115475750525929435395837295563679591311699701886197911549281864147426430701082335350477143924187262624604941456335025784395036753841394082714973579
Row 3053161853400140952165310047846054398203739834154428036663483428049238214274434419723473737154727342909346386857133716339826282960125015222126579251418424099511631994555386924095922172841277
Row 313840124014661502596509845185928365616872929546081878945778633583186306533363091589334755450514115878267150954104241921756081015468510852727506178950722228101956487205667150372273481
Row 323763141531224795422514940217493623563564153223094348599016433839297633131274301770102851685756421143962163431646072906902526647074397310222675422144177210811612203043745180667361071
Row 3377544156642203390322424575407642552735815534981462633349923569527819185933154648721845378558353484495450995698232066736095662334953232364152149501860541227799564410373211819208701781682
Row 34398913991724979527212693104258029763041569333157541758440058161398208458951800592533804439118335241159439320622240337332612560103757551366361438815840209157501600329763123022544217415844865408
Row 35217118607025486560129924149505130441431266033344013200829002096290359565866477643531884530442733525996567014152291379348022495756451658724684154949583203136628315029311912352993177653957212206
Row 362493158341134189256634025142271129675648169925623129259557342730385548796435184487242302831550449155624538180419102130118638742547314584155263798475438781450229630182516303912944575528824192201
Row 372658355831003819167315542696231558371493186130183573146713392591197844564904960286541123429388054440744350312829712408549155564371426631584906253664185167528918435029155819691184818213349
Row 3832642203466418451923384329408255785820368451535132302331782099492846913262266722687222475849332430172070568392149044674347344202173310855572298335055052514270056911532165255787934108847
Row 3949862291794423017877552777208916491866595125704548265650611461567516165426551431411575785206439571040214525253695468484357844974341190588648532638916178522420891953471329513002879772317
Row 404474288533039051422107821623194313138965203499041003456410629043032240816322025211252611903944420915585250212639323972336813431943533725672952378327565374139133625200378749821757168532432282
Row 415091293201439642567426428802852240258311107375028077643608506126848303925234768102158194428803739645373521331232494415448959422913448537041517192520496554898527150995865381841202855545
Row 424022203543311781321734129973010588414984486145441382136332005457570050242764219458743424007245442447753496505951310363366848963534830091400499822063340174442542978460539153041537356274413
Row 4311595093117349624915013409451321811281555604651495400820771688273564315725371359343739054739368262331285227451881334972227247261947795523434953845210491105567023451505538277224049314221
Row 44368026621371928458200722174614124858604671390933295030947157253801042579211331260210785721598159832263984343424865593536431781373136340967821873306419631761175299928721755583110842865983
Row 455584685346528882028782406122099814334068529682130085238311055001822277750032494596197819973993339479921323813526243353331384869527011797479119712785268419589520227792842431210619242040
Row 46329549104654546848585109162520535920495102465326033423485857294582554610112988561278021911992693174118717152846094497166238632582752137141417362427564384111561340264455691357382815195545
Row 47310717304054474052985369491849022129966291646843345561460246834631432229661955583053084363565416821337397043912440134035634897527352174199361648773045419637835445957516924096531634630863342
Row 483730205825185089139556834659362847445533925054302266926524639616394656504884262471452233732382529361369482540805976119325084082335815792317356454905313944643444514025735374547334255021523
Row 49300214042285153314205323599312415517286622313099454823775390336253595075131214524511378831592318567626791967667978464235012577201142587183753024532226933822750371925235432118026711894615

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.