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	2107	5751	1576	1509	5939	3449	1146	1670	4949	5041	2030	3507	3167	650	2561	4020	935	6000	191	5118	2852	2109	3095	4957	1615	545	5389	3673	695	1217	4774	1252	3858	2792	3724	3994	5083	1457	5649	5285	5349	3832	1129	1691	4222	5045	2263	3837	5148
Row 1	3241	2281	2777	2797	1162	661	2742	3854	2206	2885	5929	4278	5504	3005	2907	2415	904	307	2252	1605	3577	683	5034	1048	4974	729	2688	3440	3183	1223	5021	1214	3126	4355	999	4306	835	1526	5544	2893	3513	212	5218	4594	1232	103	5818	1585	2434
Row 2	602	631	5665	1129	5289	4046	4010	2796	3595	5192	4633	240	4305	5271	623	3044	558	4948	2550	48	3	2096	335	881	4813	5708	2822	2782	3102	801	846	5177	2241	5828	4276	4129	1235	5347	4264	4295	892	652	2383	4029	577	2874	581	2734	5781
Row 3	1698	3087	2755	5189	2552	3551	5116	5547	103	5130	151	4188	5875	3474	1640	2538	1530	5426	5736	3542	3351	5692	3105	20	3449	1600	5691	3735	4652	2568	5069	2278	1911	559	5409	4415	1020	1321	756	752	2555	5449	1458	5252	76	3388	1185	4051	1767
Row 4	2559	3306	2329	1869	5429	2478	2170	5995	5096	513	3816	2216	4241	1114	3734	2264	1853	2438	2569	5967	9	811	2490	2122	5060	2079	1973	2221	1334	280	2881	1322	1578	5748	1455	4011	2874	3993	283	5212	3807	1314	5940	1552	3029	341	2338	3252	4869
Row 5	4460	5802	1183	3703	5376	3918	1161	4518	4898	1722	1689	4653	4153	3001	2045	3771	2332	1556	368	2379	5741	3833	5581	2465	791	2283	4729	4892	652	2803	1529	4348	2092	4988	607	1422	2624	3115	3405	878	5543	1353	307	469	523	5695	2112	3307	2110
Row 6	5041	5355	3466	997	5991	2564	3301	4311	1229	3404	5184	5424	3105	176	5425	4524	4754	3637	723	4853	2061	1029	4386	1578	4927	2548	1452	4796	846	5947	3942	1310	2451	2002	3944	5890	191	2705	1032	2199	2372	2886	2764	5519	1256	1590	4430	5244	2228
Row 7	4812	3017	3472	5683	3555	968	3302	5923	2843	998	4687	4482	3637	4298	5802	5522	3696	5240	5755	4392	667	4663	3744	3247	4548	104	2931	2103	5166	4099	5153	4517	4891	4307	2926	2782	3298	5601	4292	3224	997	1303	4769	3251	2200	4736	1849	3885	4942
Row 8	2963	4329	4013	4218	4927	4061	4402	1971	4278	2796	97	1346	2186	275	2631	3004	2084	2971	3657	1388	3708	1273	5855	3758	3716	4868	5528	1737	5167	5756	5005	2438	1665	2560	5206	5746	2417	901	364	4599	5227	3628	3694	1445	5284	4152	660	5581	2605
Row 9	3684	638	3006	5712	4699	976	3702	3683	959	331	2727	3194	1985	4457	3561	2970	2775	4947	3887	438	5680	3447	3453	3857	4592	3770	90	2272	3350	2906	1119	5794	3538	3860	5410	3179	1698	2432	2355	4838	2792	3908	983	2457	1266	3839	761	2521	1196
Row 10	3360	4290	5902	2140	4638	710	2779	2250	1796	3574	401	789	1277	3060	6	5265	98	5651	3621	3325	4337	4626	4185	497	4744	4130	3921	1503	2340	1125	5069	2101	3677	773	4632	2381	1697	4536	623	363	1751	1500	5872	4593	5492	4903	1513	4597	2898
Row 11	5280	1693	2236	4841	5476	1241	3810	2647	3253	3224	4991	5427	2706	4806	2310	4033	3746	2546	5035	2561	5683	5543	1575	1851	880	3093	1372	1895	5927	1344	1154	5008	912	5728	1956	5536	3673	1461	2813	791	2805	2481	3452	5219	427	3181	1079	69	3389
Row 12	3921	476	309	3820	1003	5106	947	3774	5735	2372	1993	804	1777	494	865	1463	3798	1643	913	2810	2595	1707	146	1717	2710	5576	4223	2249	4579	277	264	3686	485	3622	4430	3823	3208	190	4797	5241	3894	1455	1776	5826	2434	4510	1764	4818	914
Row 13	2252	2123	1161	2077	924	2802	897	4494	3266	5379	3997	4203	2971	4188	3763	4768	3499	3750	4354	3201	228	573	3304	2815	1183	1220	5998	3328	42	3639	4000	1207	2896	4063	273	1176	3874	4680	2476	981	2396	1487	2155	2822	669	1499	2661	1794	5558
Row 14	1149	4145	4915	2455	3306	3617	4215	3201	3777	2639	4388	815	3880	1203	5281	5428	3150	4216	1588	3113	3782	558	3791	400	4292	1698	2935	4903	2995	2827	1263	1562	3279	3733	654	4236	4644	1075	2548	4132	5403	255	4774	2563	3681	5484	1409	3218	3193
Row 15	688	4935	357	3683	4042	5852	845	2185	1618	2348	2443	3993	4810	561	821	5130	2955	3223	3288	978	866	2958	5809	3519	2328	4493	1445	1615	1145	1904	395	730	1492	876	2704	1296	1966	187	5403	2372	4530	5564	2447	3906	608	2157	1756	3587	3614
Row 16	2889	496	1951	5555	819	297	5384	3790	4653	4502	911	1153	4736	4023	2805	5885	747	613	4929	493	5142	324	4180	4574	584	460	3009	2180	1971	5010	2036	1870	3238	5699	4738	1768	3229	305	5788	3238	4355	1892	5470	2873	3907	4664	690	393	5327
Row 17	4978	3776	5519	2884	1182	810	2380	2628	1521	4164	5315	4908	1178	4204	1299	166	1609	650	811	3255	2415	5244	3705	5714	4066	1936	3994	3963	3396	122	3441	1803	2312	1177	2647	5796	5909	4161	2674	1452	4793	774	2762	4140	4537	5615	3594	86	1442
Row 18	2767	587	1136	3878	4340	2845	5157	667	3968	580	1087	5757	1256	5203	3785	1095	4189	952	4718	494	3844	40	4800	3267	3470	365	386	5928	864	1369	765	1470	2453	2102	1260	5533	3817	3924	404	780	5820	1901	4097	720	972	1228	4613	4893	3631
Row 19	4272	3753	3612	15	828	3601	425	3164	3472	4772	1796	85	2371	1718	3195	638	2693	1897	3759	2920	3910	2857	2033	1420	3883	1716	421	769	3390	421	2234	2279	614	117	1768	5180	5947	1631	1804	5467	4431	1194	2939	2971	5481	1658	4505	135	2159
Row 20	3171	4808	2700	730	3352	3059	1072	4864	4501	526	852	3421	5048	4066	5654	1227	4081	434	623	4398	456	1818	4910	1235	3218	4530	4401	3535	3981	2863	3164	3281	798	2144	4788	2694	2594	1884	381	742	438	4584	4993	4249	5304	1253	1800	4572	1985
Row 21	1955	3324	4779	1046	1935	5907	5058	573	3526	260	2214	272	3854	296	31	4153	283	2429	3027	4133	3936	1593	5637	3990	3245	424	5639	3403	85	1174	5611	5337	1366	3969	2380	966	3725	3506	185	865	1732	5139	2151	237	3424	1677	5724	5543	1645
Row 22	4083	2388	1408	4445	3368	102	5097	1293	5022	1165	3398	5644	1527	1925	2330	3550	1467	3418	5329	1056	840	580	5996	5747	5860	397	594	2113	2123	3859	1674	1928	5901	696	1607	5277	4938	5348	3931	1073	941	1596	5245	5575	3474	287	3061	5329	61
Row 23	5357	3578	3721	2846	44	2785	3658	5400	4982	3239	3431	3900	826	5786	3809	1054	1169	3210	2461	2105	3317	4778	2567	4487	1893	5654	5832	615	4611	3765	818	3364	4710	2659	243	1942	791	4989	3765	1699	151	187	1434	1137	425	2280	5201	5062	1168
Row 24	3156	5190	1514	1224	4285	4360	5408	2658	3282	4850	2522	794	2485	1412	1997	4567	300	5947	4702	1130	4632	673	2964	3507	3459	3711	1637	2767	4303	5814	3670	4499	2655	164	1636	5728	2300	4373	2557	1594	3956	5927	983	4131	3404	3722	1491	2950	3574
Row 25	5819	911	409	5814	548	350	4270	876	5390	828	193	3825	906	895	4310	5399	5185	4311	186	1577	375	2160	4941	5901	2467	748	2495	1430	2484	4126	3568	3247	4294	3761	5162	3720	5795	3997	2121	2536	5235	931	186	2232	3695	2999	5671	782	3962
Row 26	3636	4561	1617	1040	191	1018	2285	783	5813	4486	2537	2244	1786	2080	2158	3175	4266	1792	510	2120	452	3613	255	3684	851	2771	4145	2015	792	2340	1486	733	781	2396	3891	833	703	3517	2923	3000	2916	1690	2817	3980	2691	725	1025	5792	2984
Row 27	1188	2847	5843	2382	3934	272	1561	575	822	1577	4629	5802	1176	2569	2611	834	4360	5090	1183	3322	688	2876	291	2203	3239	353	2065	5054	4729	4402	5938	1039	5757	2346	3626	4525	5933	1213	4676	2442	4722	2446	5293	3918	4478	5150	923	3084	2990
Row 28	784	3269	5277	3868	1420	3849	525	3314	190	5490	360	2132	2264	3017	3275	1843	5529	2436	1920	1545	3513	65	341	812	4211	1938	2559	32	5719	4072	3467	4370	2115	2033	3306	3893	3870	891	5329	3017	3666	2393	2379	1738	3378	2735	4747	704	4090
Row 29	2156	4586	3106	1170	3412	5260	4152	5009	3245	5448	3066	104	835	5659	712	3034	1918	3793	5236	5223	458	2564	2610	715	892	3196	3693	4279	708	3595	5056	4029	3910	2255	428	1276	4843	3129	2099	1387	4535	4731	4988	1868	5106	3784	123	817	1813
Row 30	3083	1114	3652	1865	302	4129	3976	3561	4666	3566	1267	2191	585	5258	5909	516	3026	1177	3651	5268	693	5183	3449	5179	4186	5104	4683	1075	5230	5553	3539	3520	2550	1920	5604	326	4563	956	1600	4834	1523	3751	5504	3408	2845	4760	2056	2652	79
Row 31	2033	2688	1647	3168	4040	1216	5530	5588	3938	4787	2465	1837	5578	4452	1988	2910	2368	2800	197	1828	3293	4133	321	2430	369	4820	1179	4009	4438	436	4239	1229	4127	1924	3386	2174	2870	3298	653	5478	1478	4153	5992	3182	3471	3631	265	761	5925
Row 32	5005	2301	2518	3540	945	4396	4283	4174	5210	1503	2696	781	5536	2598	4194	2173	3814	1347	2752	1176	5045	1726	2094	5287	1250	3420	1699	2790	2469	2065	5431	3988	5065	2624	97	5415	380	1664	184	1786	2875	3733	727	1496	3158	66	5931	2620	1287
Row 33	4636	2725	3967	3630	1502	2672	4111	5163	268	2774	4664	4417	855	444	2435	4986	4480	1645	2589	1106	5575	4056	5380	1643	4678	1060	4621	5872	4832	1135	252	5202	1636	684	4751	5348	5611	1290	135	5103	5636	4299	3205	5516	5301	2757	1168	3137	2046
Row 34	5628	564	4213	1939	993	2131	3229	1327	3784	5375	3131	5538	3755	5316	1353	4526	3768	1152	3800	5631	5280	1466	1870	4521	648	2438	66	4756	3252	5989	4257	4453	4986	4103	1452	1541	977	3234	3074	4724	3316	1135	2651	3895	1313	5140	1932	1149	1450
Row 35	3608	2567	2237	2469	3232	573	3441	4975	1121	772	828	4055	3361	1159	410	4045	4570	1995	1912	3520	3107	3628	2106	2447	50	1991	2801	5994	871	1109	5178	4771	5731	5140	1389	3166	2129	5246	812	2832	442	5314	250	1806	5826	5120	5011	1200	5437
Row 36	3305	804	2244	5767	2133	4908	2510	3835	1803	4560	5966	4473	1536	1211	2870	5869	5999	1734	525	838	1187	2998	2135	5494	4892	177	3955	4559	2310	1706	5781	4149	1770	2964	2633	644	2628	5564	5887	4844	2069	3601	4744	5964	2981	392	5346	5206	137
Row 37	5019	3263	1678	5532	2190	5018	313	2506	3937	3231	680	299	1498	5497	373	733	2398	1317	2073	4995	4815	3265	2587	4079	709	2100	2944	4857	2041	3412	3338	5411	5972	1182	4750	2811	2974	3829	5300	1398	3413	2496	3404	2246	5335	1307	5148	999	887
Row 38	5895	2821	4305	5092	1367	5397	3626	1371	2714	26	5815	5189	2874	3783	4853	4051	3432	4838	4676	5080	1389	2206	3455	3305	785	2767	1761	2052	5382	4606	4178	4355	611	4920	1278	484	1018	5511	3012	5216	5103	3324	2858	1020	1497	1226	5128	4036	4316
Row 39	5852	4905	188	2375	3953	378	2342	5564	3930	2830	836	5115	4953	1709	357	1305	5145	887	1577	3901	4408	5296	5	1889	1602	4563	2353	2094	1552	334	4216	4680	1158	261	1485	3220	1386	3541	1072	2714	478	3361	301	5809	2571	4672	5535	2761	275
Row 40	49	1748	3061	258	3581	382	5572	2496	1484	1570	4222	4811	5815	4859	5897	4238	3652	2305	240	2720	5641	5030	3713	854	200	3488	408	2982	4244	501	4779	1124	3141	4331	1679	1510	1994	4154	1562	1296	5646	2266	1634	5794	11	5097	1279	5489	2323
Row 41	3526	2143	3847	5005	1527	3682	1287	4926	1653	178	5779	1549	2699	3089	2226	2564	2555	3226	1257	3986	4686	489	5663	3582	247	2010	1011	4085	162	4609	5094	2572	5380	1094	4988	3086	597	3203	238	193	2386	5251	274	819	3801	1938	5750	2382	1779
Row 42	1870	5731	4159	4904	4757	1414	3845	41	417	589	2064	4573	280	3477	1665	2962	2619	3361	5237	2478	4073	4571	1805	5267	4213	5438	855	3848	4399	3606	5340	2595	5739	5497	5091	837	4651	5668	2269	4361	829	3999	1669	1633	5130	5126	5573	964	1851
Row 43	844	5051	2034	2050	2722	4586	3131	748	1313	1304	368	923	196	4611	3738	3299	5858	2495	3477	4658	2491	209	3263	4033	4333	2914	5398	5304	1160	5252	637	3012	2638	2678	3024	2280	5940	3896	1294	5366	1398	665	2625	5243	2692	3136	808	669	5336
Row 44	2529	5455	565	5437	5047	1566	5129	690	1028	4339	1995	5562	149	5092	1002	3776	2402	1059	5130	5423	269	876	1996	3247	4432	5866	1317	5314	5119	890	2731	2805	2845	3956	5331	5389	4530	572	3317	3585	699	2918	5652	5107	3072	1190	1181	2767	3877
Row 45	624	5287	3097	1796	4305	5574	1340	4349	4980	5709	4030	2422	326	696	5010	3514	4713	3536	1870	4489	1487	2469	3540	639	1050	2788	4342	3409	2223	554	5813	2462	5182	4268	4050	434	1477	2506	5345	4238	3080	1584	1462	753	4932	3265	4683	124	3275
Row 46	427	5842	3674	30	3485	5795	3713	5428	3347	1944	2514	1562	3452	2092	483	2822	2944	5103	2774	3172	1119	5583	2405	134	1326	491	5814	149	4166	5513	803	308	2932	5063	2868	5678	4459	3804	3452	1735	1286	3413	3148	1524	1906	2025	5313	5816	3989
Row 47	3565	4106	3732	2354	4247	348	1241	571	2275	5176	3600	329	1844	120	5600	2848	1150	2022	2518	3317	3590	3124	3097	1156	5063	1945	2735	2310	2448	3820	2224	5798	5117	5672	4649	1162	193	957	5803	2397	4911	4672	3389	577	2510	5406	3990	5661	5239
Row 48	3027	5048	3047	2144	2685	2689	1702	234	2893	5573	1028	4319	5309	3511	3564	3741	1836	4216	373	293	2421	2823	2643	5013	4105	2540	5419	1801	4113	2696	137	3559	1203	1983	4831	1607	3960	3065	3281	5383	3762	175	5320	4938	1363	3994	4839	366	2866
Row 49	3332	3931	2414	3957	5511	3082	1608	336	1533	3843	300	2323	3592	839	5931	5358	5546	1671	5555	4179	5961	232	3251	5005	5139	2582	4606	4638	4398	5679	1449	1539	2767	3507	3812	3594	4695	4135	4014	1866	5414	2504	540	341	5991	3618	4307	4209	3326

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.