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	2884	4694	304	681	2602	2561	104	3429	3559	5481	4658	5723	5353	2418	5327	5382	4282	2072	5214	2001	1212	5144	3540	4567	1914	3343	1551	1118	4491	3266	1426	3253	2164	4297	2577	143	422	666	729	1243	2805	2856	303	1549	474	10	1876	2012	3269
Row 1	3992	53	2048	2963	5883	462	4824	70	4292	2228	3852	5100	1177	5061	3545	2441	3668	585	5535	3338	3934	4533	2096	2639	2434	3360	2803	1792	1730	3346	1492	5128	1560	4405	1903	1549	5996	4025	5155	4050	810	471	2241	1919	356	1513	89	2969	5851
Row 2	5081	5753	4014	4215	5363	5013	1148	96	2259	125	4759	192	1668	3575	5345	4287	2591	899	4948	2401	3545	4569	173	1805	1512	5492	2735	5170	3016	347	1893	2356	5706	4929	4892	4922	4804	3890	517	1828	5213	2298	3908	1165	3971	836	1960	4278	129
Row 3	855	4633	812	4635	2272	5046	3334	3760	3496	1429	2768	1582	5056	2705	1575	3326	241	4341	5943	5076	4053	73	4609	3280	3579	3541	3696	510	3352	5265	1884	762	364	108	172	1207	5054	272	141	2064	6000	806	850	1517	4212	1468	991	1806	1494
Row 4	5022	1084	276	1576	3103	416	370	2744	1236	2922	4360	3986	4515	4816	3398	2263	5911	148	4865	70	2443	3184	2762	1246	3027	234	5281	3223	4428	3133	189	4601	4620	3912	5609	4736	1760	5920	2063	4232	1442	684	2427	397	2936	3121	3005	3664	4068
Row 5	3033	3522	3069	4092	928	5884	2778	3306	3240	3860	302	160	469	307	3957	4247	3621	1035	2818	1986	1013	2970	3496	3123	5152	3241	2336	590	5207	4406	1439	4578	4512	5673	1480	5161	1135	5435	5433	5172	5167	4504	2155	2745	1715	4554	3009	5056	408
Row 6	4015	1029	2747	2259	530	1491	484	3769	181	2073	3505	3799	4613	450	2546	5523	5913	1770	4628	4530	1793	5165	4090	3225	3427	1851	5852	2081	5258	2306	1062	1108	5283	793	3424	1019	5606	177	2005	704	1135	3799	4458	3235	3795	4507	794	1112	5549
Row 7	3172	5437	4132	4673	3405	918	4073	4940	5916	1002	3389	192	3930	4034	4124	669	3384	2818	1326	3496	1040	5515	5109	5906	2114	1030	3940	566	1343	342	2997	4073	2216	607	74	5371	4282	4775	2438	5051	3053	404	4552	212	1869	1373	990	207	4864
Row 8	650	3852	5744	53	3443	2557	3576	3558	5468	3627	433	2436	4075	1330	206	397	1820	5705	400	877	4611	5604	2988	470	4877	2649	4264	4014	4275	5840	3272	4295	1728	2709	669	1061	3153	1175	3732	3017	3609	2100	2860	1773	4111	4409	3820	5411	2787
Row 9	4309	3889	1162	4606	3939	5313	456	1204	64	5612	4630	3096	889	3144	3391	4919	1138	1067	2283	277	1614	3779	2599	3987	401	5049	2535	4182	4629	3185	5135	4132	98	3075	5694	4175	402	3844	4380	4128	4871	4204	4331	4079	3631	180	247	3617	370
Row 10	3967	5010	5099	699	3239	1980	2734	4243	4237	4268	5509	4496	3191	2441	3693	4292	2534	1735	1182	4390	5182	4494	2690	2536	2223	2873	1937	3386	5708	3904	1251	4566	4215	27	2400	895	4778	3320	1872	2528	3886	2132	49	2496	1796	5570	3069	202	3807
Row 11	333	5031	570	2684	3192	1986	837	351	5172	3430	5568	3090	4258	3730	3602	2444	1387	2147	5105	5214	3680	3227	3993	5677	963	5604	452	3893	459	1573	3093	3336	3441	4740	4314	1202	495	2030	436	3614	694	4178	5612	5112	4312	3173	554	3522	4156
Row 12	3601	1108	2748	2205	50	167	1712	4660	681	5889	5707	982	5301	260	2917	1120	3423	2487	1602	1941	5705	5897	1173	3635	5307	3418	3936	5368	5405	777	2538	2638	4517	2291	2668	67	3165	4115	5536	3292	524	5075	1656	3249	258	4924	320	1770	5965
Row 13	844	5932	4749	3512	1541	1146	3514	5666	1151	2956	1109	3845	3875	487	2484	4978	4373	5723	4715	4563	5191	4491	1090	1366	4546	3921	4107	2131	4508	1301	2910	4758	3165	4431	433	3071	2446	5018	1622	5540	460	1597	673	5876	4242	4071	4547	3638	1474
Row 14	3339	926	5745	2068	3773	5980	2370	1521	5145	3304	1657	4709	5604	12	2299	3380	5124	542	4503	5497	444	1113	4848	598	3854	4655	382	1054	3780	5965	2620	4910	2019	5525	1805	479	5445	3480	608	730	662	2861	1283	1554	3737	3450	290	3595	5197
Row 15	4322	2205	5325	5206	69	1959	5165	1060	5769	3088	922	5216	3158	3188	633	1367	5716	3586	452	4597	1889	5888	4790	1666	1946	4612	4220	1630	1321	2026	3025	5689	564	4754	4986	4911	1016	4686	5131	2943	1354	3425	5270	2225	212	1896	1095	307	298
Row 16	437	5614	4021	1297	232	3907	4952	4185	2071	296	705	3911	2168	1183	430	3186	336	466	717	1269	2241	468	65	526	5666	1996	1309	5535	2606	3910	3599	4412	2713	1772	5609	5180	3470	3279	2888	327	663	4712	4130	5763	4826	1336	3438	808	5124
Row 17	4327	5088	3326	132	1185	3503	1502	2662	187	5414	2846	513	1856	2352	5596	268	4282	831	1958	2656	2495	5618	687	3051	1017	2884	2899	926	3541	224	5702	244	4718	5163	883	2746	4388	2611	4421	5556	5254	5554	1966	4165	2824	561	5316	3680	137
Row 18	1854	5477	1186	4592	2736	173	289	2872	919	4106	2777	3127	5265	5471	5325	4372	4733	5605	5667	3718	3176	2994	738	4441	3050	1475	5224	2514	1381	433	4044	3595	4035	2525	1042	3048	734	5336	5856	5865	5887	3948	2968	2507	5490	5256	3614	783	678
Row 19	4147	5017	1881	4933	4372	626	3767	4062	3985	5022	4127	1842	882	1019	2096	3785	2105	260	5819	3593	284	838	89	1992	1747	5649	4625	1179	2214	4231	3435	4513	28	978	2121	4834	858	5826	2394	2619	4757	3028	3978	2289	246	2446	5300	5005	5343
Row 20	4503	5647	2179	5447	3794	2395	1015	647	1584	1231	188	4781	5941	5190	3472	416	3858	2958	2879	315	5024	355	3122	5868	1918	2651	4595	1988	3796	3791	1122	4279	804	2337	2259	685	586	5129	4058	2266	2894	923	3203	5661	827	2809	4696	2978	3074
Row 21	277	2771	3832	4521	583	256	209	1990	5338	2334	3714	5134	4202	1819	666	4778	2630	4090	1982	741	742	5704	1855	5757	3425	534	694	1182	2893	1751	3078	2869	4805	5232	99	3527	1001	5530	159	5838	5528	2162	921	2686	3637	4354	3129	4028	3699
Row 22	18	2570	176	2211	4084	3983	633	5878	2977	5731	4450	2338	4266	2190	160	4155	1384	4429	2722	1357	559	5659	2787	3748	1367	3650	4565	190	1013	1913	5161	255	5029	193	2166	1266	2402	2761	1753	2009	3718	4316	5847	4536	5433	1879	2263	4222	2945
Row 23	3425	4390	1670	79	5058	4839	5496	1369	2277	1045	4816	1344	4376	1489	4748	3681	4227	5340	918	2852	5158	1395	459	2566	1267	3825	2902	2899	1090	3517	2199	4667	4266	4130	3762	350	970	3629	3034	4644	2041	5718	5579	2150	5391	2990	2541	205	4393
Row 24	4743	2641	1475	2945	5327	5921	2816	4615	4271	4209	5564	1571	3935	4859	5227	2178	5697	668	3161	5924	3799	2682	1470	5318	2633	730	4042	3789	1061	2730	4731	5672	4519	1153	1774	2264	2480	3453	3513	2148	2287	2701	2465	1724	1337	482	870	1828	3833
Row 25	56	5916	131	1573	2820	1986	5682	587	1519	3083	4969	4131	2506	5992	3765	3472	5842	1951	3201	5654	5016	3288	2536	4361	5353	2336	4450	208	4523	3658	522	2149	5689	5998	4463	1331	1982	5571	5744	4643	3716	4439	569	5598	5834	5228	349	5314	5665
Row 26	1075	1375	2053	703	153	1095	3421	3088	5629	1680	70	3531	2349	4159	4676	4939	4270	1900	2503	2620	4077	3831	5859	1783	5111	1082	2063	5083	140	5764	5467	1730	2046	4855	91	1534	773	2746	2075	898	575	4401	3547	2841	946	5956	253	4147	3780
Row 27	5498	1583	37	5877	1997	4317	3152	4704	3302	420	3865	5909	2940	2826	1888	5376	1593	2440	1094	5521	5693	4473	3585	638	3602	1052	5493	1699	574	1614	2929	2466	5613	2577	1299	1981	621	5534	4683	2164	4048	468	2259	991	875	931	4921	3551	1865
Row 28	3688	568	3278	1009	3595	4600	738	5092	3406	1865	5901	1316	5757	4056	3883	3585	3818	1895	493	5160	3647	2724	1587	750	5433	5800	4736	4271	5068	5554	1028	1495	4522	796	2849	5209	1306	3330	2693	5103	4371	5970	4948	2695	3883	5128	1313	5703	1403
Row 29	4317	3240	4850	5605	808	430	5990	336	1591	3033	4206	4216	4856	4645	5148	3284	5942	2652	2981	5173	1388	998	3062	362	2053	868	1395	5779	137	1144	144	1163	3242	3944	4650	456	3115	2884	1246	2104	5595	2540	860	3132	3584	4279	3064	113	300
Row 30	1010	4259	3145	3121	3405	3598	2503	5668	948	4319	5321	3340	5674	1291	4927	4289	4280	3106	2527	3132	2434	3028	3328	4023	5160	1266	562	2292	734	4086	3346	4675	944	5261	113	733	1134	1339	957	5677	5456	4759	2541	3171	4403	4458	601	4301	4214
Row 31	5350	2186	2625	1639	1733	4080	1342	5467	2880	3208	59	4178	735	2230	3669	5257	5848	1340	1894	700	1610	2307	4911	4655	2737	5629	5901	1271	3230	1998	943	203	3835	2842	3942	3509	927	5008	1402	2494	3268	3127	4131	2418	720	3443	3876	874	883
Row 32	4158	2139	732	1400	5214	5879	1998	2024	412	3081	5171	4392	5981	5076	2341	5259	560	1730	4083	451	2686	2378	964	3551	5047	2685	2012	1420	5471	4312	4796	3491	4725	1935	3330	1479	3509	2410	5614	5073	1053	1690	2442	973	1779	4956	2331	2348	5484
Row 33	929	3080	1835	986	5724	134	2868	525	3718	1651	2193	2305	1883	368	2097	2045	5753	5371	2481	1413	4384	116	2710	5193	4631	2881	2142	753	2644	5831	3718	3605	3207	3682	1810	5109	130	470	5095	871	4207	1234	1166	2238	486	5905	1936	325	1385
Row 34	1758	3929	1550	3117	767	1946	3967	5374	4394	5809	1188	141	4257	3540	3450	4377	3113	5262	1436	5989	5004	4161	5630	4715	1499	4832	2416	4319	2420	2426	510	5916	4893	5866	5742	1489	331	4835	1445	2823	298	3562	2023	4068	869	3766	5450	3381	1467
Row 35	4876	3601	3738	786	2462	4139	2898	1141	166	4909	3466	5968	5048	442	1565	2764	1022	677	3830	4668	4448	1667	3403	1276	5302	1	5305	5888	3265	4653	1005	5085	3883	4027	1767	750	5100	5348	366	1284	3492	4745	4296	1594	5811	1441	2818	4095	4080
Row 36	5295	5376	1657	5389	2735	4548	430	5500	4956	154	5210	4188	4851	536	2360	4537	1906	5427	4492	985	609	2591	4548	3362	1068	4763	5947	1952	5537	2198	4715	5646	5004	3584	707	2718	5654	2784	5975	4181	966	2861	4499	951	684	1368	2159	868	4100
Row 37	5594	2193	5772	4802	2283	1264	2192	4781	2135	5438	4578	3980	329	4463	4720	2932	3671	1889	1365	5915	2813	2274	504	3682	2915	3763	4609	2281	2228	5963	4688	3392	3709	145	3134	5455	633	2175	283	117	5774	1236	5669	4835	1492	3912	5289	3832	4288
Row 38	1145	3978	429	2223	1171	3459	4051	2510	1203	867	4958	138	28	5229	5829	1999	5346	1955	4594	5591	328	2446	4843	5804	4613	1440	841	3399	3452	500	1353	2674	2806	5030	5492	3973	5858	5691	353	2505	5349	2791	2196	1140	1809	4849	3137	4867	4329
Row 39	178	3667	4773	3113	1377	1112	319	4958	4385	2018	1907	4827	4744	4263	4062	972	5124	5253	1598	4588	1857	179	3767	265	4174	5437	3749	4376	5374	3628	5365	1232	901	4197	3847	5454	4576	4733	4475	5087	5219	1817	2935	722	803	3106	1898	3912	2777
Row 40	5065	1127	265	3570	4214	2707	3472	2048	5267	73	2929	1456	765	4656	1188	133	3815	4513	1383	4416	4549	4624	1671	3594	145	1123	2016	5617	2755	5065	3067	429	4000	987	5233	5872	954	2093	3767	3575	4955	4433	740	755	1753	3438	5027	3688	5808
Row 41	2368	2176	2296	3821	4871	5277	5838	5168	1980	5064	5707	2635	3907	3993	4204	5983	2347	5316	2044	5146	2245	2678	1963	4645	3926	2596	1619	3597	5640	628	5260	1672	4015	5250	1987	4463	3565	2926	2610	3942	3396	3926	4045	3743	261	2033	2438	2524	4335
Row 42	2579	5141	5620	64	1339	3295	1028	44	2785	5280	689	3770	4361	132	3336	2750	324	4203	3418	5498	433	575	4476	4906	2899	4705	1279	1887	2966	3169	4547	3239	2732	3428	2599	1848	5703	3976	3369	3985	4647	4877	3996	1738	5844	1384	1017	2871	4230
Row 43	4554	926	3091	3946	4404	3356	934	1474	2466	4881	4050	3493	1462	1018	1595	1298	626	2043	4720	5317	1337	3386	3576	5347	5676	2467	939	5058	2667	2138	667	614	3064	920	208	2922	890	4712	5486	1457	1131	2348	5118	1213	4303	187	1664	3662	512
Row 44	2357	2569	5679	2714	3736	3344	4645	2095	4879	4573	5000	1100	5087	1517	3432	2570	4844	1307	1722	1942	329	3012	4289	5129	3916	3930	1079	1861	213	1634	3095	4531	577	4638	5882	5456	5240	1712	1519	1529	4425	662	4215	36	4251	1439	5980	596	3962
Row 45	1604	4119	2638	1508	1146	1872	797	426	3072	4097	5043	2247	1853	5220	4738	5167	2150	1480	3689	943	3329	5888	2783	922	3896	5727	2548	2764	2921	1013	2926	4486	2253	1743	2225	2038	3937	2406	4352	2784	1961	520	954	4980	2273	1714	4971	5413	998
Row 46	464	4467	2544	2884	1641	4117	3754	3620	5445	5890	5574	1114	5090	4494	2492	3102	984	5743	5216	1006	568	3463	4689	2652	1969	1839	5891	1380	5652	3739	2496	171	1754	4716	163	851	3828	2371	5863	2844	1214	3235	3339	3398	1954	849	1033	1703	2197
Row 47	4141	5324	33	4469	2144	1683	4943	613	3150	5020	1886	2959	5954	2474	491	435	3618	2275	5231	4426	801	3874	391	4154	5415	5048	4790	4874	4520	5994	1917	257	974	5532	2237	3478	5552	4026	2543	269	4440	3897	1197	301	3070	1462	5084	3755	5622
Row 48	3428	3938	4638	5926	3534	3389	2239	396	4408	422	5052	1572	2789	3360	4119	882	2751	3398	4634	209	3042	3794	5938	4248	5246	611	5257	3901	1058	4734	1512	2203	1609	882	4872	1803	4941	5720	4830	4428	44	1535	4480	1313	5464	3056	5504	1433	2085
Row 49	5589	5336	3770	3887	2419	1534	3038	2083	4153	1556	237	4583	3373	1023	5989	1950	1898	4096	4937	4969	3533	2900	2353	4053	1954	916	2109	1942	1356	1144	5899	1735	615	817	5567	4351	2789	990	2405	3248	2482	5356	2906	1460	740	4541	871	1315	4872

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.