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	204	2971	4959	2004	2835	1961	1501	2674	772	1794	1774	3014	3975	5733	4642	2802	522	243	449	5344	5070	2522	186	1760	3153	5699	412	5784	4459	1052	1290	1468	5317	5626	5065	4269	1944	362	1395	137	3585	1412	695	5133	800	3375	197	2477	497
Row 1	3545	5544	2024	974	5286	3282	1936	1359	3677	2132	627	4961	673	3279	4191	603	2258	1685	1345	302	2304	769	1478	117	5231	931	5923	5592	531	4100	3349	1404	2257	5847	2170	1340	5038	4352	3124	582	928	4873	4057	5171	2709	5602	483	4107	5596
Row 2	5782	3542	5132	690	246	2892	4395	4549	3103	2336	1236	532	1367	4632	3343	5276	4213	3112	5800	4006	2381	1783	822	3924	12	659	2121	2234	424	152	2422	388	4868	4702	4881	4360	3687	1252	1893	5032	5767	914	3588	727	5423	561	2826	729	3259
Row 3	5204	742	2750	923	3187	2273	3605	5316	3318	5149	3688	5802	1817	392	1870	5784	4907	2493	3332	4532	5678	2821	1272	1260	600	4340	4038	5712	3621	139	2850	4667	139	1008	3429	3091	1006	942	1299	1773	1305	3681	1313	1744	4336	5682	3579	3130	2653
Row 4	3699	4610	5976	5164	2764	3084	1404	3969	5580	1323	56	2444	5144	3640	5281	1063	4154	142	432	2710	93	5773	5366	4815	3734	1713	2797	5510	24	4109	5106	4625	3657	3560	4099	2954	4519	967	1927	151	1668	2376	5236	5994	1639	1220	4145	3016	5222
Row 5	2552	1211	5662	1588	5411	4701	3555	5366	332	4919	5328	794	570	5951	1345	5128	3422	5371	1406	843	2899	1094	4252	5733	4348	3314	3506	4955	616	3238	979	291	1211	5205	3767	2075	2320	3211	5454	2570	1371	3297	5312	4759	1673	2268	4420	2303	1523
Row 6	1782	2690	1628	3103	803	4359	1161	1885	173	2416	1945	1678	406	4338	2916	5184	356	5821	1243	220	5362	2645	1367	4372	483	342	1554	1633	173	1941	3004	2596	5951	2476	3611	2372	4383	137	4678	837	5878	2178	1356	3572	4788	2959	3080	407	3363
Row 7	4985	3450	401	2050	4481	1864	3048	519	3011	5534	5260	1464	1932	743	5329	2993	2934	6000	5408	765	5695	5846	1699	5587	3355	3828	4681	2950	1700	1095	1789	4939	877	2971	2685	5053	3264	1704	4517	5579	2713	1453	684	3062	1025	3858	5681	3724	1105
Row 8	3560	3893	3073	5852	5977	101	5321	2340	651	4348	4383	4801	2645	3320	3239	2185	4660	1542	3786	850	1515	1751	980	5734	5202	3012	896	3915	4853	3657	5800	2447	3242	2871	1762	4703	5817	271	4840	2112	2768	1336	239	389	2884	5602	4097	4884	1357
Row 9	4396	1343	142	3386	2493	4814	5624	5897	4827	12	3559	5673	4098	2733	2735	3452	4454	5243	5020	3542	2849	898	3204	1861	1647	3818	962	2693	2742	4938	5741	2439	683	4092	388	4504	2409	5187	5127	5714	5852	2533	5166	5842	1408	5584	3443	2389	1366
Row 10	1642	2527	5257	4966	30	2676	2335	1504	4815	4181	2363	3504	1844	1898	1186	3817	1337	1784	4809	5086	1361	2309	5896	3857	5606	268	2809	1042	862	5720	1848	4955	4769	5643	3730	4143	576	1844	4663	1493	4940	516	1832	3194	2320	1146	1742	2413	5874
Row 11	3712	2429	5893	2253	2897	310	3293	2044	5168	1022	1921	5423	687	2042	207	4024	946	787	1233	1178	3152	1881	725	5071	5078	5591	3818	3238	4065	3206	4314	2976	5066	2987	1172	1561	1821	812	2493	3118	5150	5494	4909	5650	389	3638	1123	3381	5493
Row 12	5883	3388	5173	2885	1229	2672	3135	3401	1546	2027	4053	4373	5865	630	422	3243	909	2433	1661	4265	1314	870	2958	3687	5810	4131	5765	2452	5694	244	3561	269	5582	3655	2600	247	4549	3472	3125	3791	1598	5838	5823	4552	2866	360	1737	5411	1549
Row 13	4369	3135	2136	5401	3135	3933	3687	3966	1991	2021	2545	5408	2261	1212	5024	5848	4269	4411	2335	4833	3490	4707	4567	5645	490	1692	2718	42	532	2301	2576	5492	4517	3996	2291	79	39	60	5706	5948	323	1893	1253	1583	4991	355	4911	5896	1358
Row 14	5047	2333	5214	4702	1294	5157	5966	2018	5656	2518	3922	156	1502	5396	1316	2581	2711	2664	1042	681	1584	4131	3857	810	3546	1726	3646	791	3679	4783	2159	2783	278	4250	2895	45	949	3850	5742	5689	500	2428	5404	5990	3633	2594	5288	153	4321
Row 15	4890	4669	2796	4287	1947	449	3497	272	4962	134	4366	236	3572	1704	2487	3801	255	5996	2006	5209	218	2548	3320	1901	881	3749	2240	214	924	5481	5210	1050	2677	792	4735	5661	678	165	5951	3201	619	2267	2583	1967	2403	3987	2859	3957	1633
Row 16	4295	5159	1652	3682	4136	831	2907	791	1317	3998	3490	963	4936	1608	2564	2903	5545	3351	3033	5159	5982	4125	4886	3650	5546	1420	24	2002	5236	4598	2789	2380	1492	2279	861	921	5576	3828	2046	4362	1664	5242	1665	4348	4768	5135	2063	3722	314
Row 17	4341	656	4824	5905	1806	335	1438	3480	4132	340	5845	4274	2824	3087	3314	549	2491	3323	4597	3493	4716	2081	160	597	4081	3596	4947	1630	2174	4134	1429	932	5350	4998	5563	2947	5368	740	4949	2507	1026	484	4702	2355	641	938	5516	4207	212
Row 18	5464	2379	4709	2898	4646	5721	922	3952	4190	4539	269	388	4393	5929	1477	2134	4749	547	4651	4319	1401	2863	3185	2235	437	4184	3922	156	1142	1246	5405	190	1283	1126	1324	5882	44	3856	5188	5625	1144	388	2202	2734	1322	2865	400	306	1321
Row 19	970	5586	3445	5317	2826	2646	1711	5975	1884	2841	291	1969	2795	5537	4783	663	4662	937	5520	5716	2948	3582	5360	3234	4938	3313	2257	2768	2852	2286	3155	1910	1092	5126	685	4019	2664	3672	2961	2294	2373	2037	5020	4294	1660	3257	2912	5690	585
Row 20	4512	4756	4882	456	2039	2228	282	3659	2295	1742	5316	2121	4872	1209	4381	3900	3593	4856	3105	163	2252	1878	2955	5228	1321	4174	2078	1045	2724	134	5785	3482	5384	1750	599	2658	4456	3592	3115	1113	4183	3980	1538	5262	2638	4389	3207	4108	3853
Row 21	1671	37	1968	2397	3456	719	535	316	3570	2431	5777	5440	2079	1115	4100	2348	4087	3102	3030	5367	5180	2011	5207	4637	1079	5116	3315	540	316	4897	2722	1426	1481	1098	3523	744	1669	897	3072	5496	5549	4023	5250	975	227	460	231	4399	5755
Row 22	1016	2822	1893	984	168	4572	2482	1073	3443	3267	5294	2528	3915	2228	3997	5791	2846	4323	529	964	4742	4033	4783	3301	1742	2966	1977	4460	3925	2666	1118	713	5685	5082	1154	444	2096	1547	5003	4286	3865	5779	5414	851	4804	140	891	4448	3418
Row 23	3969	4072	4082	1100	4339	5794	3004	3661	175	2871	240	2543	3945	2816	59	4412	3713	4418	173	1912	1256	4906	3746	1735	5189	1704	4086	4853	3971	2591	5062	5621	420	4738	3061	4568	227	4654	5138	3992	5859	3710	1723	3946	2630	5516	4338	5468	1358
Row 24	915	3580	1056	27	3195	3935	176	5730	2415	5540	2805	1475	4638	2683	1163	2763	3262	4207	1392	5213	5764	634	4140	4078	2019	5119	2033	2352	636	3263	4998	3627	1096	749	2199	1843	2359	2463	3821	1765	3743	1780	285	809	5413	2831	114	4595	5942
Row 25	247	26	4429	1050	3726	3878	1050	4780	1996	1635	3587	741	5279	1784	145	764	1256	2909	3204	949	4614	5963	5881	3006	3997	4149	2750	1194	2836	498	5780	524	3287	3182	5551	5657	3684	1835	5943	4956	1137	4217	5586	1335	249	1485	1	2380	3439
Row 26	3794	3534	5747	2601	5083	1739	4254	4214	509	4376	3650	5648	4245	5047	2459	192	3251	2093	4218	2824	2491	4429	5928	5960	1452	5257	2811	862	140	3712	930	3683	2369	1976	801	2484	5189	4622	3367	5779	2535	3452	4533	2996	4449	1288	1251	461	3713
Row 27	384	5448	398	5370	5085	1856	2098	1745	166	2683	140	1447	1990	4287	4675	3161	3212	2964	4055	2198	2811	3830	3372	1443	1424	3622	4181	4859	3077	3150	1430	968	875	4658	1915	112	2772	1767	231	3303	3612	913	4455	1342	5624	4227	2475	4830	3128
Row 28	2498	2248	5901	797	2016	5744	2375	2617	5893	4389	3963	4257	619	1425	3798	3003	1819	2393	4655	2279	5657	1461	5260	5894	1764	3316	4046	4288	5415	3712	1052	1920	5104	5408	316	5163	4090	3841	112	2529	1701	2376	503	2782	5381	3424	1870	4747	5479
Row 29	2700	4423	2679	2751	5461	1972	1806	5315	5911	3337	5147	30	5553	4007	2584	5671	2132	5139	1673	4187	3712	1170	1462	1870	2441	1694	2619	1658	4944	5490	1432	1808	517	2564	4895	2917	241	554	781	4979	3890	3832	5010	2169	740	1638	5584	2212	5229
Row 30	5294	3649	509	1498	4952	4410	5850	5297	835	2884	2793	105	4611	4463	54	3736	570	866	2388	1699	1253	5900	5206	387	3855	1312	5684	3583	3224	1804	2952	5108	5905	2470	1116	2989	1325	25	1957	421	1338	1407	4993	5674	5149	4204	5113	3755	4444
Row 31	5555	4260	378	3162	289	1345	3845	5309	604	2556	3302	5425	5182	5469	4508	4476	3866	2177	342	2999	4845	3667	2740	1315	5492	500	2731	5028	1172	454	4966	2936	488	4686	1014	94	226	2283	1785	4882	857	409	1514	4188	4492	2126	5912	4854	3782
Row 32	2540	2201	2594	689	2196	2621	1618	5203	908	5426	4979	4611	1326	4893	2432	65	2829	759	5000	3500	5434	5593	5265	157	5037	3041	3091	3989	4383	5731	3136	5760	4977	1770	705	1023	5786	3915	1133	5254	493	3741	1690	2022	2979	3339	4294	5383	5355
Row 33	629	2998	666	2698	2235	1364	1626	4497	573	1574	2344	3132	1096	4616	3814	4997	2691	369	4672	5102	5748	2636	3123	1103	5097	3152	1705	4527	4272	5362	2365	5504	2911	1813	3804	3269	157	2951	1043	1117	363	5053	2692	3165	1916	5928	2589	181	172
Row 34	3848	3161	5434	3048	1064	5365	5436	4486	815	4009	5462	3770	998	3805	4894	4571	2733	3734	5526	3128	5672	3442	5004	3007	2670	1926	4079	4482	572	3292	4460	3687	3392	4751	3129	2664	501	4102	5294	813	432	4936	4349	1707	3221	123	3672	5663	1732
Row 35	5567	5185	1961	4010	5695	3609	973	1887	4168	5601	3574	3010	2888	1989	3741	2537	4774	2611	1741	2504	419	5356	3650	2165	3339	2922	1889	1893	5317	3353	4439	4231	4309	3991	5258	1874	4932	5561	4493	2031	2520	1216	4452	3431	5616	5800	3924	606	4091
Row 36	5040	132	2939	423	2658	2679	2675	3547	1472	984	2644	4388	2677	1113	4252	2075	3807	1912	5126	1630	3047	5809	218	235	1146	404	661	583	4226	1053	1133	5361	8	4884	4222	4658	4981	205	4910	5640	3917	5424	1310	4630	5335	4288	4000	2853	5377
Row 37	5289	5419	3781	3763	3290	733	2810	3804	3736	4022	5313	1759	3462	5865	5365	3935	199	2946	4948	5588	178	4646	3411	1070	934	2271	5520	1740	3274	4861	2136	137	2831	5893	1248	5554	2643	4966	1631	4134	465	130	2366	5315	456	2392	1749	5155	4770
Row 38	2456	2037	3434	2601	3901	4550	461	2964	4699	764	5307	5098	3174	5098	2621	4616	4938	4900	4242	5777	3621	80	4089	4656	5285	407	5498	3924	4294	1750	2	2183	1010	664	841	2372	3037	2582	4275	4968	105	214	2827	2267	455	2520	2690	1558	4315
Row 39	2970	5755	4414	3388	3186	761	5506	993	1708	3253	4046	643	2174	4785	2964	2130	4032	5127	1796	2543	3932	510	4057	2602	1434	1357	489	163	1472	1918	5923	968	3368	2080	2161	1561	55	5569	412	3383	3267	5362	1046	3713	5711	1812	1246	2032	1890
Row 40	2488	1939	1811	4037	5280	2652	3272	1129	320	3365	4329	2974	2971	2489	2097	1962	393	1930	4526	787	5666	3931	5150	5580	1851	4664	645	3204	4441	1855	5974	3836	5456	4623	2464	5933	4004	4447	4789	1536	5970	3698	1677	5148	5975	1943	3523	4949	5941
Row 41	2119	5364	5449	424	1864	4132	4876	4744	2715	2057	438	2896	4435	1439	4236	3823	2804	66	5960	1430	5398	2607	3205	2155	4636	1779	2540	619	4931	5319	2383	5423	2282	3845	3495	5660	3460	4563	3444	5151	1256	766	5338	335	3981	4481	1368	4586	4012
Row 42	3476	865	475	1695	2351	5250	3205	5461	2496	411	3961	897	885	2801	5434	2570	1502	4566	3599	4152	281	282	4760	2637	4024	221	1008	3644	2801	3287	206	1406	4668	1292	2231	2118	2247	740	3024	3085	949	5343	4336	3534	5008	1780	2994	4989	4344
Row 43	2226	5800	4027	1446	4422	4327	1931	5548	187	1355	2092	2071	3228	3957	3696	3077	2805	4259	4773	3537	4431	372	2150	3958	5385	797	4991	3098	304	1071	5516	2901	731	3741	1645	3957	2117	533	234	2075	3504	4331	4032	5613	5630	5524	2439	1113	4014
Row 44	3726	1871	4763	5370	5657	2022	77	3264	4599	4484	899	5771	4558	2410	3466	4531	4332	1074	3531	5090	1410	2084	4077	5971	712	4284	1305	1837	2887	4224	3281	991	4765	964	5336	528	5660	5464	4046	3261	5077	1508	3911	2469	3924	3189	1022	5598	3035
Row 45	1472	5977	382	1931	4354	4715	1657	5903	3961	1091	3514	5841	586	3877	4289	24	1920	278	5508	3072	503	2641	3136	5307	3801	5488	4471	1749	4602	1737	2398	3450	3407	4848	4308	2801	2943	5549	71	4003	579	5179	197	1026	3151	3729	2683	3258	5358
Row 46	3294	1845	3088	4185	2651	965	5570	2475	2930	4373	4232	169	412	759	5849	3886	2613	1017	2160	1020	1268	623	1666	5693	3019	1235	3321	4208	2688	2815	1743	1834	3473	5930	2568	4529	4098	3577	3647	2674	628	5140	5792	2058	965	1400	1827	4357	3527
Row 47	3564	968	5700	4250	3357	933	4470	5220	128	5619	5908	1150	5930	1276	2821	2697	3347	3038	3711	2036	1488	2369	1085	2407	4282	5134	2192	4273	2578	1723	1694	3016	1020	4035	5254	1679	2788	460	3635	3239	3562	2299	4653	233	983	701	3578	2710	5544
Row 48	3641	1594	5145	1902	904	3355	1411	229	3287	2734	2698	5857	1759	5959	1604	4352	3522	2550	1442	3329	3004	5233	1196	5770	5642	4503	3557	975	5057	1216	1006	5774	3501	2808	5052	1775	269	2608	3973	5289	2235	2070	403	5124	936	2416	837	2172	5064
Row 49	1495	1622	513	4407	3284	2183	4974	5300	4779	4323	4484	1721	212	4876	2813	5479	4403	1992	522	1254	65	3948	2645	1475	3577	3401	557	2194	1920	909	2799	5275	3261	3014	5917	1899	1396	3379	26	4364	3159	1258	1435	4484	1451	3671	3890	2289	4342

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.