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 011765394468730985784443638904582864574119639234748854936447326805577537142734137484817628662244378925606424101581411215869742798468475812342573534020972314130221054661186104131332865617
Row 1250311384754135128995619359568721794236109737592348268247335146136654903793938482924762521304581491231656212045318123845484318499258981216461034931902789172929994547407656803279322210462769
Row 23600498315987652341728465641462043427619052234513473735413504463547562114212765829023856365614491931333647285153438114962753336430942828259848211483743864575993286427256683627177643022382
Row 338904293040792428469522402154031968536724112464211957755557494723724377430311452401894045532644603713295223620155334412524442373491672730681156942109821233093509458624283283414213745655
Row 42519180327681759199181310854514525403768654033714811298357433727370928104883465139081005495914165591138646993733276043532514563112120105541933309510044581132169099745025013979424442271688
Row 5105431093384962411452973783704683507614363442342916872004455036972558483792356194019235251193742457525915466839791603572210881941468352011237506029051919413643415361156528136511437253922
Row 65964516148315364387333472862485338755304463498952515550930393347512166299316564085112859973445269224480928053749273034012264421249362702494524073564542957943093389247832343344257122762192
Row 71878326838485962439638443407108738672215389216154945129238793157228581210126344144153024281236542112103579286392238545054279911222902276055177451666034611238144952261325578641054481134685
Row 8582264728282111507540641532284164343941205549734484004618349763134109392973757043309523159304634501740353114503027193696167755475807751361113381034525357322239474931802435367352910055501
Row 9462219342374326524254684255387644852290990351450084685519045554491594121655829975141855603213167274034555533268446050334889394527032145635473814693511322237584500736276631845926132016755866
Row 1034851503840490310634053506938021508460140695968363429583612903172599616401641350648625399200555972165518955223484863538896923652285871342742804939122957883540529857551173225511540752427111
Row 11571540673616457634665621417256304810369431145672308240822037330939535464158928916921376431598911311603224412465677467013565392273749723967202459321395832340258332945307429141026511122249794574
Row 121811187052663186230052554316390214985561357916891629702904588893731064480307529371881290758814954582090740654258852638185217551904503740541158335319552655291355342822382925035726371634402831
Row 1321965145768407634205649303032405551094328144037325133219456354170248792152222033446443517362682264423959945980167828242175219125922505611224032802850279543731313235210452635429173834325676
Row 1425304954187859763389361324356521852236563135293060180657205652205653301891533521804685370823101920581115721348154950041023407839572900405313455134296997236445326285893159224335612124344894942
Row 1531343823112118191531343037381341500250852890400610796819633007502133083520331743045884184949325777344013655388468358534330181636765450363452062880137154718824553436588756244041850356934245157
Row 16108974134609722589239274828375613647103608446552612833915415948879555291034267659844470256354628734412411429735685202103810281743626341992236541174105823644782552328896434371048552
Row 1742325761586907560553470110529281881521932255449442142624764594188738955516554050695731904385095479239143532583944661763415512670975105139207930332020129725714685717451819434311405
Row 1858383826594549064399184827564493640670202447851363787893518645618675291595394623232614524325804081496010972432701502586210961446476854943293152439863932219310441013283797530351442531169
Row 195804484851142127146143574707554233165803556658513045427168127504194117442571851603974191151702384323929671686375212192854355666196856831527324438910693640419263442245496615905224542551079
Row 2022863972238260588254082643312023744328871359311824427365931504109518534732498253111268988753361849475241242852013194714317255749733053596416161732338594310445931112554703589427435792774
Row 2117477630272859764391321959474859143533754060175320881231231010614284227326774456461126205500454137444969213020172547490337632623192962133865842281643334700425017082760337963991231248572274
Row 22458515337303195415222917361895519838653912174527681675436746962296175345375111863237336017945997336255893987567344452614258597799114524129121931882341710533935216238205609529251619042282
Row 23105210142367428943744161428517363749227214092193253256662170352211182984741430532151575357425613193176386418475691576841287437824955032515546553317890240355882298459621201963766564130811064
Row 24438113851385353874156404856391735047033608327148304351405253253382320739796994097382287394497824062357574420465437807427822219139651563183028205479533435233087260423521437656167748193862
Row 255655551719593758032352501422084709475842544146556446804967175426455293584546582918298730945521533945301771015334840396692865599770626672348572048751057447731295202404018094169579444534698
Row 263378391747052959031799581624132959921255367740301924541402626303208374234920831431825521163348651019480146595472349920373388220323314291400221474532433021385786200616817102547419443395755
Row 274567688183759981513104863037720675431503615382929107249265131340232163133554817471462168615333468185332431547158157694614226916054611378126535240415747194670319225615994263518273016652397
Row 2838621213414453242899567727914752291928054798450025743411768417820214548830126127055549593158975805152941604986225858251383119103755265442393652022233268721215038148462016114894138757899155935
Row 2961921752640167210625365971363469649575892520339101557586454525492506616852178118672236611805233325553192212134703127273956445766290617492302287753832997183352743517217152845073203547364565
Row 3011014207422286114244034091347495812835595442744092334407141755240582047621165202347339494476989119375962215424954626325429155367554040573770363115314727491311253154332234591224149726981043
Row 31197248132455445276147204332880247949450344974512022871888448718275944225654571475983437025994137169157536031872755403515915676484603432853685036120818475530241820464925282708313543542652
Row 32539138104126373217972545093870782386910573536427121551034919481834304286385346381323383487895220311406365951665759311455635694436492857485160343736175942130546733477557648882579449437069
Row 33278015594646291149413524386297249291521137468818314692225626736192003542710565620536823604293284419363181542342988654313208244540771191385160139812356530550224935217133211841473159948033476
Row 341025585830953932218138832374153456826594582545420901790189816719093283176758895638229653902131151372233142986232021174613345197535563738419249439742345351136339272964572227164861588946242143
Row 351655451317813951390239125464462412262449944334229104288531646520263508540830005852291863277958823543494474324221188861897630266758484532578531131551803176040985145466923864460513344111968
Row 364541141118201458204225981340239691822638220996745342838363443811370421136924524145451262251584119500736183252341855851792482814043250870400145903265409246715902301563844363138327128164508
Row 37148250830311495595856526534077465942701328207738543120905525837017743259495950391351362949411651326733764789538192329620196993273514657597841664733463724356071328931801617554635493391
Row 3828052508243041551371370580534034746459439404938188959595636221534722932193163750258294071508515424360226431593905581354970923202979486424564348466958593093326237982031515037571666136412281959
Row 39355728659834385936685927529523323085320021443634390944646122772920496014407782053470145764083385123325749521435601707277042426891155135927571082653508841663852123118001760569524124532614
Row 401371597113923423467259671506252222991254173658582960450628156495660164024057412292149249071442723706190424183118436303144884064422191150784389341615996874670333554516291840825127815002465
Row 4136832240475751751147490118981853804431549701239134634581645576753687234156278423224843145356565387308214952124360299426762043523414321217380332311422331136142912022375277446604020254140274742
Row 4269681110635539226471849255346221351363705520618115747443932439644819357540781051471155062253108522809125105482049393846551657494909505420125627397813581839311450621044492548095483216757724301
Row 435742385053514452335516045537563425154641445414532487396912021396302332141022100045712861411436323905303824413387520522131688494662103933983417264229343051515615741504609406154731810545624955023
Row 444783495359333381608122512434646366546293850587731727965939135519333553996312640531524700190937602761138155692217387645922694137021843229783409127416231073590354739502192268889157324614243
Row 4555695586464827214286556480104719364932635812464159561181824598741594233126157825306116352542551381152211442954398253862522356840335242185445895722290052557711623364411118151652351055675
Row 4634671365545627722527471030273908231417086142123556338317791589262536321772346531701211769310365278102552576291522273228227916826000480639130262714622119635744833475195761233935814243
Row 475155926477412162042546722512569277480323301191102955583470271155572276310225834989372337782563255625283519316728671099141033821025184459730675650848563559275650196411176781521458733891078862
Row 48490366058514212143724137673965593239348311030534342122054552628095120517636564755510233067192193984223948051372331756671861976551872241219318393771862477212072892411554194946364022284066
Row 492816588328201917318835382136117157779402543309360744034069124447548120545313857391640842064807219814835752583837103818265435926374570780417570619513952164544931045225228955113237613695593

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.