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	1078	3521	2381	1311	4762	4416	2578	5804	863	5030	5359	2016	3527	5964	113	754	3981	3382	4589	2849	2881	5577	2568	3289	2287	1005	2453	733	1233	5608	5190	4497	2279	855	2415	5185	2172	503	561	1979	1669	4941	4595	5551	4180	2135	809	3386	1382
Row 1	4948	5242	1121	3208	4090	5581	3420	5843	3006	5897	1040	3228	89	2549	5838	255	5921	4902	2897	4467	5103	2073	348	3580	4411	923	1107	3790	3857	4807	970	4491	994	2811	4482	4278	3571	3656	3903	3102	1163	3619	3802	5778	4304	5669	695	5687	4574
Row 2	2800	5477	4038	330	4141	1157	2013	1558	3386	1403	2880	2222	4415	2854	3831	1007	1865	934	1238	1380	3612	3287	2742	2167	110	3046	306	1550	1333	2159	3674	828	4253	1407	5412	3757	2133	5547	5329	4413	2322	2920	1406	2092	2214	5501	2149	4031	188
Row 3	1425	4144	5558	2135	1	836	4669	5860	2581	3763	2038	4043	2419	3802	4274	5610	3318	4207	5289	1214	3901	3407	667	3001	1963	430	1632	167	2956	1961	499	5038	107	2124	2822	3386	1097	3485	3196	680	2532	2589	767	2709	1217	3180	956	5730	1559
Row 4	5556	1029	4553	3118	1347	4100	1935	2454	1494	3467	1979	272	5612	3498	775	5257	2241	2419	3120	5822	4776	812	5506	4601	2672	2426	5730	1626	2356	3808	4016	3508	4123	957	4544	169	5121	2067	4272	2096	2440	2775	30	4621	3110	2390	3629	2822	4649
Row 5	5838	717	493	3045	2772	3853	1904	287	5899	1490	400	1696	2422	1219	627	2258	3716	4677	2414	4460	4445	17	4583	5478	2753	3434	1805	5312	3308	5240	3380	3206	4998	2266	4816	3129	1583	1043	4774	5527	3233	176	5624	4260	5229	3827	5921	1181	4543
Row 6	643	1970	1877	1361	1915	1341	5572	1305	3938	1530	472	127	1132	2982	3301	4882	1026	1811	1604	3007	356	1777	4559	623	2142	1657	4985	5363	1154	5842	883	3996	3213	3426	4796	3393	1925	5057	4218	2686	2077	3285	4654	4422	4904	2689	4512	5025	3773
Row 7	4217	3155	771	2818	2875	3434	5064	488	192	4739	5880	5110	2685	2471	1062	5641	1209	3438	5591	4812	4905	5747	5691	1793	4613	2461	4854	5495	1303	2392	1471	3509	137	648	3087	5781	3903	4569	4466	4089	1924	1070	2489	623	1984	828	5613	2949	4432
Row 8	3488	2181	1470	2697	4883	2119	5249	3472	4912	4099	2418	2644	1065	5535	1613	2495	3803	1655	3300	633	1279	504	6000	4564	4612	2075	5848	4410	5128	3165	2387	3147	552	4106	1959	5303	869	2746	3544	4748	864	5976	1623	1722	4544	4992	2168	2501	2158
Row 9	3900	5521	1159	4716	3453	377	4234	3829	4270	1390	4882	3161	1645	2178	4209	1705	629	1475	370	4253	2644	4949	5862	4258	859	5736	4090	4800	5839	1195	3473	1747	90	3833	1231	3190	1477	3851	1907	3994	1534	992	1878	2136	2137	4687	556	5329	4382
Row 10	2926	5292	918	3013	763	1848	3914	3687	4603	4318	3995	5258	5066	2005	4316	647	1575	5108	4002	1745	3880	1520	45	5792	5920	5088	5797	5188	2509	4248	1348	1521	1805	1767	3589	3185	2106	4489	4135	3507	5210	2021	4522	143	4721	5712	2015	4849	934
Row 11	5110	2427	3463	1126	5198	2845	5235	5257	686	1123	2377	3871	2662	5130	2453	3529	422	2834	240	3808	1826	4627	4394	4313	4385	978	1690	4659	1041	1827	2062	2263	5210	2335	76	490	1013	3348	23	4898	1925	5619	1711	2458	5297	1939	793	5293	211
Row 12	4344	1360	2650	5047	5337	1590	4476	4581	4554	1897	3172	1211	849	5167	4083	3342	2013	355	2603	1853	612	3945	788	3468	3536	590	931	376	2329	851	2375	5397	945	4726	975	3159	4831	1334	4047	1085	3672	3015	1646	5880	913	5070	4222	4688	4511
Row 13	285	1721	4739	5058	5742	1754	3945	421	4847	4979	5142	4468	88	3498	1168	347	5360	3787	1734	1286	4903	5380	3597	1486	4133	2553	1557	3723	1257	5281	4510	5780	3180	263	1442	5914	3344	5184	1635	954	5887	1425	1882	2199	5618	1516	114	3794	5423
Row 14	1507	3887	4569	4960	2125	2661	3644	3174	2311	2254	5206	4504	1954	906	537	3052	3616	2254	1283	3066	1268	3113	5180	1391	651	3806	5200	5661	1665	798	5154	2337	4806	2195	2844	5184	5696	4209	2454	4836	1785	2184	2153	5490	2027	2687	5277	4723	1623
Row 15	3493	356	3952	5978	5148	5812	337	194	1418	4410	1053	5932	4698	2064	745	5955	4215	1290	5525	1236	5899	2640	5902	4387	2920	947	4196	2305	1008	2016	69	1856	4427	1128	5035	5780	3938	5896	2963	1788	2028	375	3172	4567	4584	3539	4383	98	2903
Row 16	4384	4306	5944	4584	172	3451	3867	4147	3929	1884	3896	2061	1552	2400	2627	5164	3709	3365	3447	4323	2264	538	3334	3820	1241	1414	5698	277	3936	3387	5120	2078	3055	4525	4580	2879	1574	3415	261	1281	3151	4220	226	981	1265	4214	3355	5925	395
Row 17	3903	2414	1893	3997	2687	4004	2401	2487	1015	1067	2721	2383	3400	249	1947	2567	2225	1484	4764	2264	4930	1842	479	790	3143	822	2671	931	4438	1553	3646	1057	3378	3976	2574	2471	883	158	4046	1815	3132	1831	4968	2732	1271	4937	3584	1221	5971
Row 18	2659	815	1897	2916	3835	5432	4205	67	4378	2172	4882	4154	775	2454	2638	2122	1505	3231	2308	4828	4276	4333	1710	2866	3525	117	227	4876	1776	258	366	447	5466	1802	690	3544	3854	5579	3723	3640	1045	3667	3227	3102	5518	5015	3321	991	1592
Row 19	3931	2752	2373	4495	3559	1375	2183	4765	3594	5252	900	3756	771	5896	308	5646	1172	711	2717	2896	5295	1493	4522	3942	3393	1413	1977	351	1647	4431	1460	2498	531	3789	2558	1897	19	3188	4820	2157	691	4931	1797	4772	3239	1167	803	5759	2335
Row 20	5521	93	3066	3380	2605	616	344	4017	2067	1685	5428	4344	4476	3942	59	5831	1256	2360	2831	4714	4617	2148	5650	2059	5133	2576	792	5673	2347	4561	596	848	2122	491	4122	1575	1514	4517	1418	412	405	4884	4708	1993	3019	2665	3505	3535	1026
Row 21	874	532	5528	3947	764	1815	4021	2442	5483	4778	3084	5014	3522	5451	3073	3581	3397	3871	5811	840	568	2433	5391	3116	4419	1511	1587	2502	2379	5391	3042	2960	2660	4020	1101	3569	2661	1022	399	4159	4555	3657	191	2012	5670	1816	5242	818	4574
Row 22	5321	5395	2040	4324	5785	2	3790	520	5146	4540	138	2287	5701	1478	1824	435	4837	2902	5188	472	5936	4823	5650	1882	2469	1012	413	5818	2632	3208	812	3281	3980	4472	3193	1882	3984	4867	5279	1242	3368	3082	3380	1663	2763	3088	5138	1304	175
Row 23	3217	4973	3792	1771	1232	454	2062	2794	1860	4132	893	4305	1582	4943	5111	566	2890	2555	2363	2922	2485	1083	4614	3415	4464	5892	5282	5842	1643	4373	3130	213	1388	2762	3601	1973	3075	799	80	811	1642	2777	990	1538	2009	3679	939	2642	1326
Row 24	342	5636	592	4231	2750	3767	3374	5708	2161	1726	5700	2804	5490	782	5338	3974	2357	3942	241	4159	3641	1349	2038	3728	5497	5272	3254	2621	4444	5572	3863	2969	2439	1803	4626	2025	5875	5906	330	2086	2539	866	3880	4993	5095	4170	25	4733	864
Row 25	4206	4459	4748	349	3541	5913	1222	2152	4106	2534	5319	3137	1680	3069	5881	2058	326	5249	1214	3857	4673	2827	5253	3129	719	1722	4437	507	2366	1403	2953	4591	2813	1000	3784	678	4238	4241	2718	2080	1798	3603	1185	1417	2711	1909	1430	3837	877
Row 26	823	5318	2432	3750	3837	3577	3811	2194	546	4564	2656	4845	5510	3140	5802	3658	288	5339	3910	2866	746	506	4370	4280	266	1046	1565	744	4502	804	216	5798	1935	1023	1024	863	4524	501	3834	1676	1251	2731	5168	734	4071	231	1166	3110	1125
Row 27	4130	915	5986	900	3294	2021	3886	5381	1929	440	2480	2026	4194	5726	74	44	2099	3920	4668	5510	4871	3739	5811	4607	4212	4500	4181	5726	3650	3469	379	3189	5256	4719	1676	2549	1422	563	3033	5578	2215	1161	4868	739	1758	3184	5084	3756	3174
Row 28	4111	454	4260	1454	1197	2199	5729	2936	1631	2527	96	4348	315	5454	3207	389	4957	4157	3768	2359	2181	3159	5590	5380	3264	5094	5251	1934	921	2695	1569	3721	868	4370	1718	2719	2697	1592	5151	1408	3768	2100	2831	3104	4593	2391	5535	1882	1892
Row 29	4019	3940	154	5747	5144	4752	3633	2453	4352	2954	1803	5276	339	4442	3623	5511	5521	5408	4913	1927	912	3998	3150	5445	1385	3176	1898	3539	3827	4933	3380	4811	3979	4368	1154	2081	2372	4929	4893	4559	1258	5163	100	1805	1623	3940	5872	687	807
Row 30	5633	1708	2634	1898	5929	1892	5340	4682	1733	393	1970	3178	3624	5316	1318	3896	4883	2866	1337	3278	5762	3530	482	1454	3725	2181	920	2696	971	3691	1723	2322	5376	2746	1796	1172	1418	4032	1200	5581	1305	1577	4287	4617	5900	2482	880	5452	3023
Row 31	5209	3725	2192	800	4858	5541	5473	5388	5081	4875	2642	5115	3119	1465	1823	282	3827	5587	7	2920	1163	2866	1288	5643	4074	243	2606	1206	3644	4064	1829	4376	5569	2290	1351	856	1608	4669	1442	1968	425	4869	4546	4300	3320	4223	4928	1123	1253
Row 32	2546	4151	879	4360	5999	3265	1322	3094	2138	619	45	3029	3134	2567	4860	2878	3866	2696	706	50	125	2558	994	701	2099	4461	3761	1226	3334	357	679	1652	854	5589	4523	614	3080	4628	3886	5206	947	427	4253	1205	5568	2150	2241	2450	2743
Row 33	2754	3403	5662	82	4127	4959	3973	5169	1308	380	4537	4300	1446	1765	2025	4607	4365	5741	3022	347	2891	20	489	3596	1892	2750	2984	4251	3423	3957	3346	2111	4778	783	768	80	1936	3696	767	5961	4407	5650	1939	3222	3762	1946	2294	860	3672
Row 34	2326	1962	5177	3205	2522	284	2027	4689	1480	2137	5780	4870	270	323	1093	3640	32	1916	4100	653	2078	3161	1627	2729	3950	1880	5188	32	5079	317	4386	5841	3805	2150	2879	2416	2133	5976	1695	4395	4562	694	3985	3702	4617	1506	2512	4616	1556
Row 35	5106	5387	3967	2235	5475	637	4894	5708	3102	2158	1188	2626	5052	2849	1367	2174	4728	727	2853	198	464	794	1905	2560	4353	1335	553	2734	5439	3292	3935	200	5066	3152	1969	4981	5001	3752	2293	3848	4645	4997	2216	487	1265	4886	4325	209	2350
Row 36	3632	99	330	5084	3974	5705	691	2735	2169	2317	4908	5887	1603	2591	4136	1123	2315	2053	5712	2882	3654	2335	1600	4692	4411	5775	2466	3198	1713	165	1837	1894	5736	3776	1146	374	5810	2827	4238	3815	5575	2332	1321	601	4625	120	4729	2951	4480
Row 37	3413	2275	5166	3605	3899	757	1462	2117	2274	928	4631	3520	4767	2114	2126	3713	2939	2849	4173	2230	4610	3834	3112	5188	5845	1457	1594	1987	4489	2720	3860	3113	5477	3441	4206	1430	3067	4281	2908	3697	3594	4950	4976	1653	1019	2686	1124	2861	52
Row 38	269	569	2646	3836	1007	1093	548	2780	4578	208	3422	147	5089	327	1258	2338	633	1912	5991	3480	252	3474	5893	4195	286	4683	2380	5773	1187	437	2874	3263	4878	3936	3280	5121	105	4392	1969	330	5757	5302	157	2294	3975	780	3731	4413	1918
Row 39	4282	3024	2522	4317	924	992	5800	4164	1607	5383	4551	1960	1371	2369	3756	780	3396	4671	2917	4919	4567	204	1044	5835	495	1543	3591	4267	1555	4687	5250	5449	5594	5720	1133	4359	3452	2626	767	295	3586	5964	412	3845	3901	1617	2190	5990	5856
Row 40	3852	5926	2709	5819	4386	2716	3202	2341	4357	5699	446	3982	3971	2996	251	5022	688	533	5986	2352	341	5720	625	1229	3968	2494	5216	3524	1164	2679	3277	4470	4577	5691	2810	3077	1845	3747	1873	3520	558	2557	3333	807	2241	444	107	1254	1163
Row 41	5971	4084	4349	2583	1565	3909	1877	5449	2972	4870	4209	3427	4045	5792	3171	4499	2817	2550	3541	5180	4129	2504	2143	2482	1112	260	3567	980	4210	1759	3240	5965	686	3469	4685	5131	518	542	128	5232	925	2382	3032	2249	3054	2341	1993	615	4075
Row 42	108	3904	3017	3861	2754	3661	2358	5627	3523	5681	5198	2807	4183	4645	5786	1388	3529	1833	3354	3559	1835	2239	4430	1117	1860	4370	5016	318	4303	4164	1204	4490	1749	5168	1718	5002	4406	3402	2936	4799	2015	3341	5906	1460	840	1645	848	2771	1839
Row 43	3621	2550	4383	5979	5761	5822	5001	2719	5077	3185	3955	954	3265	727	3700	219	4523	5278	1421	317	4087	2353	5140	4353	4945	1279	709	3849	3180	3322	3183	1852	5192	2832	703	2040	5423	2406	4695	4822	835	3348	3413	2314	3769	2018	3176	1194	2058
Row 44	1982	3416	1262	283	5371	1124	767	4154	4092	963	4847	3540	1794	5710	2221	4036	2354	4067	4123	2199	1621	2750	4027	3434	5853	4390	5842	4920	5162	1905	3303	1944	5815	5403	1549	4179	3976	1744	835	658	777	1396	1282	222	4099	3450	3376	483	171
Row 45	3472	2736	2570	4920	5279	4189	308	1116	2081	5626	3072	2907	5099	3336	2856	907	2886	4546	640	88	3940	4483	5694	4376	5317	4291	483	2139	460	5097	27	5287	3876	5662	1503	3880	4356	4272	4630	2244	829	5559	4919	3931	1662	3912	5255	1390	3462
Row 46	4104	5694	484	5850	4288	3784	5531	3244	1704	3074	4479	2621	1459	3715	2120	2302	4515	5192	242	4215	289	3477	3954	62	2427	84	1982	1755	2744	365	3945	75	3952	5295	4045	2139	1613	492	2542	3570	4392	366	5100	4855	3180	1457	4152	5853	5678
Row 47	4421	4123	4107	4568	5008	3098	5405	3571	2381	5564	5029	5393	5725	1384	2918	2327	2653	4313	1544	5191	5775	368	1872	413	5674	1882	2880	1289	5127	4081	912	4886	4399	4833	3662	4258	1618	3326	1579	2383	3413	5582	1268	3693	5997	2488	629	5108	4564
Row 48	252	5388	5450	3678	2146	3009	183	402	348	3359	1069	393	5810	2757	4100	4147	1275	5916	5179	4541	2168	2261	2475	863	3115	2300	2625	2665	2936	5488	2700	4020	951	519	4891	2571	1132	4954	3261	341	2718	5036	5379	869	3011	3546	4788	827	2213
Row 49	4284	963	522	1355	3341	1927	1302	3178	5937	2381	1306	1661	1203	5722	1573	754	1624	5591	5406	4504	2530	1102	310	3554	4610	5348	4822	3751	4277	581	1356	3238	873	4682	4059	5183	616	5669	3785	4402	3943	1632	1361	4399	469	968	5429	2145	5413

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.