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	2758	3024	667	182	2253	2464	6	3048	5665	4163	5480	2624	5857	2469	3012	4137	935	3183	4606	1997	5941	4247	1931	2382	3583	684	5601	1788	2723	2860	2952	5297	1486	4253	575	1707	614	1033	5375	4133	5117	5773	4668	5969	3835	1139	2657	524	5910
Row 1	3796	5041	3407	1670	5371	1326	761	297	3267	1460	5793	2857	5921	2239	4158	5062	3222	978	946	2642	706	2181	3601	1877	3243	1161	1712	3594	2834	1990	3133	314	3209	2745	5350	2487	4250	3473	5013	5671	1285	5288	4062	2966	5654	4588	2303	856	5313
Row 2	5753	2711	1912	898	4919	3666	1481	121	2970	1795	5940	2944	3379	3747	4498	3680	5538	177	1406	776	4923	2983	5829	4732	3403	3645	1640	2557	2891	2104	4282	872	1777	640	2146	5526	2557	424	2182	3997	1109	5466	2405	2216	4595	1543	4248	2836	3909
Row 3	4326	2551	3523	4504	2779	5491	2161	384	147	2132	831	4789	4265	4137	915	1257	5169	119	3142	3260	402	4592	990	2529	2253	3831	3410	5579	5810	2157	2989	1150	3328	1193	1913	2725	3466	350	5481	193	1660	4645	848	3404	2349	858	452	1917	1695
Row 4	352	4040	2737	3238	2499	2468	3409	2182	5365	3189	584	4931	2074	1516	4253	69	713	2751	470	5902	3985	3579	2937	4654	2088	5170	3840	2818	5269	270	4448	1755	2458	1286	5364	3236	5288	2509	272	4099	469	1518	4477	4665	4410	2992	4255	3537	2637
Row 5	4923	3367	5657	4424	2552	1371	5069	430	1692	3229	5394	1817	3990	5492	3220	4798	5030	261	4807	1397	5939	1709	3436	938	420	691	5991	3485	4161	1361	850	1209	591	3925	1796	3644	3428	3654	3348	3891	3593	1719	5233	2447	4629	5745	3433	3210	1890
Row 6	5331	2943	3803	5620	938	5695	1780	5645	5197	3608	5303	4448	1725	590	3116	5549	5666	3196	3965	2453	419	2311	4423	937	3762	3386	5911	5206	387	2774	4318	2622	4658	5545	5907	243	192	112	3274	1517	2530	2056	2140	5013	2756	3656	1109	3268	4715
Row 7	1499	3267	5678	1310	2110	708	3827	3144	4629	4671	3727	3429	5616	5144	1683	4420	2783	3680	1677	5124	1722	3557	1579	3433	5853	5023	3323	2460	1121	5314	133	2687	5613	1168	5532	3412	312	5277	2518	5751	1273	885	385	5145	4216	5754	1967	3910	4565
Row 8	1339	4773	3903	3494	5293	2572	2325	5788	778	4881	1645	4885	1380	3354	1566	1134	3300	47	5645	466	4012	539	3023	4485	748	3962	2014	2749	3337	3201	4825	1498	2661	3108	5748	711	4250	446	4479	4271	5487	3447	2951	5117	5835	248	892	1907	3481
Row 9	5750	5962	3097	1304	726	1385	3158	4145	5146	5844	4355	1684	634	48	783	3624	2702	4054	5255	5713	1840	5520	1836	80	2742	3447	971	5084	5997	3668	2086	4377	4153	1279	5518	1781	802	1852	1871	4489	5407	5053	1157	4084	1608	5078	5969	3755	4678
Row 10	5454	2550	4884	2436	3309	2030	2561	4204	5416	2949	2258	559	4762	3565	556	778	3166	3750	758	1680	4279	2617	1788	2275	2115	3474	188	768	5276	3647	4851	5313	5146	4872	1119	2264	4519	5586	4831	1605	3488	2787	3643	1764	1338	3234	3420	5411	1120
Row 11	5088	75	2928	2437	3271	4826	158	5575	4379	5058	674	987	4906	4118	1569	3809	4780	4336	1277	2767	105	4911	2248	2962	2483	4341	3202	3401	2794	3610	5570	576	2306	1282	4194	1617	148	1126	2641	4728	5692	5482	4918	561	4775	10	5139	3852	266
Row 12	3505	2552	5656	5872	2969	3340	700	1325	2961	5742	5296	198	816	3651	3269	1302	2057	1664	836	1917	719	3157	3111	2604	217	430	2347	632	5716	1376	4456	4369	3883	1307	1402	4754	1569	4350	4278	1599	5300	329	5412	5339	4046	972	2441	1500	4190
Row 13	4335	1641	1879	2055	1837	2711	2163	563	3731	1751	2441	3551	4899	1449	1194	2505	5842	3711	4067	1439	4386	3462	2871	1240	4201	4113	4410	3241	4727	1174	4661	2766	3345	1484	4223	4650	824	5110	76	4365	348	2572	4260	2723	3883	153	4042	4991	971
Row 14	500	3404	4619	3954	2004	5738	4379	4408	631	3174	3379	3406	3469	1705	683	3411	1870	4473	4302	1492	1638	5500	4594	964	2923	3347	5592	3045	3679	4877	4650	3907	3501	1751	692	4553	137	629	2441	2386	3524	4457	286	3930	708	4708	603	5061	1290
Row 15	1095	3447	3632	4123	4346	5949	2158	3345	2493	681	3155	5134	5411	1399	271	1742	1081	5488	3706	605	1438	2880	125	2821	1093	4910	712	657	5058	2917	1763	5800	4098	4815	3748	2355	786	1904	273	1874	3256	85	5452	4943	5246	3729	5518	980	4736
Row 16	2375	3129	3157	324	3890	4387	5239	4351	437	5730	4074	1032	5379	5947	2447	509	646	4494	288	4652	3977	4135	564	5551	4738	4721	391	1487	3555	2107	5638	1314	769	793	330	2082	1484	5192	4748	5137	5133	1717	5223	5258	3691	4587	5836	5916	4324
Row 17	4094	5326	753	4651	2257	4234	1472	256	5962	5646	2149	4262	2176	2814	887	3180	3728	3892	1449	5224	5441	5129	4429	954	5195	5282	596	1022	2607	4856	704	3925	1053	1075	140	1017	4118	1028	2515	3519	4266	2466	5192	461	994	4852	1829	2527	92
Row 18	5110	3541	3565	4585	1744	4586	5993	4625	2367	457	5639	2634	568	2300	2908	2360	5291	2975	4107	5229	5689	5265	2257	1766	5284	1048	782	2132	3083	1263	477	5030	2311	5585	4071	5076	2661	163	2142	110	1559	5743	2982	2890	4092	1793	5151	5352	4800
Row 19	5675	1958	1510	1071	3654	4962	4186	912	1129	1833	2853	4184	4290	3429	1317	3321	190	994	5618	3391	4657	1541	4669	844	5302	4590	3417	2830	5462	5970	3217	3875	4214	4766	472	247	4227	901	5339	845	5479	2142	3701	412	4253	4974	2725	5866	4587
Row 20	4382	431	5590	189	2021	2303	2495	5541	570	4676	3557	1047	2466	4574	2811	55	2987	3700	836	2844	944	519	1568	5781	149	1899	2313	5362	2562	2800	4581	3860	4623	5909	1169	2550	245	3910	105	5830	3985	942	5772	1991	1353	2107	5062	458	272
Row 21	3313	2521	5069	3087	2473	4096	604	1759	506	2659	641	5621	3154	774	5946	2863	4075	764	4017	676	1969	5211	5317	4239	4673	423	745	619	2403	873	3784	3543	3917	2824	559	5824	2046	5013	4869	2033	2453	3740	94	3309	3172	4757	553	3761	5575
Row 22	5986	2972	3153	1354	2661	305	1439	2354	3635	3803	3991	2533	745	4023	1540	5590	3935	1335	2404	5123	142	4624	2335	3000	4773	5334	481	1228	2698	5023	5816	5280	1255	2254	3142	1493	3039	4900	343	3516	5849	2715	2885	2744	3181	1567	2306	1852	5513
Row 23	5464	2408	4956	5904	3000	1363	5950	5607	3236	3134	5741	5360	2532	2757	2177	2581	318	2277	528	4731	4002	1356	5565	1348	4970	293	315	1257	1911	5666	4900	5787	5673	948	2104	3891	1386	1066	4502	3576	2118	5155	1310	5024	4062	1267	5213	1220	5946
Row 24	262	3689	1892	5176	5664	3614	2908	2714	5900	936	4317	402	2643	1349	1808	5506	1609	5005	3713	2780	222	4102	4618	5000	284	3276	4519	4443	2289	1059	181	783	1506	2593	4834	5757	884	556	4107	3560	981	3882	3357	5267	117	2411	1159	1416	5975
Row 25	5514	167	5078	857	2106	127	378	730	2573	2362	2885	5324	931	4023	2947	5847	1188	3925	3863	2394	90	3806	5880	2408	4358	3436	3098	1375	5978	2943	3003	351	1079	5881	2274	799	1288	1728	2093	1465	24	1710	239	3332	4178	570	744	5447	3452
Row 26	646	2531	4652	840	739	3770	5404	4365	5200	99	5342	3821	2623	2036	5625	2826	724	2943	2105	235	5307	2987	5455	1846	5662	4180	5324	4655	2209	4634	78	4149	5561	657	2349	1765	4034	3243	4829	4481	2110	4674	499	757	4194	3735	1168	3221	198
Row 27	4679	2487	5208	5897	2133	162	4349	3755	4155	5569	2534	4503	2515	2117	2401	1545	5811	2668	1679	5215	2362	3481	1515	383	340	1206	2282	412	97	3426	5829	2593	3538	2270	5523	3426	5911	5144	5651	1850	3176	845	5476	3249	5578	1237	2275	454	1991
Row 28	3995	1293	2076	1857	5055	2886	5635	1313	5654	4216	4538	1117	3511	4786	1866	1857	4494	3713	5422	797	884	5173	2345	1173	1279	1652	4480	4739	2866	1636	3282	3514	5535	636	1541	80	2045	575	3124	1990	3312	1489	3875	5706	4921	3940	5312	3121	1031
Row 29	977	3954	4680	3218	4645	4123	4906	5840	2508	307	928	753	3456	5534	2009	5275	5728	2868	5766	387	1147	5510	3488	1288	4821	2637	1272	3463	2371	3480	3671	935	151	3508	704	3751	2258	2536	1822	1207	78	3435	1376	3285	4743	1338	1898	1482	4483
Row 30	1462	2660	4742	3224	751	5790	4401	228	2675	1766	3340	1741	5168	2702	4561	238	5644	4170	4186	205	4402	3769	3630	5819	3591	2376	3004	2805	729	1386	5863	1187	5182	33	4889	5288	1565	5068	4957	2474	2635	1483	1218	3205	3776	1529	2151	5120	937
Row 31	5153	5934	2558	1906	2776	1992	2126	267	281	1748	3606	4283	1953	4227	950	2521	5384	168	2078	5374	136	3954	5470	4925	5668	3504	4417	4103	3060	2755	5634	435	2033	1091	338	5607	2239	4459	1862	4918	593	5480	5937	575	5355	3621	205	3276	5557
Row 32	2819	4886	3284	5158	5080	4861	228	2196	1120	5828	5789	5488	4715	4052	5257	1598	4460	1430	1793	4209	3689	454	3049	1344	3963	1946	5255	1927	5322	5833	3419	4353	3292	4838	5144	757	2172	690	5712	5607	2557	1692	2598	502	1384	5755	714	5823	2279
Row 33	3596	5279	4649	1871	2329	3951	5895	2416	2438	4098	468	3428	1210	5878	4339	4763	1357	5359	4852	5314	4344	3715	1814	1736	130	4802	1803	5057	1372	2348	951	4748	4129	1347	1316	3962	4630	4364	1469	2387	2850	4373	4093	872	4900	5749	1559	5764	4752
Row 34	4199	4526	5424	4377	5720	4144	3820	116	5114	4725	2240	4894	4454	2464	2710	661	1781	3605	77	4554	3081	5579	1209	3481	792	1346	2202	4366	857	2724	1360	264	2210	3460	4761	4365	4761	2722	4030	4598	5729	307	488	5414	4339	5029	5274	2342	4995
Row 35	1184	2291	177	3577	4495	318	1326	5740	3998	3777	4423	3855	3535	5128	5432	5134	777	363	2684	2593	5174	985	4192	5495	2562	2297	4579	1545	660	4566	1581	5680	2690	2887	2590	4003	50	3407	1101	5644	5784	4683	46	2123	1825	4213	1871	3486	2249
Row 36	803	4851	1418	3920	2079	1310	3823	1662	4966	2946	724	1597	1200	4359	611	3366	4137	3509	3253	245	2226	5471	3882	2053	2255	1654	1709	3865	441	1250	2364	2671	3129	555	1116	5518	4782	869	1228	1902	5048	4666	791	1266	506	5240	60	5631	2154
Row 37	856	3707	4376	443	3507	2348	3149	150	4326	3351	3472	814	2110	3369	2153	2637	2	1683	4860	2152	4513	5386	3251	4985	1212	4600	4550	216	1149	901	1646	3693	2637	3213	2040	905	1534	4485	3540	5724	5782	3510	3180	748	3159	339	4343	3467	3824
Row 38	2035	2369	3850	4193	4402	447	1915	503	2718	2528	691	2931	3157	1342	1939	4573	998	936	3098	3897	5880	1388	3531	1543	4012	2701	227	5897	3155	5776	2910	4277	5250	3675	4062	4229	3315	4166	4681	5184	4997	1847	3036	4572	3480	2517	3357	4717	4965
Row 39	125	5819	3	4825	4218	4217	1904	1907	2872	1955	3549	2071	3062	441	4918	304	166	2747	427	5099	3748	4074	4508	2503	2867	5251	1022	3658	735	4002	622	3813	1111	5710	2091	1041	3681	2069	3590	932	3642	3564	4967	2087	1970	4634	2522	1530	5449
Row 40	2878	1393	4702	4307	555	3557	366	4318	3536	3191	1272	2563	5274	194	1092	3225	2056	2787	1552	479	3302	3478	105	1991	439	2373	3478	3130	5292	1602	2894	5467	5323	2942	2966	541	5512	1631	3670	5725	2833	5961	787	4999	2221	1261	3697	4149	4691
Row 41	5462	1785	779	4837	3137	1042	2549	4117	5201	3022	4257	579	2497	3775	3968	3153	3979	2490	5093	2314	3025	3405	2229	641	5574	4267	2200	2966	5907	4562	2687	1094	3756	3071	4378	2091	5437	4541	5433	2901	5297	3692	3903	4856	310	2231	2144	3543	1866
Row 42	1033	3750	5290	4041	1959	3601	4939	1105	1441	3338	385	2600	3858	5882	1550	490	4788	3703	3114	3871	1197	4625	545	2951	5877	401	5011	5002	718	4561	3862	5373	2406	3317	5497	5161	1627	3662	2983	4484	5210	2270	180	4616	3868	2931	1317	642	1294
Row 43	4490	3040	1273	2815	2467	1170	4377	648	579	1287	4579	2087	1492	5828	4626	1586	5442	4925	3663	1292	2178	4302	1517	1580	2986	5413	1125	96	5985	5933	2140	5831	4750	4204	73	2006	2379	2494	3713	2854	1255	1760	167	2570	4095	2081	1503	102	4647
Row 44	2449	5372	5613	3262	3482	2184	5905	2176	5160	4515	796	5090	5253	3955	229	372	1164	3621	4941	1518	4895	738	4108	1498	2491	1187	4064	1033	1850	167	4725	1983	2609	1539	2477	4774	101	3354	3904	2880	5822	4549	84	2250	428	228	4398	4405	4778
Row 45	3219	980	74	46	361	2566	1469	1304	4123	4954	786	826	198	3078	864	2101	1008	5671	1462	1427	41	5220	3263	412	3366	1327	1170	3682	1949	1244	2592	4618	879	5844	5909	5418	683	2700	5793	4833	5152	3781	283	5208	1006	4753	5357	3819	3264
Row 46	1045	5558	440	4457	3361	4665	5455	5432	3409	5756	4100	1686	5633	5110	1467	495	5156	2997	4085	467	1514	4188	780	5201	4223	3244	3858	567	838	2488	3828	4863	3717	2824	3310	2332	890	903	796	2947	900	3133	3172	2355	1463	1917	36	1786	3960
Row 47	5980	4229	2214	2874	570	1788	469	2946	4338	1623	4935	4346	3906	2111	1933	1658	1025	4193	787	4265	1232	2967	431	1667	1291	3822	358	2288	422	1539	814	2121	618	5501	4032	5095	266	2564	4591	2431	5627	380	3609	1505	3800	4101	5820	1641	802
Row 48	2248	2777	775	4000	2027	5252	5555	1932	2938	3733	3082	2732	783	798	529	3606	5047	5098	5831	1309	3431	1722	4064	4551	309	3176	3160	3517	5909	3361	885	2573	5500	1160	5605	603	260	2829	5327	1360	1864	4904	3127	3119	1199	3462	4332	173	4090
Row 49	4752	1590	1891	303	5528	5361	2738	3764	1571	27	1432	3056	1328	4519	4052	5876	5061	3144	3254	601	313	185	2635	4404	1519	84	1570	5418	4755	5058	2132	896	4410	948	4257	3266	1686	1273	3296	5274	2441	1571	56	4449	2642	141	5013	2241	3875

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.