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 024503928385915695420221740835972743316427074843324752226974183452943155914319623104327526242244145414532039121411189654753860582433345429524355505836284022923000554611352464768183144283297146
Row 1434249324562668101848781082431419749941841934469570159161802512951591352496519983644196415434778221031160863836077544980409932091647511620862729554628217231387375191108729119932165449
Row 2334451811447987114529905764335533003723992906112529715004433346184120418134736657003069505210753259139136552523558132595553622593582680524833454034254737172026345348424996245631753614575
Row 3359249604240429220283292536652873430730453837851543113333203802471439993050205920335596577540583049461730545505179166780538356274320367416541611304094150413770547828255312610144311453234143
Row 4163138217557581156423228075772128623111563195223909451578709461932322320165841721360542736504184473942594328185235822470201449632645177211987745785891216288914534114327923985692398710162924
Row 530626731095166621004744585083930034177269058564747045548329247656664168505455573305942100944443220340641351207442210581513109421533179319489730284032390012057224484185254264031514359023697
Row 633114955325336404897426120832117166721833238812764836118234282014437543255041240722242463129707209725554738123924562434455014105686218930739474272242356134490574657015765458188231935955257
Row 71517563516643741588147934448197713473185321638025618176552125304395455183250222619402863715168525634802663445367286027015189495436529293753157137623514503456155672305417913321516348252861033
Row 87321511297235942226465715727054922360137757813025565275466624946491823387030003252430256726296083898414540903183517748214694214924159198052571362457271714000550747235655782513858431
Row 9960392734311285357599739149643895205850541078123438745771338328869041882859431339143029231334213501587732022639593536323598386110634883421710602796518149544853423532872108580234692396492
Row 101656525448055569228311172989578499319124229273823204788488549023005594416972186489755042049286362528473041044924522257594178402653284605142231624313525072665106232926845849521315862854
Row 1151563282503940533831545929814466198617112570909932232850864957165655464099397257894233478245352948065137514318722199651744003103532271834493207300247819182869338728495197247318068522018
Row 12590448241806413753014259343110633952574124411645705297211956042524395297273042512575464811205962149631724343302116944513206599225713435292451547735398190913475521245916481821425520134193
Row 13561740714344219127185464215242145780458515159483036472194032926323118064836562837141825149373798396758795617530759725233337843161424963779357643093559216158244507519645455446248746075677
Row 1442933442530520063624445457433721242056213338172755922571510439083995520016861570350952453730333337512925187731975412483287437043925217857091549631545252703051507226074777466451783881257131723080
Row 154257474158835022471392012525395579744494806280132225104205349922185753413016705023118074116305956540580738371976397991623327191504373451905424498645845221343433905500475558993704225421173457
Row 1638437862479156345274108151939324914535659082892271140561117753873480011992858338441929277459185047672362213002789107816845753556324751021663476530335774121294034694392307930801669521880
Row 17136538105263178441013617013147708532344473497400130407139563376317256192141205196261314536644652224744481811752623182498418851965308519213666231262929894678125338948084196134421831368
Row 18963432415721158458547164822323749405565205511421872237509840724201218259931867241326214856109027452244589794135882080230845514043880570849892596453022251535409542791648282515746435347162927
Row 19434658353409665438430371116823274651526924079583819281048383527179814332057402329671512301461543328165360478515312287313021141626409615512056180632322382456250147881414320159825138473396
Row 2016845903141846505437193264486534262452712065491024014178536496572925922301296149732757546237614171578153594422362727541053530417247553583189120194068242546423338449035525738266840882342396
Row 216792535535756515291481934123462459927701884222655241988575536967423338558627601406201114024743500495344813167304047145563371812484919336953937377814001233635505884456230741871431777026131654
Row 2235553733059236677418022865572728331276749975593484245451238537832249463347844584218346673145525753814622631513115381252317427463297197656103024225856415790125452342741498374541262281
Row 23599327591064457749425731172241982693183422434192984604594247213503238244795926147056005159595833324145735784450373735711208480121481494532386943474800105225702218135011732160182225225397
Row 244269348156582973408157082931391332438714914481212450615688925120958375456507841834255130752473147919252632330144472029156919281687454181395147239211426585954125906198244735594290656815431
Row 252362475836136164887436510893662903721366647375749523566414353775672283052474592425551054003416110872475375539922156318535491379896958005163205816654525778383141885527306548519618405523
Row 26379187411420455191211720627745923960426974711454622166019425591145911041648162555614265455474395225203594191333603116570334461230174826373347195329131938591311822685105858034344300053945803
Row 2741031042142746592467882340234193402996533176241115033420853417808442687273337574625264549381309370247415653702413454564804517588334631642176586450605167185943905928597034234136531142034979
Row 28199793527366213580167319301282414158319834547103878737221920424953643685511344232851972281327799412359142514438589322485372262828692951430147984233471438021532611418100198233385250345
Row 291022436247683873533315816512741816156552525314582772562440855640257523864438807109948181022435923520225341357212725686459456334454246649663431175240184946815764210213925361726422421754300
Row 306096135107170854301286656652150540732363421509318293054354642942020358014101259542991102215302293557325544525732155550613456617685775789834543929382402674359533345033413287827965432
Row 31458420669058864297171214154526526946702978500122420385346885280551201673363845584611387812314969321057332381882529181254573525024315031421418463556348351553324837382571182916225375948
Row 3232953013550519058917368734101469325441892997506547343732156751642762578110093183263152485157462261342215743883279725211177581020263081700276139544801322912072990226272172339571838887719
Row 331619189510374881341918884626567953092003562210527214739191447461819261415065773141547359794404496012501262917308810123636470629074673358732556022134586924123566197451322304388738774122501
Row 3453833894191541184873319307712244459943210145636301916436323025502468828611714469227304126225747033258456025901135268230905175765005463454485323171155705767170527801223533446955586163541964273
Row 3544965910296512254036522159271293378125172427462560629441038461115784863934328955370149942834492443281529450959625724278244585634574656833670496756104962274721261389320917324333424634359114732
Row 3642763199478619772193162090052031485408482287221904939250619354622175901423151373648357525857208848575103243147673834706196626202683415842393582467713872990515842585179409776411142718938
Row 37201594974566313055995193393545556215823422234545291887332114345431279330225698378221803956296127647194074299456568939425730575152463282692638578358902461400433442989419234171992537
Row 3817289915558142547731738538117342014409958085007375558962949348456472195381159154833359358051293159731484281578956444802325229154711883371642433620309659765634119557844641494956791589243253253784
Row 392435240261638365044390954332192219052212756669154550471393427276243821047585843586801053414153211382090924333144469226752384130851014285216594236191405516237420747075420221341332182594
Row 40518020404951586030923092518030939118955254055478121994388827081866530426505484709181258582782251852784994651146055885830350045395690592163048693684254149573208595373754061033382521142898
Row 413129476423823837575224061930931517561337432977520135734763739326210675369213047511910108719582505482413643537264834784355777224128163614281650564233590857338453650354930461222402578444835092
Row 42153613384220621700579945665231163210331714640253829478805354560369644094792360349812637125225305682247455446695756466191570348726813269328612473791444833499623088588739093967524044691662
Row 4336483261526526295898517515855792990571245394753576635516284433432784129459057545771938153716641824544556311064391312934711117455713391071107349765040632086942009556413571524240747004308
Row 442536328948821112522741927751051586324052114377636988244949425421631953272659668338928661362539724302718920483714185228137247064109248339334527525849834390166310962165536019201114361440831132
Row 4529407421800328360831615724375878644487412965871245139802728393325071986291689636484012306130085932417462140145306356047551105388823624265361123994143425512725438412615165439210542443372
Row 4646122292875507387742992568884423074115052243475064998115129523359541656357583559481710292997294225452436504778958073658101794316548944392573257772621473128248645193465861167032973220
Row 4710863859297746442675400616415617551407646641339388323212356397754851249236952171026499056892307385320826523714187859489332963380639101607481191632479824671323476138055205108116131825661409
Row 48555057822435453954714741239256781393105155513401038451851464948124562786333715724332946934485113438985565129410791312703629591351375168538338781559506152701663616610270151345755164852575382
Row 492510262751055839132035909725217315422662963285496892431974105912580198216491641125133122257186112139016161660646997417032731024008459236914980380984512464104412921450281326431851183906

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.