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	4953	5929	2152	939	1190	2380	4185	2327	2227	4241	4963	5383	2110	4359	4705	2387	2893	3831	3313	5704	3867	2323	4125	3389	3627	1886	2766	1489	2573	103	2783	5913	2819	656	5495	5830	3382	373	2011	61	2859	50	3617	4266	5000	5171	922	671	3544
Row 1	3531	4372	1759	2227	765	5691	77	51	3866	5696	2702	1782	1372	2737	5732	5107	4151	256	1320	1720	5923	366	1707	3523	4657	1969	3432	1891	4715	1189	5226	3640	2381	4285	641	614	1503	2098	4193	2056	82	2913	4887	104	149	4590	4916	2547	5468
Row 2	2574	3791	3921	26	4356	5447	1529	828	4021	3863	2407	4437	3667	5711	504	5062	4963	1493	5311	3830	1169	1730	2295	2643	1827	4690	334	5296	3070	4724	2947	3696	3000	3485	1240	848	5942	5176	969	2320	1468	3638	3936	2409	3325	1446	1299	3021	2240
Row 3	5487	3675	3828	4400	5146	5000	1102	4735	5909	4396	5599	2382	3687	787	3026	5320	2921	2022	2566	101	5791	2221	2092	4989	5133	1327	3971	612	3600	2725	374	3044	635	3697	417	2335	1651	4201	5154	5183	5186	3532	3902	883	5255	1116	3919	936	210
Row 4	1233	4205	1673	110	2085	4113	2340	1371	2876	578	3401	1004	3627	3235	3472	5607	204	982	1752	5205	3918	5941	4723	2255	2062	1650	5169	375	5899	3689	5268	248	4290	3703	5070	5230	1427	4985	4854	1746	1016	874	3653	1015	5968	1595	4653	4561	3769
Row 5	2162	1535	4759	5907	5777	5023	5836	1022	3434	715	417	5200	5005	265	2138	5405	5768	2605	5796	275	268	4962	1182	511	1348	5177	901	4568	2802	433	1820	2646	4228	280	2830	2114	1567	5176	1717	5678	2375	839	1840	4267	5298	4039	2263	5918	4718
Row 6	4275	14	1149	5796	957	4025	3471	3404	1713	1627	1604	3060	3774	629	1639	978	350	5286	1107	3240	5878	4180	4135	2930	5078	1634	3635	3182	2469	4068	4294	2709	3832	1	79	5591	4244	1036	4896	4219	5979	5384	1972	5669	5259	5607	5117	4146	2990
Row 7	2616	3816	2083	4968	5907	5532	2181	2077	952	5007	5129	4404	4804	4900	1099	3703	5907	3575	3655	5859	5551	149	5115	1737	3446	2079	5978	1911	5816	5686	3347	5770	1158	1248	5461	5151	2720	3848	1261	4946	1349	3256	1892	1490	5759	883	3592	4870	4770
Row 8	1883	5837	3974	4484	5751	3515	3904	3240	3523	5937	2989	2652	3411	1818	4389	5712	2885	975	735	4635	3231	2973	1082	471	2904	4336	754	4936	5951	1763	119	3503	5144	564	5621	4770	4706	1464	3786	4578	2750	246	4046	431	3628	5896	3200	5569	2110
Row 9	1911	392	290	1535	4788	3880	2413	4071	365	3079	726	5036	577	5882	5664	86	5670	5774	39	5826	5557	417	1403	3016	5988	2379	3050	5400	1355	5273	2846	977	4793	4542	92	2125	1471	552	3270	1569	1301	3587	5264	4503	2930	2758	5207	711	3869
Row 10	3206	3481	1217	3018	241	5578	770	318	4966	5145	5620	2287	4452	3843	2810	5639	3974	878	4987	2402	1571	4174	5084	2884	891	2271	486	1460	102	5295	1157	4976	4192	2340	5699	716	5717	3521	4694	151	4933	3018	4203	3284	2234	511	4563	4360	5942
Row 11	5322	1847	3850	1005	5279	3743	1618	1318	1509	3305	925	1344	1884	2610	4894	3327	1002	143	5895	5426	3091	1093	5610	736	2606	1051	2120	4638	3962	5707	4518	1550	352	3594	3598	5373	4106	3179	671	525	1338	5523	253	3131	3923	1102	3782	4084	1813
Row 12	533	3059	5565	806	2905	2970	5536	3340	1503	4512	4574	4949	874	5187	2780	2598	283	50	5452	74	751	1648	2086	3757	2958	3527	431	864	3532	4225	5508	1927	1593	1354	5390	2792	136	130	4122	4234	441	1111	2471	3652	5845	2437	2536	903	1532
Row 13	5132	4419	5028	3368	4541	3344	1637	787	181	5283	3032	5048	3448	1180	1114	220	5289	3550	4217	3916	1165	1369	3521	3400	5504	5011	275	66	3505	2549	4360	3116	2589	3688	3450	2745	809	3375	5053	4149	4839	2438	1069	1523	1391	213	5839	185	1100
Row 14	2655	1546	396	5434	1950	5382	2684	4436	4729	5866	2228	2371	1173	1532	5976	649	3687	4531	4851	3092	3823	4790	3773	919	283	5879	5867	740	1055	3638	3993	4165	2851	2960	3984	3667	149	578	942	4258	2812	3405	2042	3053	4354	113	3484	5871	98
Row 15	5645	1546	3977	255	198	4592	2839	5061	5970	5022	951	5817	3524	4604	964	2498	1209	2129	5860	5080	2587	1762	1364	4244	4263	1172	3495	1644	5034	4237	2608	1419	2494	182	3051	2261	2574	455	5820	2732	2407	4615	1692	81	1006	5580	1753	4818	4155
Row 16	1893	5288	102	4456	5172	3487	1717	4969	3142	506	2736	3098	1106	5770	2266	1579	5207	4147	5409	4266	2780	1790	1162	5627	4544	2142	4480	3134	3160	3343	319	1465	1027	5842	3244	136	3473	4937	5558	429	5458	5051	1747	1934	1280	2597	3808	2971	5232
Row 17	2552	4424	4983	2480	3644	3806	217	4824	3944	1935	958	2909	3739	4001	333	3274	2077	4791	1807	4032	4179	5600	3859	1475	5753	3547	4134	1868	5128	4290	733	1714	4757	1766	2961	5647	5144	2921	2682	5881	381	2499	4028	4011	365	5432	3755	1600	4567
Row 18	2056	599	879	2812	3610	1395	4938	4133	1544	5335	3238	5398	766	2230	3592	2145	5190	4229	3252	3513	5712	524	2263	366	1254	3919	5183	4921	1478	5709	5815	4930	2149	5538	1798	387	3354	3928	86	5028	1411	2104	2472	4886	5626	3776	3080	4673	5411
Row 19	2395	917	4359	2316	1877	2893	5225	4361	950	3085	3606	5106	4644	5158	276	5143	5020	5987	3566	1226	4183	5066	396	2309	2111	46	4950	1633	5615	4500	1546	733	4928	1885	3123	5773	3721	2336	5301	4227	1502	4011	5745	1871	866	5609	1153	1742	4691
Row 20	3349	1632	4713	4256	3706	5079	802	890	4021	4938	4287	5730	3818	3664	3462	1498	1598	2839	4834	646	4574	4894	4319	1560	1614	5715	730	2363	3281	5843	1449	5049	5355	4817	720	3068	5978	3481	3714	2115	719	5503	1436	3895	2394	2155	903	34	4004
Row 21	3927	1666	4857	5024	1992	4667	4150	1117	2517	547	2765	5252	4849	519	175	2262	5813	5164	290	142	4513	1659	6000	4673	1545	516	775	226	1297	368	2110	5484	5847	5588	1983	5682	232	1578	5630	1219	2063	4622	5708	2885	4872	2462	4075	269	3997
Row 22	3685	5793	1128	3482	5562	3822	1842	5313	2219	2852	902	4395	3198	5292	2038	1125	2698	3168	5897	5369	4391	5740	1927	5406	5399	4975	590	4481	5504	157	3939	5670	2229	4901	5666	596	5948	442	1768	4552	75	382	1124	4485	4245	3219	4733	4429	3563
Row 23	634	5395	4853	4620	4347	5155	2076	1371	3627	920	2055	383	2655	362	650	5891	242	3189	4091	195	4894	4414	3006	3042	4489	1667	830	329	2343	1288	3664	257	3399	5868	4786	5202	4168	4863	1004	2481	3676	614	2009	5000	4078	5228	5934	3247	1722
Row 24	1459	4545	5034	5645	2478	3838	1312	4794	5989	1661	4556	3311	861	4085	2886	710	40	759	4546	5395	3035	1017	4489	2768	873	1413	2967	3079	830	4276	103	3166	3902	4107	1964	4239	1045	2527	4327	1872	3985	4238	599	2681	1131	4605	4534	1415	4833
Row 25	4881	207	2347	5083	1905	5228	1342	4699	3949	3829	2583	3581	3346	4376	2363	5772	730	3453	78	3886	3624	4895	803	2481	4790	4961	3240	2814	3847	961	1310	3455	2787	4584	1079	277	5064	5815	1803	789	4502	4431	4337	2395	3941	4468	5296	5162	677
Row 26	1150	5396	1715	4121	3191	4420	1356	112	5782	2282	3869	2381	5489	1134	1329	3487	3264	4873	540	4371	1966	596	4447	1022	5654	5566	2776	1703	751	5659	1527	2271	5181	5678	3663	2617	4214	4534	686	4734	3994	603	4484	5019	2005	4249	5465	921	39
Row 27	940	3518	449	2011	4468	3317	3027	1224	2340	1275	4684	4465	5886	5912	968	3453	2970	3471	3751	813	5771	5102	853	4417	3052	2409	2506	5864	694	825	3062	4986	5298	3746	859	4750	32	3707	5011	19	4595	4242	4687	3049	1552	5331	659	1217	4245
Row 28	868	2935	3066	2969	4065	251	967	1540	248	3784	654	5475	5092	239	2118	2413	664	3269	4960	5149	2522	514	2708	5244	2705	1611	1604	4020	351	979	4667	1637	2860	2892	2610	210	6	3159	5548	2910	3816	5055	4541	1199	2735	1794	4596	1829	4625
Row 29	3456	2254	3114	1827	253	2509	3599	2404	5747	3678	998	2241	4102	480	778	4134	2093	35	4679	5534	2209	525	2706	304	2310	4463	1516	564	836	5668	2411	863	5760	1623	2078	5122	5472	5613	5539	674	2073	3678	389	4956	5324	4704	4545	453	5978
Row 30	743	292	520	5990	591	391	1753	1285	1394	5433	3606	4705	5270	3502	2666	3887	3841	5819	1101	235	2168	1945	5538	5903	3546	2199	2314	5500	1525	5605	5170	949	2041	750	5872	5087	3764	5939	3093	4350	2594	612	2022	1143	3163	669	2290	2411	637
Row 31	3318	3627	2317	5225	3060	5535	2864	1136	4447	106	5023	1857	5617	3450	3432	4661	4902	4447	1893	2598	3263	4893	2594	1009	2857	5007	3868	4796	1284	859	4009	3660	2093	933	3776	4296	3456	3994	904	1333	4631	2721	1254	4199	403	3776	2147	1356	2325
Row 32	5876	959	2089	5968	3526	3848	1648	3713	5293	41	2547	3209	3843	4439	5003	5567	1362	5009	346	4427	7	1347	1481	3479	3633	2842	261	3108	147	3381	5203	4142	1589	3945	2684	255	2276	1870	4705	2551	2074	1654	2032	2582	2593	2984	2763	4825	5886
Row 33	518	5012	3505	2946	2569	1790	5434	5835	4580	1970	337	5782	5502	1456	1980	3049	3219	1558	2687	4763	5050	3687	4587	5715	4357	257	2797	2629	1441	1626	5792	3670	590	4216	4754	354	1014	243	5850	4232	2770	5720	3429	4652	3450	5132	2296	3674	4648
Row 34	4300	5419	5624	178	93	3197	4587	3442	4063	5069	4720	5877	5013	5867	3811	1414	400	4689	1056	2210	3289	3709	3062	12	5991	1534	105	2741	2993	3885	2143	1895	4378	2996	3918	590	4964	2933	3174	4110	554	1905	1882	3244	1044	1091	5935	676	3430
Row 35	5647	255	1277	5117	3710	5322	5381	4807	2293	1060	833	3830	3584	5726	361	1596	841	643	5444	3971	2111	2157	3219	426	1776	4011	5364	1709	919	2373	3850	4449	4782	5209	561	4366	2141	2910	52	3090	5145	159	2126	4877	4089	1396	5858	4041	4101
Row 36	5622	2281	3147	4790	4472	4307	1293	1029	123	1221	1151	135	5750	2056	4626	5244	5032	4282	2945	775	2557	1436	93	2287	5694	3939	5924	2967	629	4565	3042	2431	5924	2340	1366	5145	1554	4672	1581	2128	2929	4925	3847	4924	3543	192	1557	5641	5395
Row 37	2165	4379	4783	887	1087	4518	5006	2570	3940	2465	1280	1665	1533	1212	4707	100	4709	5321	4184	491	4947	1837	1531	1094	1125	184	5930	1083	4070	5451	820	3429	3402	5462	2218	5832	971	3653	4328	3148	5760	4111	3489	1810	5248	5767	3712	778	560
Row 38	4715	3107	611	1554	3907	4901	2430	3538	3552	1284	4181	3033	1184	1161	3073	1863	3995	4297	4096	170	5738	1866	4059	2340	2367	1141	1292	4584	4652	1983	876	2596	2011	800	4898	4286	5083	5084	905	1234	492	1151	3264	2402	2608	3208	4554	5403	2947
Row 39	5479	4259	1018	4987	3135	1902	2235	3375	242	1939	2243	2864	598	383	4170	794	742	2999	681	4511	179	3134	5557	4787	931	1902	4130	2981	5017	684	2347	1341	1169	4870	5279	2060	814	5505	4325	2626	5467	326	1478	3086	410	1874	2761	5466	2371
Row 40	4935	4156	1208	3334	2025	518	2579	821	2031	2756	399	1454	918	802	159	4461	4402	226	4888	3712	924	1538	1187	1551	2085	3956	5463	1956	3218	1729	1573	1091	5116	2095	1129	3668	1627	4137	1582	3069	2204	2159	1154	5734	5514	2729	5625	5333	377
Row 41	1248	1148	5801	5357	2824	789	1835	879	72	3353	2366	5323	2921	3552	1872	5255	4623	4819	2698	2312	2409	2517	5492	5437	998	3842	3277	2828	5836	1458	4653	5920	2645	134	5177	533	5019	3757	669	3974	2216	3411	982	4998	4646	2610	4621	5357	5805
Row 42	3507	5723	1004	749	1713	1107	283	5348	4755	3915	4884	4689	1082	2705	4443	2699	1691	3962	4388	742	2922	1265	201	5973	4606	705	2949	476	2115	4011	783	3058	2924	3725	1559	4577	4564	172	216	787	4189	3761	2284	5335	3415	5171	5294	3128	4699
Row 43	2703	3285	2576	355	4129	1327	3489	3242	2080	746	2540	4131	1605	2908	5339	316	5157	531	1085	5803	5199	3032	4522	872	5673	4435	3992	4746	3740	2033	5209	1213	1638	326	2084	5102	3347	4733	5941	3535	2796	4814	5215	3312	3119	4183	5157	1593	4864
Row 44	3424	2231	1794	5825	5889	2160	5248	3148	1964	2307	2441	3173	2621	1914	1311	5490	1838	2814	577	4199	948	2929	4753	5946	5363	3365	1842	1606	3691	1355	2819	5855	5716	2710	1587	4572	2577	4558	4197	4159	5752	2395	5628	5040	2958	1959	1273	812	2032
Row 45	4108	1215	697	4486	146	4438	896	1108	864	3295	5648	2203	3368	4116	5618	3311	5710	698	133	78	3607	2061	487	3397	3792	2716	5326	5275	2182	3260	4064	1178	3897	5614	2359	5758	3907	4241	1728	3061	4964	652	3931	181	3240	1057	565	2096	304
Row 46	1040	4724	3831	2559	4342	3415	160	2105	2251	5737	3321	3877	3544	473	4953	1189	1252	2943	5891	5203	2523	4221	4909	1886	253	1922	2269	2761	1918	4288	5743	2286	503	1381	3821	1692	2069	5498	180	4218	4987	4450	4415	2206	3168	3274	4571	2566	5242
Row 47	5593	5119	820	5038	1182	2895	3334	280	624	2188	4680	3544	2891	4917	5385	5469	2041	2634	83	2595	1875	3203	18	3550	4652	2377	2534	3912	4122	5067	2326	2703	5565	4916	607	573	5549	1840	4151	5375	3470	3672	1	3682	2394	1483	2202	5328	2599
Row 48	2496	5877	4352	2833	2409	1468	1026	4627	5592	3416	2004	2190	4693	3653	4884	4790	892	4921	4129	1718	5403	3573	4924	5709	5050	1474	3061	4036	1917	109	1705	4864	515	3661	3092	736	1808	3935	2020	3751	5761	5166	5000	5475	2949	4482	3778	1149	2033
Row 49	2910	4384	4975	3272	2129	4134	3016	4620	5787	3219	5626	3829	296	1188	5762	1634	5497	581	3417	4336	2981	2541	4015	3713	1022	3422	3124	5372	2181	1534	34	1064	1450	5471	5068	5678	3419	3143	3703	3802	600	5481	4365	1714	1307	1533	2511	485	2182

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.