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 0	1380	124	4536	2011	4289	5978	535	168	2823	2295	1274	2026	3824	2559	333	4229	4785	547	5984	2108	347	4711	545	4080	3637	921	3002	1723	904	3037	1684	5984	2447	4952	5684	1985	1864	5810	4667	2238	35	4391	4963	5846	3460	36	5055	1322	4369
Row 1	2031	3191	1192	5939	3681	4273	1188	327	1543	1137	1826	5363	2204	3496	1716	3001	3069	5964	1359	1559	1519	2917	1544	71	5346	674	4279	4416	5463	1702	42	398	2066	1581	5839	3324	2146	4104	2690	4010	5615	787	2763	4651	2738	3263	2926	323	3997
Row 2	619	3934	1383	2664	767	3282	1895	1146	4486	3752	2275	5438	1936	471	2496	436	2794	5352	4263	4724	5052	646	5596	1093	3272	4793	3918	772	4616	3972	4991	276	2821	4800	737	5797	5597	3591	4224	2987	307	2247	3039	2442	170	4916	5100	1186	3114
Row 3	4912	3910	2841	623	134	1368	4771	1272	5870	4991	639	2099	525	2771	681	3202	1156	1806	2239	546	4710	4352	2118	1673	581	2256	2785	3094	5917	1284	254	1870	144	937	4356	3365	5526	1223	1877	4007	2326	438	2448	459	2095	1509	5764	1062	4707
Row 4	3269	4479	1394	1652	96	4426	5817	2650	3170	4092	5183	1440	1991	2621	2613	3497	4059	5146	2521	4615	1470	4829	2549	3869	3206	3294	5485	2852	5607	3355	3842	894	5829	821	1468	4811	3012	5710	5941	1852	4187	5142	3876	660	1286	3358	5771	4176	1424
Row 5	1967	1456	3427	2349	5197	66	1998	4087	2823	5256	3247	3241	2499	4706	1759	5159	2686	5635	430	4384	2538	1032	969	1032	2765	2345	3979	4978	3334	2621	1261	2229	2968	3668	2746	4709	4243	3229	3189	3301	2488	3840	807	2242	3060	2669	851	2536	4266
Row 6	1132	813	5097	3991	1608	5203	4550	3578	3789	1155	2206	941	2188	2481	1551	1868	3285	2854	3928	3520	2544	3569	3137	3686	5823	1752	3339	4968	941	5445	4271	4866	5183	3045	2720	5564	5996	3709	3238	3029	1921	3887	5271	5858	4444	2492	1502	5457	5405
Row 7	4802	3867	4676	2611	5394	1883	646	1965	35	4311	2681	4183	3072	3965	5778	722	2542	1253	3687	5744	5276	1694	5111	2551	3832	756	2944	5971	5755	5945	3741	1745	5241	2131	235	4828	2910	2061	3420	1984	3281	1784	1348	878	5166	3501	4319	3371	2998
Row 8	975	82	251	5609	3046	1461	4754	869	2193	4125	5186	4203	892	5875	4689	500	157	3945	3449	202	315	5175	2674	1189	4621	166	5205	3154	481	3817	3531	1584	2457	5912	4334	518	1094	2732	5009	2237	2008	3601	5056	600	3767	2340	5146	53	3335
Row 9	5225	5962	761	5593	2573	250	1466	4245	1634	5995	715	419	1269	1150	682	1008	5837	4132	3934	1624	721	1051	3041	22	4868	2768	4960	2967	1608	3791	4350	4347	4711	2291	5235	4479	203	907	1605	4157	1230	3907	3793	2663	2166	5919	2452	4173	3976
Row 10	1146	5606	5762	5018	5742	3811	1048	4773	367	2275	678	3015	1265	4437	4187	514	4653	1665	3145	3646	2828	2918	5817	1604	2721	2082	2663	5190	5335	1486	4319	787	1759	1860	5803	616	5175	4895	3642	5677	1764	5306	3620	5304	224	4765	329	4733	2281
Row 11	5317	3202	2402	1482	3866	2330	1215	5049	2802	2125	5659	4511	574	384	1740	2989	4004	4163	1104	2367	4014	1322	778	3629	5608	2191	4243	5064	1453	4436	160	234	3707	3458	1101	5662	3109	5276	344	793	3078	3913	1162	3830	210	747	4190	2660	4326
Row 12	170	1743	3918	5507	3176	5098	167	5216	4591	568	5837	3567	1522	3047	1764	3082	3333	406	2746	1677	363	4069	710	4804	3661	3248	254	1180	3249	1443	3646	5138	5999	3442	1914	2938	4118	5835	268	3762	337	3309	5827	3572	1406	3259	3399	4348	2585
Row 13	1246	39	4522	5967	3251	2218	4150	5684	5030	2969	3064	2252	1418	2978	2911	4174	1035	1181	4158	4990	2932	37	1458	3984	4488	1597	4295	3398	4842	422	5485	2943	721	5337	1672	466	3091	1921	3994	2252	3834	3408	3699	303	1558	4208	454	5589	2848
Row 14	1420	216	2290	4208	3669	1526	5569	2766	319	5667	2994	3514	5296	5428	34	1832	2401	2656	316	2448	796	2768	3057	89	2368	608	1422	976	1364	288	1004	4271	4331	2312	4689	1505	5099	35	3604	1919	1040	4787	1439	4717	5335	936	4947	1837	2427
Row 15	3158	331	2765	1715	759	3169	11	2765	4944	4516	2332	2005	2405	3491	947	4631	4188	4170	3592	2431	424	4239	4180	5821	925	3891	2742	1424	5805	2184	4009	5451	242	2084	2564	3826	2282	1413	1946	265	2838	4086	4601	514	85	1733	1896	4052	119
Row 16	5995	3781	2863	4360	2229	526	2325	3931	1673	2109	4036	5087	2112	5804	274	4711	3073	4450	4781	5844	2443	4220	2975	5529	5325	1439	4949	4747	3567	5271	3522	903	4481	1067	1224	397	2656	1784	4926	2393	5150	3750	4969	3358	3035	2493	4311	1826	5720
Row 17	1058	2449	5605	5904	1995	4993	1162	1274	1002	1382	4456	4909	4942	3274	531	2000	4009	115	548	1114	2909	3533	2106	918	4522	4547	268	3565	4441	5569	1961	2591	3005	4861	4170	4476	5652	5290	199	3097	3115	733	4627	4574	2640	5777	3840	1734	2744
Row 18	1638	4561	4761	5047	3108	5214	1154	803	565	5248	3335	5521	4906	757	1292	1652	3633	4172	514	379	3339	4141	286	3937	2365	4994	5129	3342	2813	5701	3224	4054	5046	320	1162	3814	2818	5076	5429	3542	1119	2061	101	4807	2890	320	3185	3866	3978
Row 19	4420	4384	1793	4195	1718	1826	826	5683	1751	5983	5021	1003	5521	985	847	382	1696	5820	65	4915	474	3342	3124	153	2608	4413	5720	406	4688	2867	1568	1002	4206	2773	2228	1621	5994	2555	4095	5447	543	2560	439	1456	1525	4788	2904	1111	1334
Row 20	372	5469	5688	1568	764	1476	1554	967	121	2589	1770	5242	3290	3151	483	1053	2283	646	2564	4910	2893	1138	2058	3369	1117	3168	1408	4218	717	2430	3661	5274	3211	763	2336	5963	1779	2711	400	634	4605	3276	3960	3126	1954	2449	2757	347	1764
Row 21	3361	3058	2791	4387	48	2248	5106	2528	5124	2562	5454	5291	4270	2229	5978	1948	1358	435	1406	370	2118	465	870	1006	1151	2717	2897	2789	5339	3664	2494	2851	5533	3069	2080	2547	457	2321	4494	445	262	1610	1254	5971	4472	683	675	4370	1770
Row 22	409	125	1355	1042	3935	1612	266	1481	337	2128	1903	1150	4203	5814	5444	4464	2431	3121	3275	1859	485	392	5380	4900	3286	2895	3647	503	3881	492	4254	1671	2932	2351	4362	1287	3224	1273	3518	684	1101	5090	229	4441	392	112	5155	2772	3662
Row 23	803	125	5634	232	3619	3279	3822	1730	655	866	3033	498	4366	3046	4954	2080	368	51	5274	3971	4238	855	4335	5033	5700	1325	4561	4570	5569	4128	5086	1075	1781	3880	4030	4816	3779	5710	1497	1055	2701	1256	2743	1411	4664	95	4251	4465	4814
Row 24	842	5815	766	2306	3073	4964	4661	2264	5725	1079	4010	3679	4078	3088	3635	656	40	3341	436	1438	1977	5882	4630	431	4259	2525	3443	1489	2254	5964	1547	3237	5769	5471	2082	345	4657	4781	2888	338	3061	5833	5537	643	5187	5800	5429	4844	4936
Row 25	1334	1731	2810	4248	1940	2229	1746	5113	4321	2029	4023	1832	3264	5479	2129	4298	1588	2053	1919	221	176	1731	3020	2965	4031	131	1323	2927	2601	5712	2679	3190	2185	5151	3475	2687	2254	5378	630	5575	3364	5166	2906	4879	5310	2107	1231	3797	5968
Row 26	1113	1668	1516	1243	5353	5678	674	2598	4198	1491	836	450	4878	5076	918	740	5449	4400	3386	5435	904	4078	1741	2994	3262	3987	2602	4414	3654	462	5109	1440	5138	1603	5670	3998	5561	4953	1988	1983	3192	4025	5878	461	2744	5817	1898	2057	652
Row 27	5043	4473	554	5363	5659	4832	3564	1650	202	2011	1143	5567	2114	427	429	5995	3976	3694	3066	3545	434	5504	4700	3025	978	1549	3517	4580	3151	5349	698	2918	3097	1763	5038	999	4335	2646	3738	2351	5401	2511	1725	4594	3722	2419	4792	454	827
Row 28	4727	4418	1341	4864	1081	3553	3713	1935	3822	2212	5766	2934	740	2823	1921	663	3170	2278	577	206	615	16	5724	3783	2748	4374	1392	4257	539	3674	5088	4277	5122	989	3959	1458	3647	2705	4277	1799	646	4690	3519	5602	2639	1418	1791	5699	2091
Row 29	1135	5475	5680	3007	3239	5734	1173	172	4888	4542	814	2528	630	923	2460	132	4646	3978	4833	1314	842	2123	2408	3886	4795	3699	5513	813	4620	4972	5559	4386	5567	4268	5258	485	424	1666	4690	142	4682	3116	1657	3511	527	1179	1554	2692	5290
Row 30	4379	4558	146	181	5019	4971	2479	2653	3355	2051	5671	1925	2513	3620	5408	5182	5342	4997	3557	5751	1932	5734	1590	4310	4132	5648	5863	4655	1098	3222	3225	2196	1758	3717	4279	3691	2619	1585	4717	5145	5305	4624	1558	3759	4158	4960	2191	2894	1624
Row 31	1093	3537	4459	4033	5932	5634	5250	477	2571	4420	793	3107	2777	1021	5187	4654	5032	5882	3561	1554	5662	2924	3861	1817	5868	512	165	2265	4851	2268	890	5012	4305	1374	3653	710	525	1746	2376	2884	2385	923	79	3068	4152	3928	2718	5631	689
Row 32	1840	334	4780	785	3223	140	5636	1969	3185	338	3745	3924	4603	4636	3301	2632	235	4363	1421	5272	353	4063	4730	3995	3867	1938	255	3145	2504	1450	1379	1107	204	2561	416	1007	5894	3193	3961	5616	5351	2418	2787	2387	430	3828	2324	4124	5111
Row 33	2786	2701	1929	5457	4436	5993	5794	3189	1662	4253	2692	5396	356	570	4343	3051	2184	746	603	1956	2981	994	2085	7	4759	4314	1392	4781	4929	687	5763	3672	1580	3218	2678	3767	1633	5261	998	2763	4895	868	4537	1428	1172	1088	3467	4478	3203
Row 34	1590	1714	486	5594	3726	4509	1574	3949	2100	5847	2225	1236	5489	5186	5493	5140	1221	5628	2442	5647	61	5176	659	1627	2982	3914	2886	127	3110	4063	3475	4518	4973	5309	5722	1168	5345	5813	2281	168	16	3414	3199	2569	1827	2614	381	158	639
Row 35	576	2480	5685	4044	2999	1231	3139	5325	4984	3835	2997	4404	1099	639	2037	493	2399	899	5146	2854	909	5172	2391	436	5652	5845	5536	756	2372	5610	4935	1474	2172	5750	4103	963	178	464	2201	2777	5667	5610	1272	867	4876	5021	303	2251	3391
Row 36	1200	621	3249	641	2827	1532	5985	1068	3340	4770	4243	5424	152	1794	4096	2743	5941	5176	4219	5032	5469	1031	1612	3988	2804	4691	5885	655	124	50	4546	5978	3919	5160	553	3569	5787	5649	152	3824	1191	425	5074	2986	509	4557	2270	1239	3345
Row 37	855	3227	5984	748	3247	2429	731	2174	1888	5904	5012	1968	308	1784	3181	4670	4658	361	3050	4953	1446	104	2390	3025	4934	4009	1260	2708	3600	144	902	4710	4693	3898	3373	3580	706	142	1618	373	3530	1901	3122	4844	1043	4610	3233	3066	3861
Row 38	5955	3226	3031	3448	5774	266	2865	3735	751	1215	5262	4133	62	1488	4269	1310	3157	1470	2507	4454	2313	1161	1648	1068	5931	3059	2797	1011	1660	1868	822	2488	2669	751	377	239	2876	4884	4	5263	4850	5049	5318	5907	467	600	4528	272	4345
Row 39	5080	5147	1355	5446	3353	660	78	5327	5999	5442	5159	4322	68	4960	1572	3529	396	3326	605	5347	5741	1651	4627	3450	2986	2029	4879	1838	5895	2920	1968	5185	3223	5777	2126	594	2332	2272	2209	1827	4942	4853	253	4770	4934	605	560	139	4406
Row 40	3288	3064	238	4243	5555	386	358	1040	1094	3245	3779	1467	3530	3986	2900	1454	2476	4641	2989	4277	2806	832	3107	1294	5531	2909	3380	1899	922	5508	772	1723	3422	1341	4744	4514	2871	95	5923	5744	3853	1615	1501	2183	2400	3200	3203	2209	913
Row 41	1494	4653	264	3202	5342	517	3966	2032	2632	2805	727	264	733	4299	4838	5716	414	1261	2505	789	2748	4628	2721	4091	3162	5029	3479	4238	1952	2874	2667	5759	5537	2162	4581	1813	1418	1292	1114	1704	1864	5789	841	3814	1706	5806	3641	2000	3110
Row 42	5225	2000	5090	1957	5518	3759	4053	3022	4732	2384	5156	4405	4672	368	3499	864	1489	3675	2505	1602	5682	3642	1371	2343	3128	4087	1408	4458	4678	2296	4347	707	2853	3834	5457	212	1008	2027	721	2681	3607	3781	2197	3780	5520	2549	5107	3416	980
Row 43	3534	4600	2340	50	1220	4191	3437	5676	813	2129	4466	1651	358	4357	1564	5928	1442	1310	1552	4822	3773	2542	830	2146	1443	2875	2149	3400	1002	1529	3199	4066	1820	954	3743	4990	3641	1765	385	5549	1552	5065	3914	5261	5220	4606	3543	4106	5298
Row 44	4990	613	5476	3886	3183	3940	270	2790	5067	429	5016	994	1883	2324	321	237	908	883	4174	5166	5036	2788	4030	1489	1208	5839	881	5066	3142	3744	1420	1487	3861	1657	4512	1012	128	5550	2905	4115	695	1059	2622	4637	87	4698	2193	4404	5017
Row 45	1299	222	3420	5184	4320	1119	3897	20	2390	4711	3269	744	2225	2931	2992	2256	5392	3089	5607	3802	3897	3224	3265	1389	544	3375	1845	4505	14	1980	1811	1714	1128	2328	1396	2206	2893	1634	1868	2331	3425	3223	68	4101	828	678	2428	2406	3469
Row 46	1360	4034	4041	2720	4753	1926	5923	3517	1080	2240	3286	3874	317	504	357	3218	2262	5397	5847	2079	2262	5870	2223	1657	4130	1375	2168	1103	3859	1776	531	1760	3924	5239	1252	309	4342	2099	4241	456	116	3425	379	5799	3125	2161	526	617	913
Row 47	522	250	2852	3600	2751	1547	5467	4140	1687	2060	4101	140	2272	4861	3199	786	2458	448	4080	4707	166	5605	5950	3135	2239	3322	1569	705	2348	1684	3765	5437	112	465	5875	265	3484	3375	4936	3670	4286	2569	3782	1150	1384	4183	4077	4499	5773
Row 48	1406	2933	1375	610	2749	2856	3075	162	1022	3419	1779	1493	96	4934	5648	4697	5953	1942	749	61	2206	2390	5936	1880	1501	3991	5726	2931	593	4136	1068	1003	3359	1335	3204	3994	354	33	3211	4804	3341	1193	905	2405	5497	331	3420	2599	1640
Row 49	3106	2242	4581	5703	2329	1632	2275	5734	1158	2043	896	2482	2616	5615	620	857	3661	5182	4214	2440	2822	5450	1651	4451	2246	2120	2386	1337	1342	1633	894	2856	2959	428	5681	4363	1694	2354	5472	932	4611	5647	5963	1505	853	3502	4371	5835	3202

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.