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	4409	4044	1676	3300	5077	5663	3684	4578	2128	2022	5613	5952	73	4442	4653	4903	1499	5551	1283	4691	5726	1989	5307	4696	4961	4813	2457	2378	5544	927	2443	23	612	2433	4214	5751	3112	1705	5286	5039	1522	1972	2404	462	4676	4594	3462	2058	2399
Row 1	4217	4350	2734	2341	5196	481	4662	2838	1976	542	3289	3540	42	2811	803	4341	3478	1807	3055	758	4875	62	843	4564	4241	535	2421	534	369	3575	3341	3608	2856	111	2287	4192	5685	299	2483	1633	3647	5444	3252	3962	5287	989	2208	2398	242
Row 2	4675	3800	1753	3923	4932	1518	4193	1857	4435	3140	5795	3062	1662	9	2697	3405	2660	5636	2519	2973	749	813	5664	2298	2228	4580	314	4866	692	2853	5435	4305	4474	5883	4649	2716	1014	4371	656	4809	2016	701	2071	2821	1704	4470	526	827	4867
Row 3	5140	5471	1322	5234	4733	3376	3779	508	324	3536	2700	4704	3671	2235	4315	4361	5699	4601	788	446	2086	386	957	312	5856	4659	5338	507	2692	4411	823	5906	1061	3580	533	1514	1466	3212	4857	872	5026	557	2515	1887	5788	900	2403	1085	5703
Row 4	2149	3450	3488	4822	612	2907	1333	570	1179	3381	976	2244	3434	399	5222	2965	460	512	5342	4178	1187	1816	782	5967	4032	5039	661	3361	2161	4361	3318	1084	5204	3632	3294	774	4572	53	437	3541	2175	5536	5158	722	3450	2255	3435	1100	3606
Row 5	5251	1504	593	1099	4126	4322	1359	4856	761	2804	2848	5082	3848	1397	4539	2364	3337	3539	2007	4539	1489	5030	3044	3345	245	4341	5528	1155	3396	2024	5570	1590	4440	2349	1651	232	4087	1195	3391	5773	536	4817	2036	2853	2083	5244	279	4164	2560
Row 6	631	773	4508	5	3278	5290	5767	5115	4197	1007	2849	4916	1586	2430	1022	1774	3346	5809	3257	5039	5717	1601	4618	53	2500	2047	2949	160	1625	5743	1126	5433	3921	459	2514	3747	4767	4729	457	1979	4890	4824	5065	5345	1623	2713	254	3061	4396
Row 7	4315	2195	955	2611	2021	1159	5012	5335	2518	4346	1130	4548	2649	5680	4459	1053	1875	81	5199	5413	2205	5323	1633	488	5432	1300	4428	4272	3953	3579	900	2758	5649	5284	287	292	190	2550	5038	42	5014	4471	4307	5085	4418	5356	1502	3447	2825
Row 8	3488	1086	1083	5860	3108	2822	2660	818	1442	5144	487	2114	1509	1609	4687	86	2191	530	952	1186	3508	4032	3634	5045	843	3941	4932	5561	2300	4324	5533	4587	64	5759	1468	5257	3824	794	4972	2463	5083	3320	1687	4478	904	1344	3753	5238	5380
Row 9	2580	2777	1282	5537	2018	2856	4324	4114	837	2431	3262	3464	150	4528	2117	2982	846	4181	5542	3982	3083	2704	1477	5068	3281	4150	3916	2109	954	1572	720	3976	2216	1564	2300	3760	758	2073	1470	4554	926	2252	556	1199	5662	3138	2870	5274	4433
Row 10	3931	4448	3305	4589	426	1894	4752	3726	3402	4235	5670	5681	2579	5230	4329	806	3015	1052	272	1398	3912	3515	3769	3774	3409	5068	4020	792	3868	3716	1460	886	4584	2729	4007	2091	5830	4547	854	5187	520	2396	2258	4212	1275	4004	1506	5620	3938
Row 11	5448	1783	1521	5870	1471	1862	5325	834	4524	1239	783	3045	2270	4977	1309	4521	1030	3114	2219	1779	1748	5110	2771	5721	5896	77	16	4158	1904	2582	3676	5037	3672	3934	984	1427	5633	558	5432	2141	1403	867	3136	1795	1784	3613	109	4661	5269
Row 12	4398	2880	1409	5071	1165	5396	2735	4542	2032	3432	3228	3249	5316	5484	1209	225	5650	4084	4348	5902	4390	3661	774	4046	3844	2686	5866	929	3878	1432	3777	2403	5518	4480	1433	5384	2499	5973	1583	5080	4884	5136	37	4778	577	2857	2231	319	4147
Row 13	4085	4355	3527	126	2353	816	126	5602	4238	1362	224	2773	896	328	5252	3904	4140	5697	2008	2755	945	5809	4033	3822	5468	65	2928	1425	3168	637	1359	4709	4431	2533	1268	5934	389	1440	2942	4895	2612	1825	260	1053	4433	3447	465	546	4592
Row 14	893	617	411	1588	640	4785	137	3583	5368	4621	2421	4239	119	3139	4687	119	2736	4062	3702	2679	3463	577	3259	1735	2493	5981	2120	3860	2504	1860	116	2446	4895	2504	2735	635	927	2654	2273	5976	5840	2446	370	4682	1687	3102	5863	5522	3934
Row 15	154	4578	5901	4895	5390	1301	2857	5663	1575	3123	1017	1189	3052	2992	123	58	811	3975	5161	648	2908	4048	5251	3326	5445	283	3183	910	2096	476	2987	1126	2636	5337	2000	5316	2614	3141	1719	2159	2217	2354	4998	1260	5102	868	4379	4040	5151
Row 16	4777	2043	5697	2107	947	935	3811	1497	3667	619	3243	2685	5961	3364	4878	4782	5704	1272	5401	5079	1152	4080	1796	1297	2062	3034	3103	121	4024	1218	612	5338	587	1295	1745	4126	4535	85	4856	2783	31	3971	1167	3975	1499	2318	5355	3054	4180
Row 17	4218	2111	4566	3806	4248	3780	1872	5368	3722	773	5653	501	1133	5031	4465	3716	603	1116	1591	226	4979	2138	1026	4719	3484	3253	4038	2748	2777	40	4328	5479	4165	950	387	690	5487	5061	4173	4268	1479	5148	4580	4345	4265	1436	335	2872	4148
Row 18	77	5456	2322	1412	1358	1477	2406	3473	1534	5910	5469	2828	2922	2090	584	1265	975	4900	5636	5382	4245	5520	4008	886	1681	3486	4651	1901	2871	4583	1466	606	5777	637	54	5445	3923	202	4169	3374	948	4135	3965	3097	2947	4148	3249	1718	1875
Row 19	789	3981	3653	4866	752	2332	1227	4383	2275	5743	784	3591	5050	174	2062	5920	1215	1764	3718	5539	3326	2300	2086	3516	3138	277	739	2282	115	1119	5390	3418	1511	4101	4095	2895	1681	4185	4841	7	425	5602	319	2683	3462	1195	3058	5804	5696
Row 20	482	2524	2900	4962	5263	4751	1292	1229	4605	3109	5378	5416	4291	620	4974	4906	5249	1871	3223	2060	3455	4202	5229	1427	5716	3651	3513	967	1956	4715	1462	3593	4165	487	4376	4275	3589	1867	3278	1184	5510	4972	5945	5602	3035	1533	2025	3941	3034
Row 21	765	3951	3312	2826	5541	5951	1433	5046	2858	3039	5823	391	2265	4668	4430	503	2254	1582	4016	1989	3037	94	3148	456	3034	3374	1310	2425	1525	1887	1026	1825	3672	2320	837	1639	5409	1807	3169	5963	77	5179	2861	3705	5099	4082	2263	445	2180
Row 22	4769	4091	3755	3806	3134	236	1344	2957	5480	5992	3751	841	4413	3539	1999	251	4607	5624	4612	2601	1681	102	1644	1524	1096	2688	4628	1352	3402	4106	2221	2312	2878	4651	4363	5610	11	3269	1241	5700	5787	5026	1845	2314	3061	2082	3281	4172	2635
Row 23	4274	1957	1807	1550	3104	15	5286	4353	989	415	4711	2980	3187	1929	1299	2678	3093	472	480	4906	1849	1222	3109	5371	2281	2746	1245	3207	4162	1777	1318	1641	895	4095	4554	1085	4402	2989	3679	4622	4202	3897	2402	1987	526	3389	2664	5431	2571
Row 24	4822	2303	4611	1203	1299	5214	4513	2986	4410	1612	5876	5233	2692	2568	2026	622	4151	3600	5998	4225	3025	1487	1693	4978	4640	1990	3241	5129	2253	2043	2399	303	2602	51	1310	856	4141	6000	643	305	4109	1928	2924	5630	4645	5597	3989	954	3607
Row 25	619	4091	935	2425	644	130	5143	5186	711	355	3532	71	3219	153	5023	703	5100	3957	4753	2922	4351	2902	4224	4763	406	3211	1579	5404	870	447	654	1632	11	693	2933	1262	2981	446	2393	3077	3990	1560	674	2178	4572	1675	2599	4146	4865
Row 26	5649	5073	3145	4271	4999	3022	97	5736	2070	4642	553	5398	5388	2614	134	1301	1199	2080	4610	2713	893	1032	1808	145	5987	1422	3593	1901	2153	54	4916	5092	1986	4091	3934	3024	289	929	1521	2277	5601	290	3593	3715	3765	5155	3604	3941	1131
Row 27	3265	2522	644	2086	2753	1018	1907	3453	5728	4129	5287	1812	5606	2072	5769	3848	5078	5218	3791	364	4742	4992	1225	3589	4615	1805	1871	961	5653	1211	4773	67	3631	4058	1921	3213	4962	4192	5960	367	4321	196	5646	1774	3357	4870	5243	1804	754
Row 28	1465	5655	3910	3228	5940	1734	153	3258	5752	4104	2025	2212	1138	2714	3827	4863	2222	4487	2378	1355	5156	2352	5680	3789	5382	3380	4508	3362	4940	1436	2980	2880	5554	5408	3921	4470	2303	5866	4226	5764	4340	4082	3745	3287	394	4900	1527	739	2337
Row 29	4873	1079	1617	2976	2283	1935	844	1204	5724	3646	5474	4062	2170	2588	3448	333	851	1121	4617	3057	2108	3782	3826	3320	1325	4368	2252	3679	4557	2954	3140	536	2847	4635	5959	5240	914	383	5286	5117	3415	5825	5167	1572	5251	4593	3869	5678	3334
Row 30	1221	2977	5042	2058	2463	5678	1752	4267	1686	3431	2539	4212	4086	2756	1131	1618	157	2639	4214	3482	2181	1504	2148	12	3191	381	3251	4653	5752	1815	3975	5446	747	4475	5539	2887	1556	5658	2089	5787	71	4074	4992	789	5380	3967	2590	420	3855
Row 31	1204	715	3008	5862	2575	142	588	3763	4089	5435	4293	154	5438	5831	2527	5263	1337	305	2871	2765	229	5092	212	4215	4565	91	1834	2129	2547	3657	679	2580	2306	1942	1823	3369	4168	1179	407	5212	2020	1020	5534	5862	5922	3050	3000	4748	4137
Row 32	655	5495	4197	1986	5267	1890	2809	4694	355	4383	183	2043	3764	4996	2803	4189	3997	1049	3281	4984	5274	4790	1018	3756	363	1977	340	91	3859	5053	2664	5381	2640	400	1004	4834	3344	4873	4332	5816	1889	2833	1695	4968	4827	1146	4497	534	42
Row 33	223	4129	2777	4260	4591	3374	4331	1980	2967	4882	2733	5997	1392	5681	4912	3718	4696	3131	5501	2314	1392	2142	1934	5219	4417	5172	4385	3482	5767	1440	5601	3229	2484	3061	4403	4941	5389	5765	4333	5044	239	3461	799	5381	2469	4056	1380	4551	2079
Row 34	619	5047	417	5361	2840	1016	26	1289	2411	3908	1102	672	290	5168	1822	3712	5128	513	3153	3554	2160	4308	2333	4710	2043	5019	243	231	1505	3739	970	3855	3076	3867	1757	135	5307	1116	4594	4121	41	1289	1383	1324	3757	1443	660	4499	3672
Row 35	4097	3616	979	4599	1343	3743	3887	3657	4280	970	1699	38	3943	2248	3796	5307	654	2457	5473	3838	1037	4635	22	3550	1537	1880	5427	2179	4582	1412	5688	4839	72	1251	2617	3634	5770	2463	988	4896	1609	524	1217	282	4674	2674	3079	4762	1769
Row 36	1967	3962	2999	301	4944	807	4583	895	1612	1574	4793	4536	600	5009	1654	5475	5234	4137	3314	752	3478	4108	4958	4700	2481	4986	689	5776	3669	5897	4219	3313	5289	3543	3233	3018	5498	1076	4790	771	5307	2403	3118	4629	2440	3744	1287	2491	2635
Row 37	3182	3229	5649	2815	2703	1211	526	1531	1364	1565	3633	5639	93	5032	739	2445	2796	2856	1725	2584	5200	2760	5420	4903	4925	5856	5991	5262	2109	29	5172	558	1029	2578	3221	1267	3479	2897	430	1967	3632	3189	3165	2579	4792	1121	5709	5988	3191
Row 38	4620	2238	4000	4261	797	505	5666	1004	1676	861	2263	2212	5907	2615	3004	5056	2852	330	44	1931	14	3363	747	2808	1422	940	5531	2813	1	5398	5010	3046	16	4935	2666	3169	3428	440	4212	713	4840	533	2161	3871	5888	238	5515	3427	3254
Row 39	3218	4190	2593	707	5681	225	3770	4254	4187	2338	1557	1660	905	1123	5704	494	3706	604	4554	2445	1122	4111	905	2221	5381	3103	4276	5602	5088	3238	4498	2267	5169	5329	1637	5932	56	5887	3949	3597	5391	142	90	3552	647	4724	3407	2553	3424
Row 40	3642	5919	3610	2062	3592	1876	3933	1920	2154	573	85	1632	3624	1740	4082	1492	505	1363	1016	3022	875	2067	3237	1636	2548	36	595	2684	4163	1161	2980	37	5285	523	2355	2382	5577	5127	1892	1987	5323	1596	3494	5427	3686	2735	313	785	3561
Row 41	5780	827	2866	1107	1487	2491	1272	673	4764	775	5931	2249	1511	1902	2709	3241	1724	2282	5709	2767	5991	250	3679	4555	2373	5241	868	3407	4991	4854	3398	3612	1310	2643	5729	1686	4793	5387	2925	1793	3631	5124	4769	5480	1370	4227	107	3296	3939
Row 42	3968	1054	5963	276	403	4328	254	1152	3735	3811	1593	4261	1185	4710	3660	3610	1773	3971	3482	2062	2158	5882	3307	2541	584	3595	2566	5064	790	3489	150	1310	473	4159	1964	147	3956	1430	1763	2562	4411	466	1934	1666	2356	1449	5904	5091	5926
Row 43	2293	253	1477	244	3463	5244	277	4485	1905	1292	5886	5949	1996	5898	4923	1765	581	3023	1291	4236	330	5578	1516	264	4581	977	2660	303	486	2339	5650	515	2764	424	2985	1699	607	5975	5341	1710	3457	2729	2040	3116	1701	4160	815	4239	1077
Row 44	1786	2033	3321	2116	4967	4204	904	3115	4357	2290	3853	4170	5084	3392	5691	4645	4454	5488	4190	523	2940	1420	2921	3381	2307	1879	1626	551	5274	1282	4796	1784	3597	5871	4498	2776	1665	670	5901	1485	1319	631	868	4490	5991	1715	4305	2858	5620
Row 45	2940	3301	5266	3907	4434	5804	5894	803	1266	1176	5575	572	2298	2043	1623	181	3992	3748	1845	2898	5149	1763	4890	3181	1741	236	2696	2694	1372	3713	2564	2906	1715	3242	648	1644	3497	117	35	3184	1548	5828	4975	3624	1261	3782	816	772	369
Row 46	5697	5978	5534	2605	1554	4413	2685	2876	5123	3596	3631	524	1975	1636	1830	1743	410	5751	841	5850	1940	3118	986	2445	1489	3723	4872	3478	2889	1452	4051	5736	5835	4242	43	4092	2563	1006	2512	3312	1363	5911	4976	5772	3792	320	3369	1228	5088
Row 47	5118	811	313	4750	2743	2620	1129	5003	3397	4183	5871	160	3152	1103	2016	432	2258	1252	1115	4342	5242	4706	5625	3561	2437	1635	1280	5449	1324	3336	11	3423	1604	4058	5773	2055	74	1994	808	1830	5390	1389	3178	1900	1495	2443	1682	3646	4010
Row 48	4309	3029	3481	2838	2316	4120	3827	3432	2351	5852	5368	4425	4161	2529	2753	3043	942	5816	4598	1455	2550	5074	1928	1836	368	3905	4494	560	1909	1694	3130	1281	3134	1863	30	215	1134	1719	4148	4885	123	836	4413	4164	3261	550	4637	2005	4796
Row 49	3101	526	5402	2899	4158	4439	3862	5622	3770	3146	4861	3414	626	5958	20	914	4070	5164	3674	2662	4496	4466	542	4007	5980	5866	5690	943	2535	436	3168	1394	5562	5502	3317	1561	5723	1175	5441	3923	1294	5524	2132	5981	3641	4639	4185	1145	3139

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.