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 0528755972857110525612004324887035328374895320549794707560956534383881117143469392728795137096571228243028821871116921681468402532734028295204898356113563793765334250037459878821254
Row 11158522721923886223562485073338435280361457144485782118144733054520945013573410720614929189928265262439831995249528044524064506644429245284206314252612048242128741762286926552942134157082150
Row 2584232812561903220921554728147155319267205832378112543381022541728655227255821251274497949993035184716545977318813622127303046422383493285145373659232250905585304149215962416632599833582123
Row 3209139224814835117124745189642900449441524261621118129033003112375315403770746293354311455503316127928084298486129314507499951795989411642545075079332430013230158536214410448762445222240
Row 4216322912313279156455427234129607065148125855662078576545641257575426801681426017585005126049885894881339850755504191913141666421036274457385430537978143759594520723324202318361888327915894567
Row 54959584932539631108531245525989270936265492462849401158283725665614690561941115043377356357570023785411258856579991154461684814782579195579011301943349947561435212636952592496226122065652
Row 65879261711553256297247303955535041405435006513916963622598631742001941396413293884146284531835873778191025494038411522003917731335411723703208451273052223566920585362136556795347453858781288
Row 72501120651713963129044891549506839840983106451329710225244365121932946573413205997595798820555318235317334665890161159523391281751231353410636122902317340109992782522129513001765494634924711
Row 8467948124708463658007623953215224952618304241052570432921169217855026530446862199331356852476583597937751600592512673104603785017323858785779119120292273380850703773785501129720701286323
Row 9137359712521468656554997452063427721205584038430516141165447239939935225359022149713985091187417754592317138445877349452165848143902550350112421136178225416945819297058553935241622541928
Row 1016415843194931381240103950113015563121828585508567574535556893975485746993964993480293756862995906554142332322179416039621637210910992876314811058912778229274822851966822163916554797496
Row 1135351935488832212951741130203447145363435650755232317214316313416501947783526491015565818565838401783479547934375275597437904467546246215964635575126293348511498538554636330159982677175017
Row 1250444243392659940603583443958434061391832803336389210691803335356902398198754415027533545541131903190331231873456402922042500227212930993313711153717417725454345451083346452291169842123309
Row 1326853653233620202207234752095396565823962852368745995352595847282450289243939864624210344039163318786243742291483649153741684301387218750721853965903587617922755356239121063520511845553808
Row 141556254142705766598121853083766462213112248527128484163571719602407893759983980813178973443752180284018941297139457022853393439722618391415757014680477910119284049385913431620457819455697
Row 15551419423677327373144114701591012505951207264329640595774268676449144253773170320313874097125152465440287138231384256733373326243366310574654236396759032958217325463253232312215219071613
Row 16594512834782314826702879439819162318126957383701383530741027407873720832732310030492634575222518033105453230248303593914477516422695192243125573320227189115885965559154233038617350137752700
Row 17232874574828659304969204542404421434630704780225918444224953376647334526408549604165673492475095196262425965736332328276093070569215392039173657784598128485239233946925660129224574392
Row 185817542335223321422752395309423686219043971418447314580125444221193292157589637512372744298925751435264838663891104036834433439139154646665415439554901501658592872319945891452445330111570
Row 1917443167146654943403420924825978564351293843353416815261966455954406125224359445664124260944259965808301424474260244016331915481549759336891978570333211074413865127559382830583453783441
Row 205057297120073181557943241765387344662336463469463836486594119314512521808512318225139229235315041722833133755502733932521228035742100271117491486156237251313625100927794284512859235536
Row 2193550451357735274159175778176329072114131231802507383354598159322170182914172325420054859505209332642334336324937685270229451255342156871554172345247823244459379055049661622496210461553
Row 22113128752970345610753517340528384216384619409154063889384453032311951524426484296172249712754551144743720113234364765268445671639565320222714317054272997401110641615210146955042485499827344435
Row 23424253812730596343525484547328263203605261196832894827360729418493201112753316412113394931222180744342706805116711415047548387150104899335544831725558508719852525237581213153161660450
Row 245426193537663547327326963768508011294745885229616154931284354853941174228392423346633961510545159213884263513200192350126263857426717211309623940210209144149443862850251229551329662971
Row 252351538843757478975888566747811505718198120722194606592944864778105954472717126815381131136259241158387115267033524123302127404559276836374446243524174595215343986672372300359585717811654
Row 26303449829211841562842821764786466929161456202010384477475955961244239540423679481226375831320933032202212389830581993555133614902472520111875496590354223880235814414917834200451320782595
Row 2725555756140651915586461524941788482739248458195943220613092414140714263167237123292589251468640305167552042293680159782423413532230542593884419182726567123101570490225237761799466551823224
Row 28183215535552442018034238244997037586784649535515014883707373043071645457422543704245253559404734478637155323451289737565282445033073701252154515012225302827587146562328475353625730601006
Row 294630328553762874581953151608460430292140205459265895133643753202503746274746518658484048135718270423404471206523961531307110264815244639004634176155083238478916475292471415426273089474356631715
Row 303489484915621537486112804240120157513053596128133764622965822252247291582202919673703675125850845216188521733959154838871447397544929835257729122245847915274054175949022675185447235196583
Row 313041225254967448993807575841155691193020731239581735201635526550389259931725134947132515402223021522076408387512724666117824961214185213955020160955094711353815825949335451021583261956042474
Row 322612132838223083457932235312731529933951605570206027833066327346344460229324239691003378055509521134465225343752425550083645583282934464162522757489253501524965920221132782985548419111445
Row 33177621535413277959324963373010663614263481818695271518114512099262756122151538445041500553549991420174522774404122841885848300334152615782272422335111338183637741553704304453365155514319624766
Row 341293134532692793879226842122623454526163851273224638543072172363533445946414646811781191948365485496341714639410513334055397147767421902356294140149791485301628294217547936821289120243174632
Row 3511472462331329284381214924123343320105014474524455844192951283034428420693434326235544509017705929377230581130208816902277455050035204293011521616272147126661719192211202563385024755962133
Row 3623153029539558683479548416383407325646964537534438681338935389178235401633109420104298281339325417537517815664497039141979199933081847547827923485288447218014205390256522333283195322504105
Row 3724933882519945022179201124331596138642141259355212832382354543550851831222725694715227447481351663131323674946326646163050575824972248426046764259692271564449061530599910334768235346838524183
Row 38269442028984967516730336304805400557537454015262535035124873176251883131245454592774135998827732392575551252859360733085553402620545193193323751493672263647231417651134849201163220681351
Row 393351313558091254494796289788555120213744415753283296218355331815537527709633046540656864463571033338212201253406315704603119713784727569121741623575272536444318882297216143064250434282438
Row 405274439054844679407539464735510813275954360539015244962587290236892775075531285118002955516926815926782574424304209218117032599166438167356105116578093650701403265945101912349527901188
Row 41256921012039436950551208104949811990792141019829733113279746373494346942462609324951821679338855072272248941857665278160623351378364470343348511751541484025438231038551639353834415214291303
Row 422398403745521579571619401086198744291504175237063109408750847534789551756035404930443308357521481259836875315749511561831473152516947252867110958114854553713146053243442246922326517534801842
Row 4347774020771522011025237013699421015444833256321594477580131933449101292197446144228023688586414931450384972185538152992262630354093314937351791135937502394684438218325160418321502503
Row 445092227946995537372115003225358529923238262219645093437495617193471304848671206483922549555077490833369094068151830595706105337526914630587693371642376160832645725570137004680141911711727
Row 4528523775665101331564354184667551348618536104056794294633249404409343116451853491939081577461916082563727781983322515425498324852191250515227423735533735117901313297511410703300
Row 46320653813944505842991852635291734598912954237287432755391542241075875161343565027435420904363470538804494200129935563530019949443244525732425095589115825547823111279036563862180307744922055
Row 474690284710813043493754441747281739373748580935003048824432915264568553865155584219395937295247293592333790866918292962535846754043240136123487414842814241895237492449422441367523355081051
Row 484619466289255745993844528621901181193285830093154221516841197461552954683276257221064657595950303598202396283157101446144943722338200629701811291515913611483201643704637423053583428455347
Row 4945165607506946224263502736521861522940474692493854931403309183021452782011343654373372491914521741355656821793338925271140190521332095273965236417822574465222594834031717108871235463233990

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.