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	5293	837	4992	5601	4859	2893	1564	989	37	1558	4140	747	2948	2720	4882	1124	5061	1127	3392	2375	1430	2968	3854	3078	446	783	2714	4827	3498	4503	2084	3787	3651	4904	3487	3977	3463	445	4730	703	4862	5838	1611	3533	5397	3460	1241	5445	4566
Row 1	5160	5539	672	547	2346	226	2979	3678	2707	5183	5662	1137	3091	5213	5409	883	4736	342	5835	5578	838	1853	1705	4694	1560	3782	5849	5197	1332	329	198	3064	3823	5731	1163	3669	51	4796	5569	435	5385	1176	441	4884	512	2904	1116	65	1996
Row 2	1697	4259	4943	4453	2307	5182	539	3278	3621	2009	580	4227	4300	4805	2548	589	1074	379	4015	28	1024	2987	3374	112	3357	739	2407	5126	4846	5809	830	5014	3140	313	1973	4627	4533	4230	3313	550	5135	1800	412	3356	3181	1444	1085	1107	390
Row 3	4388	1409	3973	4843	2538	3199	3473	5175	471	4055	3833	5231	5895	4096	2916	4227	5524	631	2660	1887	3374	254	1566	18	3089	5766	1078	1154	2637	5353	3666	4654	4663	1879	5179	307	2493	4253	5184	5787	3703	1222	3877	1201	488	1299	5748	4759	2446
Row 4	4678	4433	2587	1926	5799	156	5043	2449	4022	5795	5230	5992	4690	2248	4970	1041	3671	1928	1341	522	3168	3410	3388	4692	3282	800	4201	934	5575	2940	4268	1115	3126	2167	1772	3748	2898	2867	1515	5556	3292	1555	1064	5211	3690	3359	3874	5556	2859
Row 5	5798	660	3424	2678	5273	1729	3804	386	3107	2503	1848	3025	4616	1030	510	4189	2792	5276	3759	5302	5359	5734	290	4360	1986	5616	220	5051	3244	4570	5921	3339	5680	1320	3769	840	2073	5866	1073	4993	2875	4579	5635	3874	1601	1145	3499	832	4482
Row 6	3555	5772	1366	841	1768	2684	5982	2412	3176	2384	2237	5337	4011	121	4699	1907	5712	931	4042	4346	1072	5124	2607	4673	5231	4374	4032	4612	3235	2501	913	132	1362	263	5149	2800	5644	597	3083	1525	619	5740	3948	4493	2602	3580	5728	222	3863
Row 7	5825	4942	4458	2494	555	2310	3783	1614	3246	3847	851	1445	3594	5610	4538	2264	352	3478	1979	5741	4325	291	2014	2011	2695	3732	4849	3901	237	1051	4417	3785	3502	547	5610	1698	263	3436	3133	4529	925	4985	870	2023	249	4716	5051	5545	1174
Row 8	934	4306	5308	4364	3253	2409	3706	3114	2169	3465	4011	2599	3134	3684	472	981	3030	5881	1570	5724	4054	311	4706	395	2713	2180	2938	1558	2272	170	2540	1147	5348	1284	342	561	3019	992	2256	4968	1797	2499	3206	3569	5945	2041	3055	722	375
Row 9	936	3680	3063	772	4299	4111	2682	2334	4959	3255	1337	3373	1368	2645	2409	4010	2272	4827	1326	3021	2407	5884	3430	4325	1107	1126	1679	2881	2110	2491	3712	1958	4457	5130	261	5079	5903	260	2290	1985	463	4759	735	5250	716	1351	1997	2784	4540
Row 10	5560	3107	837	5458	3254	3424	922	3692	5642	207	529	3040	1610	2529	1422	5601	3067	1047	3262	3989	4804	1528	2700	605	3626	4306	4367	4375	5959	1260	2896	4298	2813	5996	3227	5153	4194	3445	4497	4275	1036	3321	992	3881	5272	3683	299	4811	953
Row 11	1219	4709	1070	4771	867	5089	2325	3474	413	4942	984	1563	1714	3322	108	4118	4659	2692	5257	2466	4944	818	1754	3107	4249	2179	5490	5685	4232	3990	1151	5599	565	1104	132	5218	1437	5068	663	1705	5972	2975	1732	219	569	5068	5990	3323	5596
Row 12	270	4106	4027	5537	5321	938	3636	5477	2669	1265	2701	1440	5049	2395	4089	285	5435	287	1688	4478	3594	5953	1215	4587	5049	976	715	585	3013	2374	4109	2427	4959	5427	1406	29	2164	885	4253	5657	2118	4794	19	2925	1846	5915	5875	2061	5532
Row 13	5144	933	4343	5822	1000	4277	4873	1669	1282	1825	605	2089	258	2446	1348	2924	114	1291	1291	3628	1839	1882	1908	2800	5274	3555	616	4619	1723	3924	507	500	5730	5325	5431	3530	5845	5079	970	2634	203	5449	762	319	4968	4149	1460	2469	1586
Row 14	2853	1286	2888	4963	3464	4003	4476	1315	2908	1620	2438	5460	1223	4133	5678	123	564	1281	4141	295	2595	845	3082	484	1534	3204	3333	2203	1309	5804	4108	5228	4803	2301	4485	1238	3265	4043	1208	1245	148	3470	4138	3060	1820	1987	2034	1359	550
Row 15	757	3428	106	782	3201	2967	33	3499	1914	5214	5175	778	4985	2062	4107	713	913	5763	4536	2587	4174	5915	1616	3500	5333	4089	3894	2489	723	3438	2293	91	4735	4501	1388	5906	5730	96	3272	1252	1534	1946	2810	1243	4270	346	2755	3217	549
Row 16	1383	42	4249	4690	3354	5579	3490	4369	3871	3803	979	2548	5331	834	1635	5065	1720	2063	4630	2322	5068	4187	2964	5910	2912	807	2062	1350	1303	5328	3693	5334	1687	646	5125	1536	2382	5938	2327	2326	79	4060	761	5485	2160	2153	2695	539	142
Row 17	3415	4911	2386	2341	3201	1038	2006	1916	1008	2719	2462	2319	5355	4363	3181	220	236	3700	1588	4674	1175	1994	20	5617	5127	3488	5714	1154	530	5347	5677	3121	5110	4836	2306	1427	1518	27	1935	3541	5239	4940	5039	2484	1777	1642	415	4857	1723
Row 18	4825	807	4584	2642	877	704	2446	3964	849	1845	2427	2229	2917	4206	743	197	5628	3302	4316	617	5531	4231	5855	959	972	3381	1648	4108	2702	3049	3871	1422	195	3264	2546	214	1610	3775	3881	479	107	736	131	41	5535	4583	199	5958	618
Row 19	2327	4323	4892	616	2381	4369	175	1306	2385	2783	2881	1514	3946	32	3884	1400	5646	4626	5474	3665	2397	5307	1715	226	5942	1265	1424	2134	847	3453	2521	3615	2692	1105	3014	2163	4868	1594	5786	4939	4217	4014	516	1563	3414	1203	4970	1368	3847
Row 20	698	685	323	4872	2241	331	3136	4825	4609	4598	4956	3705	2027	5718	1700	5654	4451	2468	2288	3000	1505	3718	1476	3269	5664	1233	2645	2701	3848	2755	99	5590	5751	3613	1413	328	968	48	2446	235	5802	5682	2479	562	1428	1709	982	5870	4288
Row 21	739	2273	5301	933	3979	5362	859	5303	1795	4744	4681	3841	1239	1084	31	3516	1329	5867	5063	3187	1560	4467	1614	2275	1896	2230	329	577	5405	619	604	5572	5515	693	1295	1073	2403	2026	1307	4535	2650	1630	1356	3859	1095	1300	1633	3223	3094
Row 22	679	5822	3457	1607	3515	3109	1033	5805	5978	1309	1	1590	2262	3126	5442	716	3533	5438	5660	2850	2507	2690	2889	2052	3369	3260	2917	831	4879	3868	363	90	2957	3177	2775	2884	4858	6000	3444	4694	5592	1563	4165	1434	2977	2691	4878	3319	3133
Row 23	568	3548	3119	4089	5618	491	5042	4029	5537	793	4107	3947	1036	2411	5149	3834	1734	4217	589	770	2805	3046	2676	5592	4764	2618	4742	1035	3590	2852	5717	5761	2869	3686	1284	3005	3806	4128	4516	484	795	5605	5168	5440	1077	5898	2863	413	3526
Row 24	1436	2208	2720	3792	3606	4972	3208	716	1725	4141	3238	2646	4974	5396	5269	3419	920	5455	2778	401	1721	1759	4255	4680	5604	3454	623	5225	5887	2381	636	3639	4208	3267	1294	3899	4722	3279	4987	3267	772	144	2229	2763	1063	4355	2936	4848	2399
Row 25	2456	1985	2528	5721	4441	3272	750	2327	3037	2858	269	1261	4979	2473	2657	1654	4491	371	1953	4512	1927	5301	609	4872	4588	2035	1520	176	730	3304	4624	5855	190	4310	3007	498	1928	4437	1350	2800	5595	818	4733	5613	5276	4152	2285	327	5249
Row 26	5587	2063	3532	5110	5836	5513	4668	5955	3069	492	899	791	4008	1976	5707	3118	2727	5584	2545	4089	200	4555	1648	5927	5470	5153	3965	333	3675	3587	1074	3401	4630	2760	1226	5020	1780	2592	512	2652	1944	2603	1368	4040	98	939	5998	2586	2309
Row 27	3717	1500	889	2000	627	1086	3187	5583	3879	2980	1766	1022	2857	3037	1705	4252	3226	3440	497	595	4850	2012	3108	2431	2538	5491	3717	568	2544	344	5115	5950	4022	1277	4271	2582	2789	519	801	2261	384	5324	1033	2788	4121	2160	4306	3874	396
Row 28	3172	4598	1204	4681	5691	3907	318	722	1844	1609	242	2026	3967	86	3645	4249	424	5871	1783	5884	5646	396	4024	4780	1240	4163	4511	4896	4698	5205	5662	2556	1117	2192	5879	5740	2328	5105	5634	5940	4900	3876	1258	4305	5839	2745	2551	5971	4354
Row 29	4466	5041	4336	5362	5942	3047	2365	4986	5994	5376	4125	1814	174	1451	972	5580	1441	162	2113	211	1167	3659	3536	5983	171	4258	2920	4266	757	1820	4052	3516	3199	1768	665	3638	1234	2828	5141	5552	2029	2245	1204	2472	3438	1080	1436	2684	3574
Row 30	2850	429	2137	4225	1489	1510	998	4554	78	4589	3435	5244	4710	5120	4741	5748	5209	2767	4051	2991	440	1766	2089	5175	3151	4747	3533	5978	4316	781	3741	5569	4897	4830	3371	5721	2692	2342	3509	808	1651	2380	1664	1196	1610	376	3904	5930	1875
Row 31	4213	2908	2892	4283	4665	4817	1768	4290	1732	2740	3251	293	2024	425	2073	3069	4362	788	3954	1587	2430	5834	2144	2360	355	1530	454	4101	5868	4061	5279	624	4067	2150	923	1333	1192	2141	3239	1059	31	245	2545	2006	5319	5949	5775	2964	4139
Row 32	3607	3932	3227	2357	300	4284	5592	5809	3556	3715	4262	104	4096	3021	5724	4772	4819	5840	1957	2737	4851	4118	632	3729	1506	2560	5725	243	2463	3590	1798	3694	2417	5426	2866	3374	5742	960	2942	2989	1167	1552	4363	1984	5089	493	2196	4127	39
Row 33	4208	3531	4385	5116	5460	5627	2165	4074	4506	2522	5915	3509	3779	2943	3582	5491	3614	1649	1012	2489	3252	621	448	333	660	1821	3126	5043	986	5394	1662	2568	2430	1883	611	5842	1375	750	1939	5092	735	748	3199	3634	5279	4878	1906	2044	2244
Row 34	1183	1497	1378	5665	3335	4859	5396	3969	2147	3301	3078	3387	2759	4699	943	565	5137	3779	3017	2919	5988	5951	5893	5010	733	247	324	3722	5381	1579	2022	3503	5313	3401	5865	4798	3971	1643	4102	3887	5813	2040	5859	5909	3996	5370	1427	4468	1073
Row 35	2100	4120	4692	5304	4080	880	5168	3803	2265	904	3170	2168	3059	4699	1234	1271	2966	4488	3129	483	4889	4122	2203	5343	1015	4828	4771	2241	5532	5014	983	4779	2182	3500	1923	2902	5644	378	4240	1340	2381	213	2903	2201	2941	4323	1500	1722	4132
Row 36	5683	1584	1939	829	3330	5191	4916	5268	4020	47	4493	2246	3346	5940	226	4351	1882	5358	4065	4842	1501	98	470	5582	6000	2369	4764	1753	2985	5764	1319	1390	340	3090	343	3118	1656	3526	3126	778	3494	3621	1916	5313	632	4599	3748	5415	1970
Row 37	5598	737	3974	161	5696	4870	2128	3840	307	1011	3524	4314	4013	5528	2697	5154	3685	439	3579	499	1808	2223	3710	2450	2801	731	1269	4409	3946	5456	1324	167	5363	4308	5120	2007	3244	2874	5397	2100	5355	5778	1213	5049	3586	4038	3879	3567	5867
Row 38	4351	4718	5594	3727	4591	2789	2125	381	3766	5558	2270	3854	1026	146	1452	2719	5619	3302	2856	783	4097	4550	4458	4557	2560	1271	4861	4525	5663	3410	1542	1305	2124	4496	1055	4145	3385	571	804	1093	2304	3556	3627	5542	3032	3879	5844	5394	5967
Row 39	1700	5311	3087	2714	699	1497	7	4363	4713	952	2468	3884	3056	106	3098	1876	5446	3050	1738	4458	649	4049	2265	3824	5845	1486	993	4143	483	436	2941	397	5608	463	3853	2182	4357	2756	4367	5976	5411	2700	3379	2200	4871	3848	3672	2326	1265
Row 40	4947	7	995	1326	1676	1404	5611	1223	2892	3318	422	5960	1335	983	5128	336	718	2187	1514	5203	1260	2677	3150	5425	5275	887	90	266	2719	5548	1672	4587	2653	2809	734	838	5189	5429	4624	1424	401	1208	459	4779	610	5188	1592	702	4526
Row 41	2623	4847	591	3438	3019	2891	1235	3004	3973	5940	1735	512	2513	528	5252	272	5013	5837	960	2390	1975	4433	239	256	2704	1283	5461	5020	5079	2140	160	4678	129	5907	3134	3226	1687	5883	5894	1160	236	4219	5706	3275	105	5454	3063	1598	5309
Row 42	1322	1548	1442	5810	5188	4661	1759	3732	5125	5532	712	5637	109	652	4120	895	5400	2590	4669	4692	5052	1884	1096	3275	3732	3767	5906	1707	1422	3080	132	4353	5979	4163	1523	5868	130	2917	1321	4854	4521	4935	2166	1530	4312	222	3545	4878	4103
Row 43	5271	5525	5173	191	3194	5334	4425	5433	3790	5079	5216	692	2709	2570	4796	3034	1449	5513	63	4347	4799	3151	5383	3967	3123	2098	255	1612	4093	3010	3727	381	364	1601	3679	4071	3854	5771	4601	711	499	187	554	5964	5428	4368	5129	1771	4309
Row 44	2425	111	678	964	4085	256	4622	554	4635	4610	950	2739	829	1766	3208	1069	4740	710	1875	5694	4880	2672	4430	5314	71	4615	4578	5716	5267	1861	4299	747	4709	4233	4514	3254	3345	1897	4940	4487	380	1399	2448	2917	2638	234	4950	2729	2325
Row 45	4322	3432	1170	1590	4487	2655	1169	3530	3329	4561	2550	4809	2124	2968	2149	2462	4809	1998	1159	2597	884	2216	5183	2477	2308	6	1990	2070	890	5759	1151	630	5621	788	2500	874	5967	4251	1984	5029	3884	598	3894	4418	3568	4378	3363	3663	4483
Row 46	5355	1891	4571	3975	1204	349	5863	1325	752	4104	4395	1431	5826	2544	2574	5788	482	1556	3192	3532	5147	1921	904	3491	809	2794	581	3919	5280	2921	4644	4192	5344	2563	1371	3282	1766	1636	2069	5176	2029	4725	1468	4739	3271	5271	300	61	4760
Row 47	1006	5037	1769	1141	2919	533	4047	4964	1113	5255	2321	4617	2115	3426	2343	632	4547	158	1784	3097	2147	2529	1765	3900	117	2753	1768	4740	1455	2028	2537	3241	5080	4681	14	4535	4496	3052	3300	1307	2821	969	3481	991	1725	519	5955	4256	5781
Row 48	5104	764	266	2900	4240	2398	5901	2687	4278	4144	245	3889	3439	3855	3372	847	4037	2414	5069	745	2151	4160	1755	3251	340	139	2162	4679	2433	366	259	962	110	4604	5333	4632	3473	2596	4982	1123	4822	438	1779	2954	4525	1868	3716	549	4070
Row 49	1606	2512	2279	2374	2858	4248	4494	4008	3953	3903	5847	2561	2147	1596	1138	5306	516	4776	5651	4768	5690	2162	619	1035	5595	1994	1661	1939	2373	2691	4663	1295	3873	1095	839	2272	3125	3834	3972	4175	4518	644	360	5069	335	1701	5344	5789	2985

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.