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	3664	4133	3664	1431	5258	1047	4512	3387	4051	5390	2594	5370	3458	5882	2017	5906	4671	1313	4517	4109	4974	5996	1059	2413	1854	5405	919	2791	4996	2618	5885	4747	3373	4285	5256	145	3063	1889	2086	2155	1251	232	487	1684	3233	1919	395	3579	2476
Row 1	2328	1787	2017	2915	1662	3071	4521	2153	3189	2972	223	3172	2861	575	5152	3103	4295	2614	4273	3039	4167	5247	3367	663	2755	2055	5937	5004	4599	52	2132	1959	3564	203	5586	825	1728	3689	1560	4482	1162	833	3622	1030	4341	2235	1118	5190	1322
Row 2	364	2656	1634	1880	4390	76	615	2812	5423	3251	1099	438	1550	4913	2320	4955	5409	5350	1556	4595	3387	4970	2539	1928	308	1240	5571	806	5517	1613	1633	3531	4794	5730	5159	2750	1138	2391	817	260	5970	3328	5205	4232	1601	1926	4590	626	5604
Row 3	5480	3434	447	1648	4303	1548	848	31	2835	4754	4454	459	1970	2418	4469	1367	4329	640	825	3097	3208	921	2259	2572	5019	1110	713	1023	3497	3348	1747	2771	5322	5772	1091	5595	4841	1263	614	3987	1263	3603	1273	4322	4101	3729	5559	4161	5510
Row 4	822	5237	2233	5178	5447	2335	3303	2704	1376	5115	70	5011	1946	767	4951	14	3391	5401	5815	848	2381	2445	4909	1652	249	4398	2252	2397	5389	2493	2384	4881	5908	2404	3784	5702	1430	5228	3475	2100	761	4872	197	1682	2108	2461	2008	5424	667
Row 5	1980	1283	5961	842	5145	592	4449	1287	3906	803	3123	2614	5862	2984	4983	1697	5070	3050	3993	3755	1551	794	387	5360	339	4901	5303	3130	388	2486	4781	4619	2944	3706	3163	2421	3991	2974	3279	475	2726	967	3123	5836	298	2481	37	417	5364
Row 6	2107	2458	2091	4638	194	1743	4895	5548	3140	5136	3721	2941	600	3853	1294	3563	780	715	698	1108	1914	4242	1186	4284	2591	2080	3828	1335	5354	3452	586	3226	2335	94	3328	2694	2718	1185	5564	3922	3495	4434	322	5821	2746	2140	2548	166	2001
Row 7	4135	1904	3450	1587	279	2285	909	2494	4156	2654	2089	5119	5033	1091	871	4494	431	3410	368	1123	4429	3804	5190	2434	5141	1037	5495	2761	1052	105	2821	624	3893	69	2486	857	4483	2002	1462	4940	3657	4114	405	2596	4796	4608	5913	1372	218
Row 8	4736	2421	3204	2076	3367	2459	1470	2528	5285	473	4675	2311	5285	937	563	4212	5144	3608	3593	595	1987	1868	337	3053	2991	3414	1123	3250	3686	5971	1608	1621	4765	4558	1294	3417	156	68	4559	2677	1177	4319	1541	297	3975	4677	1598	297	2472
Row 9	911	1512	3785	2773	451	5006	4569	2454	1463	1061	1541	4296	480	334	3249	2077	444	450	166	5520	3081	5492	614	3778	3765	2321	1689	1681	4518	1347	1094	3660	1953	620	4738	1083	5636	5434	2035	5630	2743	2699	2444	3050	4644	376	75	5551	4682
Row 10	2177	589	5468	3117	5134	227	1175	5637	3439	5321	3469	4854	3733	2330	4650	4576	5473	1339	2806	3406	4916	254	483	2033	4588	3761	3894	3660	4972	2011	5087	3404	2105	5002	2950	5151	2007	4473	4706	3126	3465	2604	5300	5481	3870	2360	1280	4061	5396
Row 11	3454	3821	720	2667	1699	2378	5966	4057	929	4554	2208	3023	1490	2401	5496	1681	3671	3698	4857	5915	1096	5025	2383	4890	3285	2869	4135	3541	5737	1127	3499	151	3970	1587	2544	4981	4632	4829	1449	4048	3608	2440	1826	3681	5731	2387	2129	290	3725
Row 12	2049	2202	4688	4271	2640	4684	3090	1392	2431	5422	2703	5043	3470	4037	5898	5309	1355	3649	3353	3313	2518	1190	4808	2747	4595	3375	2248	4631	1576	4115	4725	557	807	263	4862	1327	4593	415	724	5110	4779	5153	616	4109	2372	4970	2452	428	5755
Row 13	3451	796	1332	3759	4634	1335	3631	3024	409	2406	4715	3482	4993	2095	3944	4808	5944	2361	2110	4154	5504	1567	689	2138	5620	5496	5990	3596	4899	653	5552	315	3920	771	5835	3476	1220	2675	913	5752	1754	5030	17	3001	1804	99	2356	5839	1106
Row 14	2645	2972	434	159	4755	4803	1833	99	2842	3335	2841	2731	5828	387	177	1341	1631	3146	1240	3544	767	3686	3361	9	2952	4451	3713	684	809	4171	2624	4732	5668	3767	501	5186	2253	2553	5815	5852	4063	2011	4989	530	5303	5018	854	3557	1213
Row 15	4841	3163	5644	1129	35	2161	5836	3230	3684	934	991	31	5505	5069	1121	2026	836	1423	5965	1116	471	4097	4490	798	3635	5458	2283	3362	5811	5200	4673	4774	4889	5983	214	3993	179	4287	4364	5408	3352	1215	2506	409	4757	1913	5772	73	2581
Row 16	5311	2039	3168	4249	4347	5700	3676	4392	792	2630	631	3667	2999	5065	4209	5782	3660	2562	1061	288	345	2535	3639	986	3671	46	1221	1572	1725	5123	4997	2430	4782	501	5704	5108	1185	1482	2597	5546	537	2350	3854	368	3624	5988	5977	201	996
Row 17	959	1627	1458	717	2343	49	3922	2608	4315	3806	520	2606	2275	1762	3505	1542	710	5269	3332	5104	740	3594	1086	3312	2062	3717	4727	2527	2660	4405	5227	3314	4791	4982	2465	5140	4910	4607	4520	669	3034	3341	2869	919	4336	5449	2379	3457	5932
Row 18	1814	2857	2966	1676	3680	5074	4558	1743	4582	3011	3830	1446	2428	1942	875	2989	4400	2085	2584	2633	5575	5719	1828	2391	1741	5743	5933	1045	2806	5034	3642	208	3819	4204	2809	1307	1628	4886	5227	3974	2920	5987	1180	204	1064	3849	3432	5485	4554
Row 19	1688	2977	5255	1914	915	605	1212	917	5257	3004	935	1505	2819	229	263	4441	1173	2558	1446	1402	653	1927	2550	5238	5441	3736	991	3121	1766	1967	1151	976	1529	1082	4843	2666	1433	4975	3684	1070	4875	4486	5938	2493	915	4440	5319	87	95
Row 20	2034	558	3279	762	3845	2418	5718	911	2010	4810	1300	1659	5745	3766	3831	3485	3418	1555	1780	4490	1012	4344	265	3393	5686	3719	1443	3125	1493	5651	1469	5750	1092	3197	2364	3265	2469	865	4025	992	5354	4806	4572	1901	4195	783	2867	3468	327
Row 21	2429	5023	3684	1257	5938	746	2134	584	2038	2238	5079	2070	789	1265	2195	2146	2519	1894	2433	264	5365	674	5801	1449	1360	552	5435	3369	4145	189	973	3854	1917	2662	4638	3547	2159	5960	4246	1611	5454	5102	3116	3728	2474	3807	1850	5893	110
Row 22	985	1708	4334	5390	5827	2899	1522	776	270	2213	4190	5373	5462	387	3136	4369	4191	4387	1910	2166	318	1711	5079	1683	4669	2596	2077	911	2652	3174	1322	3207	939	5944	997	3454	1976	56	5590	3056	1131	821	3579	2508	3861	566	5398	4164	3805
Row 23	1566	2045	3771	1591	4151	1453	5553	4652	158	4094	5667	4061	3856	5594	460	2582	2233	4084	1425	4107	4618	5254	3517	3401	2940	4184	1088	1173	5138	139	2561	3898	5698	5164	2270	3081	1899	1006	313	27	2280	2688	1474	1275	4751	221	2076	3578	1758
Row 24	198	1971	3767	13	2438	3777	5540	3217	1780	4217	170	2946	4435	2368	3233	5669	1387	364	1573	5956	29	5516	4614	2499	2567	2919	1618	744	5231	868	4124	3698	4598	3417	4132	2411	1095	4814	3024	2703	175	818	1775	3595	3621	2019	3806	4532	5078
Row 25	2733	2563	2393	425	5437	1205	3305	4829	1384	3672	796	1042	4559	3236	5864	3942	4962	2421	5440	380	3430	2290	3814	4964	2810	2167	2617	2253	2450	3163	875	2332	75	84	4683	3558	4066	5872	425	1625	1783	5480	4954	840	2721	1403	2793	2210	3802
Row 26	712	5482	2390	2625	5444	810	436	5226	4352	1114	1358	2131	2977	2646	5047	145	1931	3902	2608	632	5707	1554	3254	4578	309	3136	2140	2801	1515	2368	4948	2958	47	3561	4247	2767	33	3574	2240	5731	201	4804	1661	1109	1391	3391	5400	4202	5115
Row 27	4992	2992	5264	3629	3428	2212	2687	4672	3070	3097	944	3462	4871	1485	1469	3384	2093	5801	3648	3366	863	2079	2702	2935	312	3211	3797	1177	640	5554	2188	853	3089	1822	5338	2837	1017	1064	1183	530	4494	456	1088	597	4708	1777	4739	1225	1966
Row 28	5726	310	5584	555	5535	5862	3960	5484	5547	3668	2621	4295	4892	2603	3207	5210	4462	3845	438	3572	3702	2205	3287	2319	5932	4708	2113	3945	5280	910	2496	4409	2715	3705	4602	2732	2305	4666	5260	2859	1316	248	2962	5047	4919	2444	3887	4779	532
Row 29	3900	4152	2908	5912	1570	877	3156	3928	3452	3399	5229	116	220	1512	3290	5768	1110	4813	2821	5866	4253	1425	5103	4395	4604	3356	2747	934	5047	5333	5726	2700	5403	2988	1819	5886	5331	2224	1897	4933	5756	2304	2259	2961	1479	4617	2494	5846	4485
Row 30	4216	4835	2644	1406	1009	914	5789	3370	5573	3717	2510	5291	5390	605	3356	5291	3646	3362	3165	1468	2033	1876	4957	4778	5796	2596	4901	5955	219	5908	3611	5940	3640	2883	5727	4990	3640	2242	5109	99	4100	5314	2715	4055	5853	1390	5987	2683	5211
Row 31	3287	4392	1196	5482	1594	1303	2364	1783	3109	5668	71	3723	249	1824	4936	354	1329	534	491	2036	1374	5172	3550	3936	1375	4331	2276	3216	5008	5668	834	2593	5396	3258	1974	3990	5503	2947	1303	461	844	5088	730	4559	5275	663	3916	2221	5933
Row 32	2017	4034	281	5046	5282	1692	1326	4524	5145	3937	3953	4433	1766	4077	5073	5964	5063	5391	48	2538	4478	2514	5521	4331	5597	4140	5542	3923	3849	3427	4633	2042	4245	5001	5943	175	1706	1017	3681	3410	2588	1707	5542	1772	3431	3925	3359	4152	5258
Row 33	3729	1465	1575	5764	2269	1748	5787	762	3068	4991	5954	4216	3246	4646	812	2586	1045	1054	4959	2385	4400	3571	4666	4492	1339	3856	4509	1621	129	5346	554	5711	4375	225	5484	1249	186	2522	2896	2741	1507	1395	5202	1300	823	1115	4782	5672	3891
Row 34	5584	3794	101	3067	495	5709	4638	3228	1942	2310	236	5707	5779	4963	1661	3072	5342	385	5371	1845	690	1324	3404	3382	5408	9	3054	5708	3398	5610	3706	4993	2466	2450	1774	2824	3849	1838	3005	5129	3889	2084	458	3899	962	2478	3926	2901	4661
Row 35	525	5263	825	5428	5728	3726	1892	3051	3451	3423	657	5373	2298	4577	4953	291	5842	866	5771	717	1778	657	1740	5926	5885	2843	3369	5445	4896	2513	768	533	3311	2128	4982	5668	4784	780	3658	2383	3080	5171	1633	1985	2905	2790	5266	3348	2514
Row 36	3968	1163	1280	2970	3220	3259	2354	3312	1835	5000	5869	3318	1829	2313	1185	3258	4264	1601	680	3187	4422	4336	2346	3583	2089	5769	2095	3442	4680	375	709	5717	5345	5644	381	453	4132	4952	1771	2056	3400	703	197	4209	3600	4114	373	2703	694
Row 37	1792	2122	2520	2999	4256	4286	913	1816	4700	4131	3195	5987	2070	1464	2025	106	1989	2190	887	3623	3601	2004	940	2443	1009	5037	1495	540	4816	303	1922	3379	1212	1058	3540	1614	4932	5907	287	4374	202	5416	4840	4663	1037	666	1648	2167	4458
Row 38	5697	1151	2032	2630	3137	5654	4475	3921	2407	2862	1298	1128	5373	4886	4541	4067	162	2414	230	1294	4078	1125	4406	4955	2742	5183	2583	2141	4582	397	4862	3557	1022	4705	3719	285	1525	5423	1661	4823	48	597	2415	591	4036	1649	4633	5789	1869
Row 39	1523	3767	2041	5541	4333	956	953	2474	884	5117	663	4607	5330	2069	969	762	732	2408	3964	2365	3851	693	1188	1288	5023	2178	2757	1398	1961	4969	5672	3376	375	4975	2596	289	4313	1994	320	4480	1776	5688	5871	4488	4928	2524	5128	5485	4829
Row 40	598	3287	1396	4246	5786	830	1280	1909	828	4924	906	731	4390	5485	2768	3127	4157	3384	4990	2951	3653	4208	2667	1861	2444	3254	3690	2784	1399	5792	2911	5370	3340	1649	5531	4555	5597	5132	4933	2719	5762	4856	2964	334	544	3069	2801	3845	2868
Row 41	1642	1564	4592	2911	2236	1158	432	4917	1383	946	5198	1674	3842	2739	2049	246	5109	1959	779	5468	2118	2331	739	3115	1795	5523	3764	5311	5112	2161	4447	5130	1542	2485	3861	2085	1501	633	1515	2147	2723	710	5300	1169	3427	899	5187	4611	4207
Row 42	2262	814	5021	3141	3626	490	445	5450	4265	4069	3465	1652	1713	2091	338	2859	561	4061	4915	1284	2437	2295	4764	1429	4813	3992	1991	3138	2050	940	992	1953	1537	847	5694	1030	1489	1845	4770	2265	5731	4666	3401	1814	3486	5366	1567	3419	2395
Row 43	3138	4666	3409	5569	5021	4839	1511	596	627	780	4967	2095	2241	5478	3809	5876	5458	4600	1279	905	5598	626	3732	1122	4777	875	186	3903	4556	5773	2087	155	1415	1892	5142	1580	5619	4753	288	5375	3144	637	1089	314	3178	2163	4450	5424	3644
Row 44	2423	5677	290	2441	1595	3295	5745	659	4932	1561	994	2595	3650	1308	4039	3753	535	6000	3350	3242	4602	1295	4287	3422	3081	453	3342	5723	4433	4945	474	1669	2335	4698	3203	2520	2827	1933	3786	400	819	413	3393	2469	1462	5083	4609	3629	642
Row 45	5090	5821	3527	3197	1459	3687	5526	4656	2550	760	5389	3940	5742	4115	3461	3097	3029	395	5444	3933	5125	3289	4151	3519	2661	5694	5032	4343	78	4269	2238	678	5751	2123	5366	3862	2906	5011	429	2131	2359	4450	4884	235	933	5732	4185	2384	4346
Row 46	3968	4622	3698	1	3567	1424	5117	3427	2325	5509	1297	1931	3536	268	2266	3903	3894	5998	2562	3615	2276	3022	5119	2150	3910	3162	3349	981	810	279	568	5920	4026	3769	2006	633	1397	3063	3276	2556	1432	3594	4738	1246	3740	346	1409	3991	4697
Row 47	4596	5927	3980	3104	4401	1121	1872	4759	2179	4215	4185	5698	5595	2143	2700	2613	3084	5799	4957	2753	605	3192	5788	3043	3502	5082	950	3316	1875	2135	964	2381	1391	4600	1701	5644	2163	5203	4794	513	953	2434	1066	2098	5461	5472	5017	3514	2426
Row 48	3605	4636	5108	3773	5412	1223	394	4876	3615	2429	646	1159	1067	2860	4316	2785	2166	4789	4901	1433	4753	1404	5219	4138	4737	3870	4422	3104	4472	3842	5360	3408	4243	4789	720	2037	4320	1298	2774	3078	3420	669	1325	348	5519	365	1378	5105	1359
Row 49	1786	2078	552	1391	3435	2859	4702	3934	827	2764	1139	3704	1922	105	920	798	2139	3	5748	3016	5275	2868	899	4030	4218	5905	2179	2249	2464	5819	759	1436	3179	538	3747	3020	3738	3937	1574	2735	2492	4591	2342	2279	5678	4015	5828	2245	3911

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.