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 0272719715238491922512298122445101834692257058031128286417913156216609163062807159710803472449378028893142402619331897215331502435562733922172221124881573458055127347826004822218816443468
Row 11435596920284881500921125882803367747746142354326410391493093543412421122495357750173090197720111548963666394689441527455981645563192017422590208436545683345469529052234362644412004642
Row 2741438553823859395848157181939169953483263580212929294969296638632162545429354532740467877013211736281523692417177954304432161446705108878542176338123263361593698341835782307415348205870
Row 3266823661482294039514342671707303340014925308494015613273338950574367427936173311180313984224323930191221408759083389205431823948499339374671447215415456403343235452167340852402703468557832981
Row 41710380516712040662178953394464286538528025964257111225275013876958286202733539346933275131954392952233225846952942318354313306410122485776331617742802408249333370257520715657199527954955
Row 51246505517453831722393117982417130575255681358129917682746732132716132442247521965676399448821516451540043746159037873204226936944166435918191639332650643224474314221048424347313318326135775807
Row 650055009364445931673457051572165560057961546419847455773592612665285847281812026594077271829993764130661886391361152133275686147529222896392259812398677810332532878128632334454395331
Row 728385639463937245406340440831087173748585481343832953096180757164696553314902233244942963264139625142869301017942624531217162841125911323440617266333044628591817771860729227144565168471952304205
Row 81983222755462224396641028815011146030831294980390720302883279187664858201635152903253953182942268435013066401455652694582321132260478988718501422285122823804318497321121080589042126443938
Row 9982143327167563363334250916241992439336484875720312840448425478571143297743503333228653982732565575423982036432240237072841599450131315347324025553746102958691182531429505455142415770
Row 10812265627684026292432375633265628615044297346915657881949209317519283865123954112265441922162308411493573583479412675621595858568156707557902837234181595539961662337950746691755757
Row 112765011494141061695380250991318397831592247262915655316465610063215304929984665289743675968533850645415572227532150164087491823344455244706277256903258502243862358850864029520231883673900
Row 1247961010296642862345237938364403019110648872248599432855665315542315264277237333501458502078552941159254038092927235321694963443317102952141314171503337539879514417199710451511471038122514216
Row 131552537829995916282229363084879386626423472529244211179322154087093193576911743157327849859951143339932672263558195524495325945390059555198113527764843432465941381730488417853821316646805732
Row 145404659544038181197456645423912408914773565341324026514677421255474297494547773891101611547436711971993149054132180207920583339475735192756435748521560561414681367310631313129216036264581495
Row 15991487532123933164345712382625102353553248393910014003069276465759593125743083154857103887337154012016373329593146176832404338496142694631274656627973750121132703160227312842156642552846
Row 16104487366643081174290126365014101910065561416627322996236454184443140129415415843365739894099468613072677391180948522713186047148775278348624191301425333122380993559624052588436544384531
Row 17338724502117561954714839469944437193646565333785035365131375011421726331147465032802283284105441542690364203022054540429030681654200737361261979483171141331973171921442844591228802045362
Row 18116846272488422270290656526954735053521654116631223182730221570357374242004618121062151541601674280218218265127542313313329927556073868479932423907517637241673103615422749219630793570
Row 19187410273562235253522053575371044505445294073309074452591773562529281244298868643613032305634234995211638553453325516426313822581029402965257940803814321917792745477023551442593202056754576
Row 20289824105894464635544597273552172984519652128192151825215233354040519356264662540917171861103423227545211893884164658944375515243603725164535215478372921364712745824230756561457339551332355
Row 21554144732144118284100301832305024578711327463022172315272060336751634204121453531263745654353585224565294555251044010225236947481071181343082912538350317904095469144831109587161913034151
Row 2248995110336744865603456726582470413849133387569849621706276529398569503076297054463921095237520843074019383729664726178814714424384431385524252725954031540935954652284817883737701547317481099
Row 2354867673378393840376714691546549627352296554196317697626371636289053553911188518040355651601731450971445201790545816516833739136526440025895265203128447514058269238221804349214732126
Row 2486259785110312626542755535439564267252293463160658385870326543673808314329713151274579742493673356465052546571265380347112222298922713679463750623907258231141999551540623472994216233183
Row 2547143137005373509645904199663253319459733730507455674059484827733446683256173486942683322243320871497582137121420372118735263588910851539426529292515408151274441158814514903133327121016608
Row 26333238243212297439616504061468542937773865665197550314605527546061089377927604017479723414195141241088434919635504504858176864379321939862307155427093623180134624692284975025543987474
Row 275352514443045886075710539730391659515736873964789573843392066251549805818439810584838241521918817503451759104812835563297734295742220526322944985565350343548890440024114404285999748931514
Row 28120823539657282299683624491948161546405044490815285513546916702774360892539436094680216749163470138641223053544164540535143102403721502328481218225220539244334828408847799048737232700
Row 295847561438332539829333654412187252891986318959131350236969191131793749594361310422798489354656583081383035365455216026732941222484420453250224524475002510121703098246636452744261121263493
Row 3056887113029289234634159513658043996118358841900475357044182428218922865581133268119319744195411039983379337347177354979705536339112134208117064061257011431763384978377826742509433030135715
Row 3125582612219532151376139615843956380237215747535464873302873544144618479149394707631279537072334459525011645505532049577054791825736437427714922567931993987171231235693195374072940113576
Row 327691995307372330571030335520553116575139171251173260341926374131159735971090504112454497198783892345862224349651570439277117148425341275107460665459844774289714463142380248362482211
Row 335902302119685705391936647225653344248373983148746322380340029361196591233282613237362543831308359164739594849205795056255062332173567864188329841113922204145851093386236421203101533032849
Row 3415461165608149858991935343676532383188431355243208506746304645383721541531442838115450216210462357313300319971894181349753266329567123932581762209842025713109541145550407417821285419523163085
Row 355092281719564199238029421649513733502126271654501701979478610395692704904523053622949219518683633299420570914425638320177520735839484153615573292204847792155452137921271623452270812582752
Row 36590429951509215995330733898444957878304464287919294065459830521573464458161538392649791088450340419593682264248093392197949178245684924334858742803773260614774630562640122925344549095038
Row 375114908347368419103769392154454213125639333161554049076862120504880634151146540312635321443637724842580627551622583503954511254723200601188224884466497178754341139177337625747431742443
Row 3865283428204730544930641540421215394130462238734624376749936722003357534481543249042353752463303316921343424953113153411044671942386245453744013603399318832943929474842648065149122538555857
Row 391106580542194854442380120310393930400928791093511454228032255442647515448142245505120518527221071594183696289272667561059122334454550118540217894363262330083289155940411937450140475772
Row 4022171593535746631525479501793255292306233128754240414455503191283350091502551231512488353633545732454345321479178416537761739595837725030447553181806325654086785820353627363644251509755613695
Row 41272051471708241862122965535527547559805886208843824575672603575549546047592038769548056113433267732757762946308140572514229300320714117294648225547262138094869248945084993494611132361154
Row 42388330253454395168060745555556420612753009600040554938474375455102904155473755892170599234026802355701292218424636648574639567033515183104645853324111891818019253702821509053105352255
Row 43550140312712492791194118401594362626192502223632292482428382415047833661556950773112888320017565520216250484654478318420311043309457572310203992551052863165355495418354058171922250621225637
Row 441795753374459014451240336102580366833402360270355281216351802186449175610970587110162744480539705763662430517281462247881458543758073037317739102678555234013623204513955926243925153508930
Row 459229026171494365755136232512899143192905245489468831074204245744222453273034954250491745441446259454183587491388814595119567440975114593558173837376855072241387634302898524963057043099
Row 4625054721402569729284542230938659635443444540042826412237271828931922505220244864410811335772561532827505856228776748038294407520024281623182480982364151565581594815631886383712866773416
Row 47463652045301384720583705924540929221498452419062337401740932157457422082981152444322453773226517854337471027982943152431601381248723975178227523291160563547420358935377558315035715241210402196
Row 483445828460047411598288347455623637132459714956426933672338450529842214176430159922234931921388452043202051166370254135691506323170391418372839380939194351397037312645468444422311242
Row 49286631867605387449647441004513723422032395513752580132093328491834113933585399175673454091983206039885377373736983307291946544172181219572392248740774543416610145046133957441206591324732165246

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.