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 089937044896457354845421441298243917735412582858202625207643451485194326413437390914281645185358971526275430042802161615517858655510375053484931379464513695566571196538526813272373041665214
Row 13711602312217983247497516954772172919953052388926092229375321195979310010493772374524173337380136132722481884452464698822248322026203495219443142267392230853181811291615465564503515252664
Row 2835296408250026324208112535446899965805333510936263583431232451078506155933444428186626612394782420758023816573224663899502728733981658108150910125770150481631042597144268790846861764
Row 314142445107584121101768808925975588147075706234626054732521930033902993511140168501422173172161036583858251823445622393225874728377346974963852558847137334295177799004909529739025298
Row 45596141269956644262916283520365736934554291631424855503504225742005538410937878184120811841919298150921216882439081222935089475271920043310475525774003330854934317579349963358503195
Row 528954158981290359983062308619174321783132924568394432175656441859351660172846904237573019973729404617902724140418395919429859969001201599439614286191040034645042492710312985214368714032078
Row 6234731307675832860276443129064553103623093929546073871853180738058149322903817556133127431587431648862273571896346192848173052025708449335136133046454829213437550135273824135453334204
Row 711675425493498359811824172615671406113840585815732459270533021660241217955173302448413720594522783221347110145742804430557412229479747232210621448377676010581616618263140743322593357345734
Row 817274906275856826262703284558471732946442129771250416152064728841415667333251911427438980620441020488053669524614510026793519185832471454560915992473330364412170942862573915433254562329
Row 949992787151942511762325246921951205183431475818933582633372791307234821350316234738219818841791448444572705281539125033181469955222391874287747074069408154112163898147410411235426441124716
Row 105613127421885694147240721485595525284189277044032214583113837738223012649552810804730682295262815423336386258051447257754182721476551114192283759641475364478491658042005549994157773203952
Row 1142658485032515559161327178214574663564312621092220679283098557901021382138551683185516883298811725582392994959021881137457499135285664223923101120901195323811010417330593840515728494860
Row 122978323340281622400411031503571369210784520359329585893334138704213005109273141241010468350520202855356458592012412471949893644274651514485623003615454733782134213933620275480420624472484
Row 1343145177608532438601113134371546761201272650885920171527322665866277535203166389206754325234206878454936855083995169339717277627204031188840634746564526314715651518231862383184740525157
Row 14536712175546143317592068563826376163322172016113490511717834266183658141535899455971651623036743433215274919012661906555624831451988424135196258784135394725985746143717141528570235501341
Row 155855344858995712609592993795231433686114144095591697891104216845132456023099269525626072440169243203968139418705308124853175207181819265135275528772278440401868730471415771072398708
Row 1656312706717232629613324476546531643273246351220401293282912473110475438258641631265930456483345334436249221405475956301036146534733614426367021263078531248583123282489744155653214415254406
Row 1725251389375184169256842529202640461451343028041080446642691426182626945095395157714407280828941231370513098835848283352892373422253251557591450094085193930545535536958586153834412620405659820
Row 181135361059055424183483772412347911655397116249443435846269189957595277598416982331551910662189133489931421734558113333072168172328482586520636207083997527546785620218502154654869205224
Row 195763903921209442219864282554885459627265443572933161014512881419565750049034653577535804273599326013737479352029612414423388123354844586761653987525211212419449392156180339050365998
Row 2010465536490056985310248039715302508017075780259946672110222548235558652414297152633165218113863359112035415162150925775159255521124058225314225382237245617193050322165975243237314428793102
Row 215558584923642723203037508131491291524246583867440112125979245934641400299636862123261256152626482721131502063335528516429125877152856351906527757155055567495737124434335749234412581523865811
Row 2228107219345422568645604248589717093113251173754751631613100357973519279551225738464469284527918255206369016401592350144491663543538711349399421191246570324294497143919044659305229064456570
Row 233184396831424030243634263308426126329985900422344994349588639342219123519274337248016297669763068266956351195574409168827582058383078744941256409527543887509326532110359110011996152432203230
Row 24345115565710508023216862147499032122664563441129541320469783210749622039201171659255294436820352884536940304408258812601859414397093946416553085545319755351401638623045336854308614425816
Row 2551241643153150499365899108438205267511322281854373408659971342502446129962109591449711459392953563762326421084847062659723491557502112851455104510472152161331257555895417257293044413032
Row 2639265492945289620088742252577041382462617284424875893192404456094476549857123580219492849102793451743275364544627672396337133165341267532421425195093435149805710119514672984386551059072862
Row 2750085619441522645475351201930633677138325084443778587937593118146308333322664217516831643188528773110218312632619208941241627170845648522543915287033171591425358242035203057035794514858482876
Row 282479251150514161415493510371263311723003882520642355089134987359116729013229448344921481430752635114010319265838573194513736822443297452131784334578329563336645501105631724134235301580
Row 2929437596314342240436919595750237822782408235547215446021715484151234893317549065188380825704688486357415101490532706801847402974332802685111523918148915172425172398839692325270228091447
Row 30159559843537823791292254702653266245701557593252503403396059926834228510359224245591143866923142426463846395128144686722142943815045220335997318722055433429595247938323912478515152139
Row 3138871436383447828741052791529956895429442611355514514825645951651178333101624365433301167108332815959191411924743342833302629486437131106173747641897103644521325546155868394608214979052593931
Row 324099882158514282048266747092007458159017492009323033788729434484260857063803643415717053104374325431712589133339703822143118515406285938992073156859056531468654266246984031353356402514141
Row 33534528933784350245988871244114125981135447335674956590454184361276233174344330322110875797387437484494190512804134441814213479131152049805908902224104826883358552125523145424567267521862988
Row 341108515209219531240835942480659871222293944042642417571518451397562219353621670462397919148773292561445483966179915365074231417441268262558261209143058122431436942165073478639309181833552
Row 35285238034222147447824412350207340264898395825433511221382177380476320031589193181540194561303091334739604008352915128601332573423341134146268421862171158122241996201413364134419117152896
Row 36193330330892007132216502037441249965997242025241508328038551242561339685387229715315583878237735535891371216864082542645824275272916702814050331923182462231523144881483838222160269350631773661
Row 3744494069813719463189355918379015245591932738264193305554964473110428147913565512831042446396692546066595987378131944364447213244423935321200022292211244214854750703403602456548134706
Row 38137956032271507270647164473363133215131361736994502052214625814942538190224934767212337379142669280712542711371664976275056681246325623745962172943282859362198113095673312638901665664
Row 395791265944301913396534445823202597485345736623828132233050744578270350353062707231611653273297247459994233631648615428234516206632183860648419445655004992511833283145447240148912150
Row 401435519748573751362518310482835518214703198534615563351216871541753853930655804238655644795150328925108950529239993100726319619564477355811395524393320993359056662549941183326193581218
Row 415494221021293459865816443728774924538721692923248728951184443137136755581895406859011888165855664436259813991054295526161603337736374536336234532973239237623602407529848465301541632886723091
Row 422869156611582770345328152335188854133734294123683494544574439863080310614385233453814241257513112125750522528454557235618141312887764182474135915176283004425035695371459921125115258551912220
Row 4340235243556518361654531549482910436614751455408910932867537718691049411754601566474524635815231318334414442594899836153168502128582732857451120465804142141212792875450123715742387742407911994
Row 44369923567381612171305019945841475294115825089108602194728391458457488512621878529625404752379749114494167331515284366684916404404100938101453300343932928594359752016505773962288920354419
Row 45177332962961069583650484865474735425371897282642032745446526063754227440597566679866986423002748121896436363252538254085485678476384472553415130226758771026509240803771355668515255830
Row 464744228049657302978113727313726235536951362560730767701542754124653814795865667374546269328364542446439252275988221397022687173700524618544302971420841254332381412015101396839543464505
Row 47543293141723177139348651359353328404516133166243131558313418304828319412601798140153841305215584523131834537557716883969508585911451900472411571834205115619955366218441254948352449543776
Row 4871821355742118559657041333180493445154716451020326855017623829917478549862751835546374520127301869514925482329249711035249830896312201442281011342937552656443139221146603200395577
Row 491984502523272819557172301923001941216725542763509135253798158861444293788503552384922197147644565510997432252308101328014292385128111056085200412819081140295446239035385198617009722599128

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.