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 04360343039522350595443671853964408924633081471846745201131031325153523051533004732935160497939386354265641541517734724377552022675124515510411977119513044393199384731132399515724515524386
Row 153984556511833347154096427153504521391147642942634253954965308266346513484639476954773077196733241904366248043559188655832447359831643188407944342538260023441302289349783840238842855021039
Row 2463251405807410922171774143224071393911284156477626734529475828361717283712704254543636145556232825913395471687538975755550730365561361652531334504716591473295845001529173311725849140081774
Row 33327527728276228915583509054822978380635787435605864391031213479316244542525482159275483332014551215449115131706249932875032177633141794466628978834147587446894504748224843674657536818451819
Row 4382243706393749385239595204506724507167724948400258047231316159753894212248035364086116920394834341640534902784225053086066205947435544723905355835383554274431053022276411325359157105413
Row 51803219029485889335849874722774539222113558164115194163226014662518731537175426957254349257850276246915051421440044641725891411590559463974626720578983742771429235524403689382049574420
Row 63191503226892915338052661941400359579922217356545522332945866213828911262763361010511600188624793954432616817743282458749652313127618795693541382036964984811591385442662145379851314283689
Row 739350464299144364518539214599451040893731792267653374104395112153797449250351492498938451404584221103549364012411831432816338762627307515212811995119132150844913112175958271216570910425012
Row 8420076503318839211907302931545666912711287499629032162162359773682443397238015753554291286418144118407915225159309157215235359429093156550059383187495660644572425602136024031224133785
Row 95657230938865410236321762273417629435256985453344354194688103623271843536226450295491287034865732247148452134369518222193351249010427604852228050333028257453852726202628272144713386244702555
Row 10439773415843887360350693618743914575237684095197111185842075387854364355291124649282295518929545122133336662984580222113805361805526741388742885421147872637197928824608309734666839742901
Row 1150373884536559651794554291853015886583228456888043664223260829304360348158152571226824514549515010591645261517412619551677750348807426823433365959823319424222653006504659283228165328581588
Row 12513426724159140251232707551181435231661922971268126981473156134402154499410982135231253404399531743854327254538118441335171385522915732978499811243159335042895080432096917785792252952171946
Row 1315223144080383456532479315140388055695407519893827324658441183818282151154941597924643229505878341988355757265125202248365599811830783231405538832926212958717535374571487031922534
Row 14598421322513244753611570323035582405380442842456323532282092261328383999384489218817693021175215212395146523915586399923741718512482110782082205046364486585429209421763451376110984063599
Row 15509619071490977267545102729419690541945864902193296022072704178132854785383119203271368448404212386022901972495735325704053226040605029493425701758313034745951371639642143676170484624563454
Row 163630286537490039704214511218295031083786856365348383115171338672049428356245179175755742894572017173570588956225334341923112717509242809304203109143352868942289293957315404465235971453
Row 1729343221631469027953525440945111094429850731119164132641429435723565708528755858167195844709300727824402411143440373863436712574493305640522018146525623111576216354229140248995657575912545365
Row 18504518125181576416555889277144373295181587043653043423756221535129336743552275723666325191870489239217684549367920213913272338333093248654882982525639243310443737941675147920311297301433234970
Row 1956680520612292598107512051918424668419738632580920169556733406118226542662510659641098290016392577493029365590225319051562333111113844931218515035449402717036451889275045653584242219704766
Row 2050764632387150395730771677230657013613189519535517205142866283434321628124936266483851053092727185548733114276843507633515475294723905204371730671509341867934045371196545436568232887871
Row 2136341823353444729283843119827822715150810573558584440830323530797223512473863374446644541114740344736601169055583487256031915309941662237393628603018651436840744208495124811239248032773474
Row 22372711391217239056802363424441529632113397245046731163575947662825599527025684301233524052108615593002356727985482844271320819831487559816623850227681321354048126280752101021557320341015
Row 2322741718402756255769511311842770267939812252352342525459550557385057116635875078124244001213528956612019449968215925321697386522495723349020174836467447871515265510385037906497454164355535707
Row 2442304631949263058432382290186247362972345352674668131815164391480835333226348223194740136335637761041385323171684340620245914203629722543187932094833374119451804119412114712512272748621320259
Row 252087480125778274937593346025977378691916611191294215743227591441175105312329492846506747534040278522455130044085187132631716715840997560757725599558435585181244474834592818197433729341079
Row 2649538833924556126351964583818582514284259434384104113505559431110466257157094245327212265489201946852306399220573240507125511122299521113757495819495615147147905557585548935670490948367793570
Row 27455014881815182127141303384013983608183234558489026196938962116572628534065534043242854489641781747456530875825344657513183224719523545377447914943138262223982229152324034198541945183923
Row 28227125833262595543621584773118372318601764662516895898498718474442276163733854142125957823702782218445682200702249044713284575250662720191038383902263256975666269822135613595119924072036
Row 2939603043542121014302520224701083138610383283208735271753537132798182090518846565992181943525657451656421721111763262341465722566635671823396727684293505041535330233224028564085561013449021699
Row 305322355816901141190913475657247315641767423641875913395838533479578018192464072868439934013200463825712844247391186594657123743163685256522983508212445462274359273321864317585566440962403
Row 31591021673271430955674712947582317541194213193911395925568227757765333575712841457430335581815103557431321619540742274022531739412933626596017635725783351717655996545629045921513756786964469
Row 325435198059263737553717414771528018723904687984411400449157031629451146622012344982396523044378691503574547846204359812825196837182362370824881641557928783285677128843311679915960618
Row 33245621608511438125108058759931229344915402074549115204898145952381260516617262900474546033227442158901558458788115175205333636765547743800113546484793236320963324437158718523335304510894594
Row 3422102814149395514174720537513062783962218717943166552354703221429632704355294420627175040239451536264246248836715335108158812149257483535651293209487115714170105733641336579283445564874103
Row 352910181821653627857455927801483280452675153213834750334286292058681851421376721578442461778314755822356598141371230831047304722474674390480514535386360972045395747106635724033398634395883
Row 362199351560419821760238151291342473751095478596651925253013143951989172244651302585213704841559824362412363142258513513262033654117460251254973731466523428395944520020314682212346956663128
Row 3757123163430556316862270516141214682279145424532304116218964421576310204918349414864151333142933502363189755615831156226895542187811851053563238842661683107010572255601136013861497578111492517
Row 38469846424002284849745431197133713275758116728882447709476525655814232749534079401022513542345622495561911192757683635497354091637182043831067201757192393177588652814221159540457861408372
Row 395738548643825759462126155381511622344995391300141344363241057701837938372199512322939741398251021942992555297943999262717388553082475250619221855162141562354101211574885374356725755564359
Row 40109417554871432357282688321922325913864901165823121617554216194092204835415947366916962300468028532787405441930443610477841385364364824605092391632921014117446775915283198815312373260756234421
Row 411475569208918431868769469646554822511516982431389258351795154022958875455558619006294263181434605251334558321857296742522004253634138474403110925423058593016564756236155474591415610878855042
Row 4254247194211704733275646293983101446158393068271218425603305356884006416122301063409138855818451343244084606451852933648506057634590229449513454857247714453318231645133041584115308238462120
Row 43124275318253323959300057821391140843885909700203649684636255196495719704053143434151370374919271399190641448157512160572258265342505337842342483551743749322350824449525940504911588332453868
Row 4418521298530252662668305011934067495612332547470733932268453227351321231650761561490282533795721273263746211842519186540524371316333533637583040348293896535862442406534552710259618940314912
Row 4552654186401208915649723362420155923546720145715975091461949502727444953521556234547101618278627745072549653705261352642814526171246816153276565239761476524415222195700311912855318206840123767
Row 461419556811112811862897290225823922271551859185514044162952324658490548842634380412741552575482612733860414433401872191047591440202048872625491617882883130840582401122546094442854384051011758
Row 4727231734213884958894713567511612573381845014444572732605884174721462508662393353911969199117913194600223448444013341805116230683943201129562655168641165227550326173671523058763554977202262
Row 4816395955545236081945124280125443475848984480926532145187659541564831325058422947247753455564147457554393701555114613762118914153213479633594455559759031930444886738309730312613369211871444
Row 499411028439034173723953356449463392126444974852502656852672239448136256934077352826224521441433601617144559735308263114162483659580636654031375912292977115124921473315171158269375656383893

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.