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	2727	1971	5238	4919	2251	2298	1224	4510	1834	692	2570	5803	1128	2864	1791	31	562	1660	916	3062	807	1597	1080	3472	4493	780	2889	3142	4026	1933	1897	215	331	5024	3556	273	3922	1722	2112	4881	5734	5805	5127	3478	2600	4822	2188	1644	3468
Row 1	1435	5969	2028	4881	5009	2112	588	2803	3677	4774	614	2354	3264	1039	149	309	3543	4124	2112	2495	3577	5017	3090	1977	20	1115	4896	3666	39	4689	4415	2745	5981	645	563	1920	1742	2590	2084	3654	5683	3454	695	2905	2234	3626	4441	200	4642
Row 2	741	4385	5382	3859	3958	481	5718	1939	1699	5348	326	3580	2129	2929	4969	2966	386	3216	2545	4293	5453	2740	4678	770	1321	1736	2815	2369	2417	1779	5430	4432	1614	4670	5108	878	54	2176	3381	2326	336	1593	698	3418	3578	2307	4153	4820	5870
Row 3	2668	2366	1482	2940	395	143	4267	1707	3033	4001	492	5308	4940	1561	3273	3389	5057	4367	4279	3617	3311	1803	1398	4224	3239	3019	1221	4087	5908	3389	2054	3182	3948	4993	3937	4671	4472	1541	5456	4033	4323	545	2167	3408	5240	2703	4685	5783	2981
Row 4	1710	3805	1671	2040	662	1789	5339	4464	2865	385	2802	596	4257	1112	2527	501	3876	958	286	2027	335	393	4693	3275	1319	5439	2952	2332	2584	695	2942	3183	5431	3306	4101	2248	5776	3316	1774	2802	4082	4933	3370	2575	2071	5657	1995	2795	4955
Row 5	1246	5055	174	5383	1722	3931	1798	2417	1305	752	5568	1358	1299	1768	2746	732	1327	1613	2442	2475	2196	5676	3994	4882	1516	4515	4004	3746	1590	3787	3204	2269	3694	4166	4359	1819	1639	3326	5064	3224	4743	1422	1048	4243	4731	3318	3261	3577	5807
Row 6	5005	5009	3644	4593	1673	4570	5157	2165	5600	5796	1546	4198	4745	5773	5926	1266	5285	847	2818	1202	659	4077	2718	2999	376	4130	66	1886	391	361	1521	3327	5686	1475	2922	2896	3922	5981	23	986	778	1033	2532	878	1286	3233	445	4395	331
Row 7	2838	5639	4639	3724	5406	3404	4083	1087	1737	4858	5481	3438	3295	3096	1807	5716	4696	5533	1490	2233	2449	4296	3264	1396	2514	2869	3010	1794	2624	5312	1716	2841	1259	1132	3440	617	2663	3304	4628	5918	1777	1860	729	2271	4456	5168	4719	5230	4205
Row 8	1983	2227	5546	2224	3966	410	2881	5011	1460	3083	1294	980	3907	2030	2883	2791	876	648	5820	1635	15	2903	2539	5318	2942	2684	3501	3066	4014	5565	2694	5823	2113	2260	4789	887	1850	1422	2851	2282	3804	318	4973	2112	1080	5890	421	2644	3938
Row 9	982	1433	2716	756	3363	334	2509	1624	1992	439	336	4848	757	2031	2840	4484	2547	857	1143	2977	4350	3333	2286	5398	2732	5655	754	2398	2036	432	2402	3707	2841	5994	5013	1315	3473	2402	5553	746	1029	5869	1182	531	429	5054	551	4241	5770
Row 10	812	2656	2768	4026	2924	3237	5633	2656	2861	5044	2973	4691	56	5788	1949	2093	1751	928	3865	1239	5411	2265	4419	2216	2308	41	1493	5735	83	479	4126	756	2159	5858	5681	5670	755	790	2837	2341	815	955	3996	1662	3379	5074	669	175	5757
Row 11	276	5011	4941	4106	1695	3802	5099	1318	3978	3159	2247	2629	1565	5316	4656	1006	3215	3049	2998	4665	2897	4367	5968	5338	5064	5415	5722	2753	2150	1640	874	918	233	4445	524	4706	2772	5690	3258	5022	4386	2358	8	5086	4029	5202	3188	367	3900
Row 12	4796	1010	2966	4286	2345	2379	3836	440	3019	1106	4887	2248	5994	328	5566	5315	5423	1526	4277	2373	3350	1458	5020	785	5294	1159	2540	3809	2927	2353	2169	4963	4433	1710	2952	1413	1417	1503	3375	3987	951	4417	1997	1045	1511	4710	3812	251	4216
Row 13	1552	5378	2999	5916	2822	2936	3084	879	3866	2642	3472	5292	4421	1179	3221	5408	709	3193	5769	1174	3157	3278	498	5995	1143	3399	3267	2263	5581	955	2449	5325	945	3900	5955	5198	1135	2776	484	3432	4659	4138	1730	4884	1785	3821	3166	4680	5732
Row 14	5404	659	5440	3818	1197	4566	4542	3912	4089	1477	3565	3413	2402	651	4677	4212	5547	4297	4945	4777	3891	1016	115	4743	671	197	1993	1490	5413	2180	2079	2058	3339	4757	3519	2756	4357	4852	1560	5614	1468	1367	3106	3131	3129	2160	3626	4581	495
Row 15	991	4875	321	2393	3164	3457	1238	2625	1023	5355	3248	3939	1001	400	3069	2764	657	59	5931	2574	3083	1548	5710	3887	3371	5401	2016	3733	2959	3146	1768	3240	4338	4961	4269	4631	2746	566	2797	3750	1211	3270	3160	2273	1284	2156	642	5528	46
Row 16	104	4873	666	4308	1174	2901	2636	5014	1019	1006	5561	4166	2732	2996	2364	5418	4443	140	1294	1541	5843	3657	3989	4099	4686	1307	2677	391	1809	4852	2713	1860	4714	877	527	834	862	4191	301	4253	3312	2380	993	5596	2405	2588	4365	4438	4531
Row 17	3387	2450	2117	5619	5471	4839	4699	4443	719	3646	5653	3378	5035	3651	3137	5011	4217	2633	1147	4650	3280	228	3284	1054	4154	2690	364	2030	2205	4540	4290	3068	1654	2007	3736	126	197	948	317	1141	33	1973	1719	2144	2844	5912	2880	2045	362
Row 18	1168	4627	2488	4222	702	906	565	2695	473	5053	5216	5411	663	1223	1827	3022	1570	3573	742	4200	4618	1210	621	5154	160	1674	2802	1821	826	5127	5423	133	133	2992	75	5607	3868	4799	3242	3907	5176	3724	1673	1036	1542	2749	2196	3079	3570
Row 19	1874	1027	3562	2352	5352	205	3575	3710	4450	5445	2940	73	3090	744	5259	1773	5625	2928	1244	2988	686	4361	3032	3056	3423	4995	2116	385	5345	3325	5164	2631	3822	5810	2940	2965	2579	4080	3814	3219	1779	2745	4770	2355	144	2593	2020	5675	4576
Row 20	2898	2410	5894	4646	3554	4597	2735	5217	2984	5196	5212	819	2151	825	2152	3335	4040	5193	5626	4662	5409	1717	1861	1034	2322	75	452	1189	3884	1646	5894	4375	5152	4360	3725	1645	3521	5478	372	921	3647	1274	5824	2307	5656	1457	3395	5133	2355
Row 21	5541	4473	2144	118	28	4100	3018	3230	5024	5787	1132	746	3022	1723	1527	2060	3367	516	3420	4121	453	5312	637	4565	4353	5852	2456	5294	5552	5104	4010	2252	3694	748	1071	1813	4308	2912	538	3503	1790	4095	4691	4483	1109	5871	619	1303	4151
Row 22	4899	5110	3367	4486	5603	4567	2658	2470	4138	4913	3387	5698	4962	1706	2765	2939	856	950	3076	2970	544	639	2109	5237	5208	4307	4019	3837	2966	4726	1788	1471	4424	3844	3138	5524	2527	2595	4031	5409	3595	4652	2848	1788	3737	701	5473	1748	1099
Row 23	5486	767	3378	3938	4037	671	469	1546	5496	2735	2296	554	1963	176	976	2637	1636	2890	535	5391	1188	5180	403	556	5160	1731	4509	714	4520	1790	5458	165	1683	3739	136	5264	4002	589	5265	203	1284	4751	4058	2692	3822	1804	3492	1473	2126
Row 24	862	5978	5110	3126	2654	2755	5354	3956	4267	252	293	463	1606	5838	5870	3265	4367	3808	3143	2971	315	1274	5797	4249	367	3356	4650	525	4657	1265	3803	4711	2222	2989	2271	3679	4637	5062	3907	2582	3114	1999	551	5406	2347	2994	2162	33	183
Row 25	4714	31	3700	5373	5096	4590	4199	66	3253	3194	5973	3730	5074	5567	4059	4848	277	334	4668	3256	173	4869	4268	3322	2433	2087	1497	5821	3712	1420	3721	1873	5263	5889	1085	1539	4265	2929	2515	4081	5127	4441	1588	1451	4903	1333	2712	1016	608
Row 26	3332	3824	3212	2974	3961	650	406	146	854	293	777	3865	665	1975	5031	4605	5275	4606	1089	3779	2760	4017	4797	2341	419	5141	24	1088	4349	1963	5504	5048	5817	686	4379	3219	3986	2307	1554	2709	3623	1801	3462	4692	2849	750	2554	3987	474
Row 27	5352	514	4430	4588	607	5710	5397	3039	1659	5157	3687	3964	789	5738	4339	2066	2515	4980	5818	4398	1058	4838	2415	219	1881	750	345	1759	1048	1283	5563	2977	3429	5742	2205	2632	294	4985	5653	5034	3548	890	4400	2411	4404	2859	997	4893	1514
Row 28	1208	2353	965	728	2299	68	3624	4919	4816	154	640	5044	4908	1528	5513	5469	1670	2774	360	892	5394	3609	4680	2167	4916	3470	1386	4122	3053	544	1645	4053	5143	102	4037	2150	2328	4812	1822	5220	5392	4433	4828	4088	4779	904	87	3723	2700
Row 29	5847	561	438	3325	398	293	3365	4412	1872	5289	1986	3189	5913	1350	236	969	1911	3179	3749	5943	613	1042	2798	4893	5465	658	3081	3830	3536	5455	2160	2673	294	1222	4844	2045	3250	2245	2447	5002	5101	2170	3098	2466	3645	2744	2611	2126	3493
Row 30	5688	711	3029	2892	3463	4159	5136	5804	3996	1183	5884	1900	4753	5704	4182	4282	1892	286	558	113	3268	1193	1974	4195	4110	3998	3379	3373	4717	735	4979	705	5363	3911	2134	2081	1706	4061	2570	1143	176	338	4978	3778	2674	2509	4330	3013	5715
Row 31	2558	2612	2195	3215	1376	1396	1584	3956	3802	3721	574	753	546	4873	3028	735	4414	4618	4791	4939	4707	631	2795	3707	2334	4595	2501	1645	505	53	2049	5770	5479	1825	736	4374	2771	4922	5679	3199	3987	1712	3123	5693	1953	740	729	4011	3576
Row 32	769	199	5307	3723	3057	1030	3355	2055	3116	5751	3917	1251	1732	60	3419	2637	4131	1597	3597	1090	5041	1245	4497	1987	838	923	4586	2224	3496	51	570	439	277	117	1484	2534	1275	107	4606	654	5984	4774	2897	1446	3142	3802	4836	248	2211
Row 33	5902	3021	1968	5705	3919	366	4722	5653	3442	4837	3983	1487	4632	2380	3400	2936	1196	5912	3328	2613	237	3625	4383	1308	3591	647	3959	4849	2057	950	562	5506	2332	173	5678	641	883	298	4111	3922	2041	4585	1093	3862	3642	1203	1015	3303	2849
Row 34	1546	1165	608	1498	5899	1935	3436	765	3238	3188	4313	5524	3208	5067	4630	4645	3837	2154	1531	4428	3811	5450	2162	1046	2357	313	3003	1997	1894	1813	4975	3266	329	5671	2393	258	1762	2098	4202	5713	1095	4114	5550	4074	1782	1285	4195	2316	3085
Row 35	5092	2817	1956	4199	2380	2942	1649	5137	3350	2126	2716	5450	170	1979	4786	1039	5692	704	904	5230	5362	2949	2195	1868	363	3299	420	5709	1442	5638	320	1775	2073	5839	4841	5361	557	3292	2048	4779	2155	4521	3792	127	1623	452	2708	1258	2752
Row 36	5904	29	951	509	2159	953	3073	3898	4449	5787	830	4464	2879	1929	4065	4598	3052	1573	4644	5816	1538	3926	4979	1088	4503	404	1959	3682	2642	4809	3392	1979	4917	824	568	4924	3348	587	4280	3773	2606	1477	4630	5626	4012	2925	3445	4909	5038
Row 37	5114	908	347	3684	1910	3769	3921	5445	4213	1256	3933	3161	5540	4907	686	2120	5048	806	3415	1146	5403	1263	5321	4436	3772	4842	5806	2755	162	258	3503	954	5112	5472	3200	601	1882	2488	4466	497	1787	5434	1139	177	3376	2574	743	174	2443
Row 38	65	2834	2820	4730	5449	3064	1540	4212	1539	4130	4622	3873	4624	3767	499	3672	2003	3575	3448	1543	2490	423	5375	2463	3033	1692	1343	4249	5311	3153	4110	4467	1942	3862	454	537	440	1360	3399	3188	3294	3929	4748	4264	806	5149	1225	3855	5857
Row 39	1106	5805	4219	48	5444	2380	1203	1039	3930	4009	2879	1093	5114	5422	803	2255	4426	4751	5448	1422	4550	5120	518	5272	2107	1594	18	3696	2892	72	667	5610	5912	233	445	4550	118	5402	1789	4363	2623	3008	3289	1559	4041	1937	4501	4047	5772
Row 40	2217	1593	5357	4663	1525	479	5017	932	5529	2306	2331	2875	4240	4144	5550	3191	2833	5009	1502	5512	3151	2488	3536	3354	5732	4543	4532	1479	1784	1653	776	1739	5958	3772	5030	4475	5318	1806	3256	5408	678	5820	3536	2736	3644	251	5097	5561	3695
Row 41	2720	5147	1708	2418	621	2296	5535	5275	475	5980	5886	2088	4382	457	5672	603	5755	495	4604	759	2038	769	5480	5611	3433	2677	3275	776	2946	3081	4057	251	4229	3003	2071	4117	2946	4822	5547	2621	3809	4869	2489	4508	4993	4946	111	3236	1154
Row 42	3883	302	5345	4395	1680	607	4555	5556	4206	1275	3009	6000	4055	4938	474	3754	5510	290	4155	4737	5589	2170	599	2340	2680	2355	701	2922	1842	4636	648	5746	39	5670	3351	5183	1046	4585	3324	1118	918	1801	925	370	2821	5090	5310	535	2255
Row 43	5501	403	1271	249	2791	1941	1840	1594	3626	2619	2502	2236	3229	248	2428	382	4150	4783	3661	5569	5077	3112	888	3200	1756	5520	2162	5048	4654	4783	184	2031	1043	3094	5757	2310	2039	925	5105	2863	1653	5549	5418	3540	5817	1922	2506	2122	5637
Row 44	179	5753	3744	5901	4451	2403	3610	2580	3668	3340	2360	2703	552	812	1635	1802	1864	4917	5610	970	5871	1016	2744	4805	3970	576	3662	430	517	281	4622	4788	1458	5437	5807	3037	3177	3910	2678	5552	3401	3623	2045	1395	5926	2439	2515	3508	930
Row 45	9	2290	2617	1494	3657	551	362	3251	2899	1431	9	290	5245	4894	688	3107	4204	2457	4422	2453	2730	3495	4250	4917	4544	1446	2594	5418	3587	4913	888	1459	5119	5674	4097	5114	5935	5817	3837	3768	5507	2241	3876	3430	2898	5249	630	5704	3099
Row 46	2505	4721	4025	697	2928	4542	2309	386	596	3544	3444	5400	4282	641	2237	2718	2893	1922	5052	2024	4864	4108	1133	5772	561	5328	2750	5856	2287	767	480	3829	4407	5200	2428	1623	182	4809	82	3641	5156	5581	5948	1563	1886	3837	1286	677	3416
Row 47	4636	5204	5301	3847	2058	3705	924	5409	2922	1498	4524	1906	2337	4017	4093	2157	4574	2208	2981	1524	4432	2453	773	2265	1785	4337	4710	2798	2943	1524	3160	1381	2487	2397	5178	2275	2329	1160	5635	474	203	5893	5377	5583	1503	5715	2412	1040	2196
Row 48	344	5828	4600	474	1	1598	2883	474	5562	3637	1324	5971	4956	4269	3367	2338	4505	2984	2214	1764	301	5992	2234	931	921	3884	5204	320	2051	1663	70	2541	3569	1506	323	1703	914	1837	2839	3809	3919	4351	3970	3731	2645	4684	4442	231	1242
Row 49	2866	3186	760	5387	4496	4744	1004	5137	2342	2032	3955	1375	2580	1320	933	2849	1834	1139	3358	5399	1756	734	5409	1983	2060	3988	5377	3737	3698	3307	2919	4654	4172	1812	1957	2392	2487	4077	4543	4166	1014	5046	1339	5744	1206	5913	247	3216	5246

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.