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	1041	4924	5982	5966	5054	4247	5559	1809	4706	5686	178	3022	3694	269	1698	587	3648	1107	3064	1476	821	1459	3748	544	999	5996	869	4463	5094	4640	276	135	3564	258	101	2617	4504	5660	4425	3210	5345	4603	231	3039	4871	1929	3625	2519	3035
Row 1	689	3994	3855	2148	1742	4398	3147	1737	5267	1610	831	3906	1885	965	1469	2143	1066	4086	646	725	2511	3856	69	1113	4087	3108	5983	15	733	2502	3050	1421	495	905	3569	2237	5303	715	3973	4569	2325	4804	2475	4210	5769	3943	352	834	2029
Row 2	998	1558	4539	4853	1627	5651	2939	4734	5634	2953	5466	2135	3	887	2629	907	4455	4865	209	5170	2838	4778	1494	1641	1252	5704	1409	5195	55	2242	1223	1053	3800	5761	5905	5426	5412	2843	4159	5045	5796	3624	1179	5798	4511	3808	705	2965	2673
Row 3	913	2134	5510	5690	3628	1151	942	3332	2560	136	3387	4802	1358	4439	2601	1119	4343	2026	531	1186	185	5575	981	3809	754	779	2319	4562	1484	5283	1234	2397	1417	744	2086	5045	1895	3028	2377	4454	3163	5763	3255	4521	4201	5856	5639	2544	1882
Row 4	169	3729	2066	5744	4710	5875	497	5489	2193	5058	972	1476	292	3368	2893	1035	5454	1938	2929	2481	4314	1383	5643	4076	4638	4163	2276	4493	3802	4820	374	3970	2548	2440	3714	1258	2315	4210	746	4507	3268	1717	5983	3559	5085	2876	4594	4538	4813
Row 5	1523	1019	3126	2905	661	1202	1542	4824	3478	35	2626	2297	409	596	4844	2849	4309	101	5163	2519	847	3669	5786	2564	3652	3345	1648	527	1939	186	5339	3461	1204	2465	366	1865	3666	1907	689	1144	1941	3314	3440	2350	3909	2283	5198	2217	2384
Row 6	4360	4735	3230	2029	4521	5794	5680	1866	1441	207	3804	1626	5546	1265	2829	2011	1630	4694	5676	3537	5382	819	5478	2695	4259	1827	603	542	1024	2819	2925	5383	1554	155	1412	75	5948	1091	1940	1389	1298	5744	3014	843	1008	5843	2853	2638	4536
Row 7	2529	174	3917	3348	5651	611	1606	1477	1214	2147	2501	4033	5072	1883	5586	5227	3295	5661	5175	4386	1600	564	5683	1344	3577	525	2351	3420	3378	4988	1956	5906	5161	5872	3254	4812	483	4860	288	1696	1006	2788	5728	78	4671	5314	5305	1965	4974
Row 8	4480	350	574	5043	32	1917	2620	557	4268	39	3935	3256	1994	3841	2416	1866	1094	1228	2349	5953	1515	4044	959	4303	3772	1037	2973	3086	341	4938	2060	4820	5288	2634	3863	5320	4550	482	5877	2817	520	3811	72	2514	1651	2488	4380	2745	3715
Row 9	728	2698	5230	4771	3656	3532	2543	4692	505	5629	5033	5443	1688	3853	4730	4321	1715	4049	2871	2197	3926	5688	2717	1736	5760	5230	3387	2247	3609	131	5962	4336	2828	5192	3107	484	2723	5650	5176	3228	5278	4209	2670	966	2061	1400	5287	3776	5449
Row 10	2158	5972	3374	1845	2688	5110	1604	1918	2496	3851	5527	2627	3813	3863	5454	3004	969	5937	5727	619	5113	2954	5896	3321	5624	862	5382	1023	149	3157	472	2306	3129	3845	4151	5817	2954	5754	1735	5449	3605	1261	2075	1418	5123	1529	4421	92	1466
Row 11	4148	710	578	1102	606	3899	725	1467	3280	1748	1616	436	2219	3921	3565	64	2071	3381	3018	1825	5116	2467	5430	376	4542	847	5498	70	5268	5590	1536	3415	299	2114	4516	904	12	5241	2371	3291	989	3986	3727	3208	1906	1291	3272	3977	4672
Row 12	289	5801	3787	2755	5230	4163	1296	77	3661	1366	5344	3250	2901	2759	3548	5014	1275	4451	5025	515	821	2316	1504	4806	42	4712	712	1333	1983	4688	4	2271	4489	3791	5025	3719	1953	321	3795	5613	1686	3139	2862	4586	5897	410	3600	1171	4860
Row 13	2625	1686	5681	4940	3190	4487	4982	1901	5198	314	3883	3886	318	153	2375	4109	5178	93	62	5498	3888	5674	1184	1027	2536	5770	923	2945	3369	2094	1805	5993	3779	1486	4933	968	5972	3915	2869	5170	4229	751	3056	4546	904	5430	2655	82	5523
Row 14	2716	5579	3410	2390	763	4436	4926	532	5359	1870	3900	1452	3675	3893	5231	5160	2826	199	5131	740	3067	4301	4968	3818	1356	3514	4721	785	168	4802	307	2884	4381	3717	5273	5143	2153	4198	5674	1511	68	3574	2963	3742	1467	2194	2901	4292	2392
Row 15	2032	5031	5459	332	3999	3276	1687	1512	1997	2472	1679	799	2779	4562	5180	495	3835	4322	2647	2032	3996	4158	2099	1570	1120	5841	3036	3313	2742	1327	5705	4774	358	5163	5105	4356	2439	792	5867	4436	3264	1546	5234	42	108	4413	536	3942	2735
Row 16	3183	5974	731	1340	2073	2300	2459	1913	5335	5772	4655	662	5476	3428	1019	4639	2533	5374	1078	3324	5241	5513	588	787	4747	629	894	3160	1164	4836	5894	4347	4810	625	5686	882	2924	2145	2795	2259	1916	1449	2921	1392	4876	3939	30	1409	3313
Row 17	1108	4733	2553	620	5320	3339	5366	5948	4233	2526	1112	3069	2420	5458	1878	3044	5143	2759	5968	1288	5553	2227	3203	1002	5147	4595	5878	3085	4625	1286	397	5732	18	2950	351	5338	289	5717	5285	4522	2242	397	1590	4661	5854	3467	1705	4997	225
Row 18	1672	285	5778	3898	3488	780	3044	2082	657	129	706	1943	526	438	1961	3475	789	1298	3764	505	583	2285	2747	980	3874	1408	834	1341	3112	5830	1565	4784	115	1343	2682	3602	2123	5725	5683	2780	5854	389	4722	379	826	683	3854	1614	1981
Row 19	1617	2119	2564	3902	4866	3543	1776	273	4376	3116	3385	4206	4681	2169	4320	24	4850	1921	2146	4575	1604	4925	4428	1992	3647	4806	2817	4329	2660	4431	310	4276	549	2873	2178	5415	415	3953	5687	4790	1068	3072	2996	5748	5240	1315	5771	4090	3235
Row 20	1917	2664	4838	841	1091	830	4487	5897	3646	2816	2556	2077	3125	832	2626	5998	3009	2040	412	962	1727	5202	2029	4798	2197	1777	4038	3512	1548	2127	746	3464	4790	5584	4304	5881	413	2791	5778	4059	5607	2333	136	2732	3165	2761	2729	174	4800
Row 21	3141	1135	526	2343	3164	5324	4539	4940	3362	2051	487	5488	2796	3950	4278	2380	2254	4159	2793	5044	3936	852	4650	269	987	1382	3434	3747	4110	3607	2547	1250	4742	3073	3592	1905	2396	2131	844	5758	4181	1330	5246	977	5280	3524	3357	1534	1682
Row 22	149	578	5618	1000	5228	5886	1987	609	3320	5733	4718	926	2280	5968	5668	5352	3559	1572	1748	5690	2415	1505	3871	3745	751	4847	3025	4274	2204	4558	5955	2352	5135	5572	3352	4362	5458	5339	4970	2778	5071	3688	3704	1351	3655	3371	702	1213	4942
Row 23	2450	903	1357	3954	4773	5101	4704	3620	2126	2978	5823	683	2932	2175	5818	2504	5526	4179	1962	4864	3149	4739	3935	836	2442	5286	4490	5812	5987	5703	4754	2437	606	110	391	5378	5210	5094	2997	1335	2072	2820	2018	5003	4994	1835	1507	4520	14
Row 24	3468	3384	3162	2206	1319	3998	4648	604	2488	4460	591	2190	3213	3027	2796	3322	3417	2173	2532	2511	5170	3867	4582	1989	5885	3584	982	1720	5090	5501	1733	2558	2885	4895	4764	4203	2893	3412	4806	5380	1871	5396	1570	5084	2422	4365	2406	5838	537
Row 25	4937	2348	5707	2804	929	1695	2689	4513	2677	4408	3603	2178	140	160	5062	5035	4924	3264	1927	2335	2069	1306	4206	1465	2875	3289	3886	1239	5694	3724	1776	4631	71	1482	1434	1000	3177	4122	5512	5854	2529	3115	2032	2669	3274	1093	1703	2198	4357
Row 26	3630	4532	426	4935	2738	1890	1810	26	5776	3048	5719	3499	4824	4349	3569	306	5783	4568	3483	3905	4080	3336	433	1194	5368	3102	4468	460	4805	665	4817	2434	5197	5242	1368	1934	1132	3177	1959	907	225	1678	4405	5049	26	1974	5354	5809	542
Row 27	2837	3713	4621	173	4146	5815	5540	1247	4282	6000	52	4947	4816	2485	4144	4058	3853	78	5189	1030	2036	96	1254	3714	4500	303	3740	474	5657	3548	1015	2493	1260	5636	2665	5406	5450	2205	653	3731	2204	704	2678	1020	3188	821	5077	1040	898
Row 28	4266	2069	2934	4361	3323	647	2861	3625	4387	3334	3282	1934	4348	5774	3194	3983	2439	2600	3433	4643	3252	1164	847	3955	3841	1866	1142	4661	943	2182	5559	5208	4251	2493	3569	1573	3140	429	5198	1526	3762	2479	3460	2110	2253	654	92	4691	3253
Row 29	3524	3334	504	4687	4181	4458	2528	46	5600	1189	989	1782	747	197	32	3240	3765	1605	379	4193	803	1904	1954	3281	5364	4063	5534	17	4155	4225	3270	1679	1559	3773	366	5739	2231	2894	5785	1831	4082	773	3613	4829	969	3644	2068	4733	5249
Row 30	2446	2926	51	4350	4880	3332	3713	2942	2865	3730	1097	1089	1000	2776	2647	4773	3142	2386	1004	35	2170	2834	4116	2943	446	2945	3911	4090	5012	2644	3338	1458	5569	3388	5808	4448	719	3521	1390	3584	1250	2487	4672	2249	5262	1319	1021	2404	3704
Row 31	2024	2438	5874	4858	554	2816	5304	3498	727	3394	2510	3370	731	3968	2939	4119	3775	1387	4838	1295	2776	2421	2545	5263	1093	4794	4525	2412	5815	928	116	1839	3366	5989	697	3919	2804	1	1417	3530	3394	3927	900	4125	1894	3838	2243	5669	5225
Row 32	1080	964	2000	3500	3509	1263	4592	2302	5787	1003	2117	714	1118	3956	4079	1107	4653	1998	3911	4653	3415	1440	2046	1342	2340	170	3235	178	2413	2904	5402	3492	3867	1402	992	1375	2664	5584	3677	2450	587	5794	3164	1705	3750	1243	2811	2402	3241
Row 33	721	1054	655	2161	3100	1996	4500	3270	5231	4678	5682	2135	4079	3174	1	5481	4165	1376	2144	3748	5053	4594	4334	4847	1757	39	2596	2999	2849	4997	239	3569	51	894	5730	3150	2889	4230	419	2120	2907	101	4254	986	3274	4255	466	1438	5631
Row 34	2610	5186	4684	1203	3520	3530	2959	3558	125	5958	407	5122	197	3976	5172	1090	3705	2321	3979	1934	2740	98	4841	2840	4352	5827	114	2607	292	1552	2237	2902	737	920	4105	4257	4449	1064	1815	4574	1021	2221	3695	1217	196	2867	2306	3901	5187
Row 35	284	5834	1927	382	4675	4767	4734	4501	4880	1340	4793	431	3576	1694	1168	4496	5798	5425	2945	861	1239	1518	1882	3460	5213	3098	3656	2079	5404	1556	1266	5688	1390	3193	70	64	1959	4803	4564	839	142	3356	1270	3717	5050	2438	2213	4847	1862
Row 36	5157	5708	3101	675	1589	561	5887	4687	4216	1966	4090	5771	3231	3778	1161	423	3847	1224	2382	2649	5787	3220	2791	3143	4490	508	2192	927	2720	1039	2788	1876	746	5889	2550	2335	449	2437	1021	4664	4402	5111	4435	1633	2889	5595	2055	735	819
Row 37	4437	3384	606	1657	175	3748	146	682	5940	1072	3401	979	3860	5277	1725	3748	1826	4059	4196	4263	5080	2860	2664	4191	1295	4296	1079	890	351	1814	1708	4787	5198	2313	444	5372	61	589	53	1	1661	3454	979	5521	2730	2704	3268	4556	762
Row 38	1464	2818	5842	4324	5482	4033	5618	3777	5111	507	4128	925	2215	2915	123	4527	3358	5495	4588	3947	5547	4589	5608	3001	5568	5128	5730	2271	2395	4286	3032	3859	1104	2874	2182	585	906	1799	4362	17	2306	2489	942	4520	5403	1064	3047	2760	558
Row 39	1635	707	105	223	314	3106	5790	5441	2836	2060	1836	1121	5092	5695	2224	1965	1876	2809	2871	3675	1170	2887	5980	3658	3829	4500	3061	4892	1546	5821	5450	3180	527	5555	3403	841	2660	3192	282	5495	5251	2117	616	4343	1811	2840	307	3687	5648
Row 40	3178	1362	818	65	1341	4476	3893	5841	1536	2785	1386	1357	2235	4566	1883	1789	1968	2724	4449	5160	3005	3944	4411	5122	4559	2753	932	1399	3060	4619	1047	237	5980	1864	301	1321	339	4194	1161	1875	978	2547	3231	3212	1113	5114	5001	3081	1837
Row 41	3450	2240	4842	1393	650	3963	5952	3402	4895	1350	461	3513	2396	698	3492	4260	998	4813	4599	5191	5974	474	169	2520	3705	3381	3633	2818	2381	713	4655	5831	2952	3496	1223	3601	1458	1175	1003	352	2525	1463	3865	4920	2160	1357	3180	3158	169
Row 42	1779	2349	142	2252	2517	2662	5956	5898	294	2774	2279	1006	1429	2109	3958	4925	3331	1558	383	4506	2561	735	1030	4024	4599	5950	184	5955	3129	3341	124	4907	5690	266	1159	2207	2928	1114	2104	3221	3888	4382	4227	5316	490	2184	4241	3821	3742
Row 43	4623	2326	302	5357	3355	4325	3955	3304	4508	3910	433	1849	4034	5340	1539	4299	498	3745	1226	1612	5848	4447	5500	4230	2674	4816	4719	4857	3056	2540	2599	1678	4865	2900	1034	2220	1225	4989	5524	5733	2898	5957	1582	932	5296	3120	5231	5794	864
Row 44	457	1406	712	4903	905	4941	1576	5721	3659	433	2776	199	3031	4454	5064	5931	5487	1283	1155	4476	807	888	1374	764	2469	2305	60	5589	1535	5854	452	1991	1259	1163	893	2164	104	2469	1884	3762	2901	4660	3961	5932	3113	3024	5862	2599	4307
Row 45	1017	1074	5113	1904	2447	5877	4373	4752	5936	3961	286	5789	4413	2276	1047	5575	3169	3211	5679	5638	5094	3440	2539	3753	1400	2470	866	4424	2332	3464	2730	3348	4538	1842	5251	985	1718	3623	5736	1654	1584	22	1442	5996	2298	2489	5571	5466	5699
Row 46	5249	5104	4793	2689	1642	2546	4089	4112	3411	2512	443	875	5241	3790	5413	1083	3041	397	2800	664	133	4454	2247	155	5895	2242	2452	2384	1812	1917	2083	1060	1021	875	3748	2662	3421	1836	774	832	4347	1216	1707	3587	5006	1119	4669	2046	1516
Row 47	1469	2710	1649	5922	4956	1803	5817	1197	4254	2200	3009	171	4283	4068	1191	5158	1816	3852	2578	3651	4626	3410	1998	5841	5116	5585	4847	234	4254	893	1749	5722	3602	3397	5644	2557	5200	5461	3754	3453	1661	762	3623	5943	4829	4813	5100	645	2665
Row 48	1678	4295	1290	5087	293	1131	4202	5877	5978	4436	4130	870	185	3852	4472	3582	3496	1028	2781	2957	4782	233	4617	5543	3856	4560	4372	2669	3659	5016	5333	5337	3311	623	4423	3603	1754	2625	3479	1731	1061	1609	2601	1245	5460	1072	4827	2956	2100
Row 49	1608	5912	881	1840	4528	424	5696	3088	4795	2364	746	3810	1697	83	1121	2319	4506	4723	4072	1131	2202	5803	2191	3810	2403	3436	3270	3474	2263	225	5574	3870	136	454	5710	4664	877	5405	1751	5672	1768	2497	3482	3464	2579	4602	5783	1085	3325

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.