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	1742	693	3841	4378	983	4674	4525	2569	5335	714	745	5678	1180	3424	620	1611	498	1328	3840	2944	382	1808	3117	2970	4581	455	2077	290	3600	5897	1263	5341	590	5104	3719	1572	3777	2243	4141	3111	2956	4885	2789	4136	2309	3408	5747	2806	4736
Row 1	3587	5750	5117	5395	2867	2087	3975	3322	4163	4265	921	4060	5527	262	4649	4631	3981	221	2408	223	4361	5518	3179	3246	2307	1315	5554	5715	1061	2360	4451	4648	2110	3567	4042	4977	5654	2016	2298	3817	280	3219	1876	5807	3480	525	4438	1461	746
Row 2	845	1683	5106	363	4862	2352	2669	176	1906	2383	1237	4266	834	5884	375	4401	3925	5351	4054	5941	1649	1870	220	4867	3746	27	2347	4270	4464	3807	5015	5308	5490	4121	5670	4351	473	2339	4526	2378	4722	5763	643	5555	5646	1018	3955	3571	369
Row 3	2008	3511	2017	3878	3731	884	1623	3757	3230	5892	2221	1037	4907	1529	526	3028	1198	4876	3501	3537	3402	5878	2258	3164	521	1813	2810	1539	5767	380	1907	1775	3890	3924	5652	1620	4807	1274	5377	2037	1166	1598	3074	73	3126	3599	3100	4324	2475
Row 4	600	1860	5877	478	4118	3041	999	5930	5850	2537	5696	230	4444	1471	4119	2367	1122	5739	1174	2395	5116	3211	3561	713	284	3633	3838	3882	733	2161	357	1333	4021	233	1810	2138	3273	2808	2067	3123	5345	1763	3352	3788	3233	1471	155	4355	1210
Row 5	1328	749	325	4538	4310	1038	4822	1942	4875	2703	2674	1036	3060	4006	5056	3292	5816	1193	565	2624	3260	3688	1968	5022	1040	5756	2255	2511	5910	609	3720	1237	1358	4045	5775	5667	5082	4596	1609	3957	1299	4282	4993	4358	2288	4048	1650	2104	5241
Row 6	2215	4727	2500	5903	695	1522	942	450	3776	3452	359	4385	1172	1595	5742	5217	1370	5409	4299	5965	1017	2256	1263	5299	1248	5621	1586	5296	1271	3689	4536	3485	2416	1036	3387	3110	2557	4329	3559	333	1781	3917	4718	2953	5512	4459	2169	881	3868
Row 7	468	845	4884	2723	2108	4182	3970	1729	5768	3265	2999	3457	1801	484	5873	2836	3870	2982	5393	2199	541	5726	3979	4457	4443	931	3968	2901	3100	4848	769	3567	5693	5652	290	1801	3834	4260	3529	3602	1525	527	1059	3325	1010	931	161	4880	3913
Row 8	5553	1078	4453	5278	5057	2909	3720	5988	877	621	3088	5725	1389	655	5417	1041	944	1217	4875	5204	4745	2476	728	5272	3535	4052	282	4465	4213	5161	2378	3765	239	830	3043	5296	3739	762	5284	4615	1383	2371	4339	2771	3025	3756	3812	3969	4972
Row 9	2686	3172	3717	5162	3900	2988	2696	1952	3270	1161	164	2430	3538	3928	2669	4368	970	1965	2106	1732	1248	720	3114	3618	5059	5885	643	2814	3696	4611	1786	382	1783	5502	5543	5682	2490	2238	1634	5759	3398	1797	2189	936	5725	4858	5303	695	822
Row 10	1408	2426	2069	2128	5540	5687	1187	5424	329	4001	3120	4940	5786	3501	723	5288	3044	405	1778	5282	2038	1537	2680	3834	3726	3615	3558	2583	2918	4252	3405	4325	678	5474	453	217	5160	1639	5641	5488	5640	2761	4428	5425	262	5150	4713	3305	5554
Row 11	491	2586	1591	2027	5265	5424	5753	2880	2982	2336	5797	1234	5740	4121	1912	5214	4574	2128	4373	213	1769	3861	5852	4529	2288	5277	4790	1437	3990	2095	990	4480	4680	2580	507	3945	2004	259	824	4986	2595	620	220	2335	4741	2131	1548	3314	4258
Row 12	5920	3527	27	3780	3378	4555	67	2655	3345	1503	644	5439	2493	5123	4119	5073	5629	2064	1076	5888	2887	62	2483	3507	281	4817	2247	2411	364	5561	669	284	3087	695	4063	465	5250	4130	3119	2594	5633	3762	2033	2125	2885	152	1197	2514	2215
Row 13	2273	2402	5102	2334	4884	2608	2615	3700	4855	5025	4064	4415	5693	4347	1502	387	2410	1967	5637	539	5086	2230	172	2847	4263	2297	5732	4415	3493	2245	629	5766	4646	5731	2100	3529	2338	4714	1229	1192	3738	5292	5607	3431	3638	1109	3817	47	3075
Row 14	3454	586	2160	5684	757	5007	3946	3053	4738	2361	546	983	2990	312	5629	2720	2411	3157	5057	1124	4385	249	4862	3677	5855	2292	1314	964	109	1360	4038	3562	1946	198	3245	2702	5205	1191	5755	3943	3551	301	4925	540	612	4553	3259	3022	1710
Row 15	2316	4146	95	2564	3007	3771	2419	5299	5085	3382	5407	445	1420	2968	2390	1618	213	5092	822	1404	4846	4764	4954	5146	3689	5494	5758	2242	2752	2779	3952	5068	925	4046	1631	3931	1817	4050	3229	901	1431	2636	1345	2851	5604	3735	4468	5816	2826
Row 16	5289	1219	1671	4053	173	817	1741	5666	574	3983	2418	3353	1934	1485	4277	5980	3116	2208	1797	1165	5436	2697	2596	2072	4042	5446	1675	1776	3913	1491	4601	3202	2709	272	1254	2882	1089	2994	2547	1662	977	4965	5015	2910	449	3291	2889	3565	5498
Row 17	4685	4730	4934	1382	1325	1005	5424	770	2679	1199	4683	4170	5800	1884	878	72	3137	3760	1160	131	306	2822	1107	5270	1837	4016	5719	5127	905	3284	4625	5590	2013	3558	972	3337	4563	395	4107	1242	1594	2790	5411	1393	4673	289	1465	1810	4048
Row 18	2625	1940	4354	5446	3047	3623	1282	1063	3342	409	1968	626	5033	1557	2638	2591	2528	5975	1154	2923	4081	2395	4516	870	1806	5909	5543	2094	1373	1352	141	3997	3292	4494	3443	338	2117	4725	1401	5459	5133	3368	84	4166	4924	2722	757	1452	2696
Row 19	1910	4374	776	4305	2890	1646	110	2798	1189	2203	4171	2540	2344	2167	5832	837	5610	170	2954	4335	1570	2412	3467	4937	2496	1633	3861	5217	2390	5312	1912	4299	3686	2688	2604	576	4333	2713	3373	5522	4915	1543	2061	1259	3710	1893	2095	3320	2062
Row 20	5048	1654	3631	1460	5121	2567	3955	754	428	3171	3143	5740	5083	1442	3425	1770	4045	4000	103	757	1373	5624	5672	2916	1685	930	625	3577	3025	3945	5638	2073	5598	3269	3532	4718	5835	1487	5472	263	4658	2614	2	3740	4055	3427	5509	2099	1426
Row 21	5612	2856	2799	5235	2528	5714	920	3458	339	4496	482	4283	4134	2555	3881	1402	86	2599	1237	1573	2070	1499	230	4684	1500	3970	2738	4927	3479	4837	353	3090	1693	3151	2325	4220	2865	3245	1677	3203	1740	2159	1486	5874	4713	5367	1276	4799	1965
Row 22	2512	371	4035	4011	601	2718	5511	4571	5455	4437	2049	4292	4789	5139	5984	1940	1463	4204	4804	4707	5881	2007	447	2039	3492	321	752	2858	1596	5550	4823	4108	5921	2857	2119	522	5574	1630	5092	5029	66	1140	3321	4855	279	3305	795	1741	1508
Row 23	5598	448	1389	1604	895	3428	5096	1216	4179	1954	2811	3729	776	919	3649	3633	3037	4171	3207	4666	3262	2235	4732	4402	5556	3587	4680	2860	4381	421	4368	3979	869	5756	5582	1764	3183	4677	2979	1361	630	5789	5089	1406	708	2738	5038	3745	909
Row 24	2244	2411	4170	4479	1142	2572	4034	4729	1251	894	3110	1672	5261	1088	2540	5016	669	4303	2199	5346	1282	3559	5976	1071	2648	1381	1778	5386	419	5522	294	2662	1932	4464	1141	3074	1035	5174	1803	2286	68	4912	3957	5328	5999	497	4344	668	4799
Row 25	542	14	81	4101	5990	1151	748	1371	2928	134	1789	2450	428	4451	4381	4891	5591	1455	5926	4765	3257	2211	4832	2168	167	4159	2167	663	2502	2835	5462	3043	2848	5542	1143	2837	692	1891	4207	3620	2025	5996	69	2452	4446	4449	1343	4037	5904
Row 26	1268	2801	3160	3478	1632	5327	3644	5791	1494	4307	2293	4328	3769	5336	1176	3310	479	4013	4002	2370	2219	1621	4394	2215	1689	846	660	138	2188	4696	41	3455	1497	3201	932	3128	2528	4576	2919	4021	2883	5211	2348	651	4547	3524	3961	5025	1536
Row 27	1962	1394	3754	3583	5788	5969	5272	633	628	5410	2820	5324	5451	275	820	2651	1207	3948	5178	5783	866	3198	2665	77	5546	3316	4623	3069	1276	3647	4604	3238	5041	2358	821	4828	2326	92	5460	2954	5502	2280	2277	4952	2554	3097	1602	3760	1044
Row 28	780	3542	1910	3978	207	1986	3523	3522	609	592	4798	4256	5195	2036	3296	1553	2856	2124	3879	2948	1584	832	2449	3863	3109	1401	416	205	3003	4176	1249	3782	1718	3158	1759	1924	5144	5282	5446	5752	5873	4243	4007	5068	278	1303	621	3134	3426
Row 29	4499	82	5009	5330	2531	2871	2439	3931	3287	2644	934	1463	3892	4715	3180	1049	474	5104	192	5755	4549	5943	5628	2791	3950	4695	3069	5252	5316	203	2678	3814	284	1686	3144	2814	4557	5582	745	1844	2225	1678	3306	117	393	486	1165	867	5589
Row 30	1357	622	4137	1300	249	928	5249	4944	3997	4501	4259	4200	1178	2073	4483	2863	5216	1297	1420	4798	2042	3263	1023	3720	568	1139	4113	1053	2304	4979	642	3660	5600	4779	4959	5849	5706	4208	4793	3703	2709	3052	1902	3886	5124	385	749	4339	1681
Row 31	2168	3137	3723	5430	4159	1442	5998	5297	5554	1051	1600	4533	1692	5260	4133	471	4219	3981	176	2426	2773	3879	5134	5824	5780	3020	4947	165	3768	3286	1845	5936	422	5568	5366	4580	1010	5363	3877	563	414	5477	5096	2106	4736	3228	2576	2954	1208
Row 32	2752	5380	3981	630	4513	3805	410	1533	2752	574	5300	37	2419	5235	459	1986	4600	5039	2995	3963	2916	3558	4376	2392	2653	482	1127	5880	3057	4081	1088	5808	3460	5068	437	1973	2873	846	3505	5624	1419	2805	5661	3837	2039	119	5823	639	5158
Row 33	2817	4602	2073	375	2978	4465	3027	3459	5592	2907	515	3672	3995	322	1131	3063	759	3104	5935	1604	608	5558	3023	3412	5218	860	5451	5337	682	90	4495	3499	4691	568	3873	1669	5032	900	5127	4623	3806	5642	2294	1800	5964	3425	4862	722	528
Row 34	4796	2326	1135	4354	5348	4547	3572	208	3997	2909	889	4086	1403	4388	2777	1970	2260	4445	1001	3159	3572	5624	965	3213	1918	2764	3177	5342	1626	3898	5870	422	223	1005	4775	5571	5551	2347	5778	3547	5255	667	1633	657	5054	4409	2627	1314	2854
Row 35	3628	4472	426	3252	5437	3639	5169	2200	815	4510	3826	4712	4379	4247	4935	5383	3022	4506	4934	5368	4284	2481	4623	4950	4113	5280	4004	2522	1906	5317	5375	5534	3789	5801	2785	3225	3439	1953	5425	4253	463	3250	2964	4842	1497	1899	4225	4519	404
Row 36	3158	3887	4688	5638	2509	3638	3750	1788	1641	272	3694	958	5647	3227	4747	5447	11	1971	2885	1964	1396	1137	2426	4646	4101	1267	142	6000	5491	4661	404	2649	2547	5091	2286	5055	2728	36	843	4369	307	4536	5326	5954	1762	4072	5400	1773	43
Row 37	2284	3737	1438	3420	162	83	1521	1429	225	1520	920	4885	1923	3568	1432	1013	5854	487	3741	5890	1329	2109	197	5864	1434	150	1626	5506	5549	3398	5548	1833	1134	986	5253	1296	1068	773	2725	1293	2292	3644	178	4215	1212	1609	5228	1065	2095
Row 38	2968	955	3424	5076	1151	3287	509	1300	4912	15	849	2310	5562	2681	3444	547	1933	4740	1615	2706	1464	2907	4998	5107	3085	3212	319	4693	2439	1383	788	5406	2337	4212	4481	3488	1498	4990	4787	410	5004	5636	2720	4566	2316	164	5112	4249	4903
Row 39	727	954	367	3633	5951	5474	717	3163	5792	5410	5601	1175	198	5007	3511	4409	3488	999	5907	2477	5785	317	1481	5421	3036	46	1736	3199	5158	5985	2102	5884	939	2468	3517	889	1941	4234	4052	1733	3644	3652	2907	3841	2659	417	2250	146	1416
Row 40	2157	2623	1201	2473	4104	621	5508	4150	2357	2707	3307	2341	4809	3191	3279	1277	708	4168	3218	4941	2219	4950	2584	5871	1856	425	2529	2273	2675	2675	3688	4831	5297	4888	1304	3400	5508	812	1550	1864	3518	4856	4205	2327	2047	1484	3603	2754	5651
Row 41	821	1694	1869	5770	4278	1739	1625	4703	4268	3898	1377	942	1585	208	238	473	1511	3638	5980	2322	5187	1844	5840	4043	49	2166	90	1532	5769	2843	1182	589	4537	3051	359	2815	4790	1984	1517	3057	5881	2894	3998	1465	3102	4236	1938	4612	1874
Row 42	1917	934	1061	3761	773	5104	3809	2939	5193	5340	2708	2036	522	3297	572	3572	3655	3387	2361	5638	4903	5418	5518	1797	3415	983	4898	1651	2920	3510	3524	4837	4443	4585	2598	5215	3688	406	2154	2880	5746	4861	4915	267	2158	5487	3839	5812	2873
Row 43	200	5450	1776	5617	4967	3572	3032	5950	2470	4682	2870	5979	2206	1706	4421	790	4303	3636	4478	4709	5790	1357	4454	4651	272	4721	808	5758	2560	620	2631	2759	69	4406	2375	5035	1978	5406	4985	4447	4088	1854	4425	294	3560	2846	1084	1862	482
Row 44	5561	571	271	918	5024	4921	1189	3745	5729	947	304	348	3577	3062	416	1983	5437	5451	3960	4843	4435	2406	2930	289	831	3223	3848	3677	4306	5710	4158	3866	280	4428	4784	5304	3349	5972	3048	3077	919	3352	3424	4495	413	3839	478	5850	3290
Row 45	4437	4692	1724	843	1621	2012	1674	4844	5859	5350	3149	5568	3508	1015	5848	1936	5798	5151	5284	5770	2198	2361	688	5550	5785	5183	5962	3624	5661	5812	913	4097	4503	2636	4940	124	4648	613	4967	4507	5963	2116	4075	3470	3131	3922	5406	2929	3072
Row 46	4689	2698	5270	1050	3386	4819	834	2569	4781	4457	2229	4592	5369	326	3095	2005	5266	3218	652	5879	2184	5158	5841	4299	3232	3311	1430	1154	2716	4358	4225	1405	1056	3495	2454	4442	2313	3288	1011	1094	1745	3239	5685	1113	3565	2779	3118	2830	5996
Row 47	3770	2708	2180	2928	2549	479	159	5859	1908	1313	2575	266	5537	3979	1321	3031	433	5762	5344	3721	772	437	5465	4011	122	577	1576	2900	3695	4406	2896	1464	1113	5076	4391	3662	5554	4550	3521	1462	5862	95	1727	5399	4074	3047	2430	4507	2809
Row 48	1773	2227	3580	2210	1691	1591	2331	2268	3166	5231	5962	1571	2126	1426	2684	1202	5816	345	755	4366	3866	2217	4227	3960	3943	3625	2034	990	54	540	3798	1827	2767	1378	4036	4457	2968	366	725	134	5596	687	1704	1722	2112	4388	2923	1928	4733
Row 49	3678	293	2598	5894	4519	557	3837	2144	2591	4826	2198	3130	2623	4025	5897	4001	2060	4354	968	2426	5078	1102	2021	5764	2805	3743	1876	1193	666	3803	5925	4343	4095	2522	4237	2614	3079	2073	4758	5669	899	955	2799	3521	4979	2695	1522	1039	1048

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.