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	344	1354	1086	633	5883	1454	924	683	4362	1129	3265	3850	2552	282	808	3536	3849	3166	2363	693	3437	4492	5944	5713	111	5070	4111	1092	5456	3264	4323	5800	4617	5408	432	4499	861	1355	5182	5223	2484	2446	3072	5036	2727	3880	2572	575	1046
Row 1	4935	1268	4483	3426	1211	4195	3537	280	2306	4629	5736	5569	2951	5535	4186	2358	5967	2684	3219	1322	1866	2441	3805	4311	5513	2841	1038	3393	5413	1612	4438	4347	2879	2920	1773	4090	1115	5310	4369	3420	3939	4104	2989	889	3639	1174	3247	3605	3858
Row 2	466	4926	5724	2907	2730	4034	2420	5571	5071	5812	4983	683	4250	3330	3562	1169	5103	1651	2284	4413	20	5703	2351	4123	2692	3240	1761	3866	486	5366	1724	951	4291	1447	3858	1021	5480	277	591	4551	88	5574	5233	4337	2904	2795	5506	2007	4445
Row 3	1789	419	4464	1492	2770	2587	4184	9	4348	2049	495	3713	3772	1446	2003	5219	5303	3023	4699	5579	3614	3249	5667	3187	2482	4004	91	5276	3509	2097	3720	5298	2516	2184	789	5286	4770	4973	5294	3118	1021	5789	830	4793	1234	2832	4011	537	5855
Row 4	2709	115	3468	5957	5781	655	2439	3784	746	1714	1293	2843	5434	590	5358	1618	1379	4643	388	351	3937	3505	1372	3726	4334	164	4959	1166	4174	5495	1020	883	5610	4488	839	5390	5143	3278	3174	5888	4992	4467	2730	4426	5057	2088	43	435	731
Row 5	430	786	4667	3934	2157	2392	2267	2321	1351	3433	495	846	4452	1377	455	2940	2216	5845	2082	5493	3018	1969	4484	1485	4699	2909	541	786	2952	976	1516	3381	1761	183	1314	3918	2574	3581	239	3925	1013	733	4770	5465	2109	5224	2404	4325	5068
Row 6	4485	3817	2086	454	2301	3570	5152	5210	4110	5937	2161	5086	1453	5542	846	1635	856	4764	4209	4436	5002	2133	5449	5735	902	4914	1844	126	1317	168	5193	5802	3985	1279	256	286	4849	5407	5496	2959	5344	1656	2044	797	1198	2889	2431	2053	1653
Row 7	639	489	655	2771	5938	389	3673	4851	2233	3798	168	2400	2990	5970	385	4269	225	670	3117	5632	165	75	4976	1821	2118	5772	3018	5007	2202	5071	660	2841	5560	1314	5611	5497	1703	3284	4348	3935	1081	4515	335	4071	4484	719	2339	4709	1388
Row 8	5455	4340	1553	5530	3315	3373	1647	3086	391	654	5288	5462	1313	2128	5021	2627	1739	4518	4329	5022	2866	2264	103	1380	2598	4173	5864	3317	512	4572	4704	5967	2911	257	5496	226	3630	1143	3312	4020	1797	2600	3482	3109	4727	2503	5736	466	1021
Row 9	4065	5488	3886	328	5591	5265	2926	3763	5129	242	4275	3701	4946	4241	611	5202	3737	837	2831	4879	4148	851	675	747	4333	3784	5474	835	3520	5940	1855	1584	5428	5740	1911	5018	5005	4837	2780	4133	5078	1055	1833	4023	5295	2444	3225	3031	3281
Row 10	56	1910	1429	906	2585	2176	5239	368	1650	73	3888	1589	1928	5471	1016	1668	1382	34	672	218	2814	4805	5295	3868	638	3318	3162	3082	543	193	362	598	2102	1791	1504	4686	3966	742	5054	5615	815	2941	1204	2742	2411	2220	4410	3793	2253
Row 11	5081	4010	5066	3886	3305	2933	4523	623	95	1605	1165	287	1967	1763	2388	3757	3266	1074	1723	4008	128	1337	4822	3068	2541	1564	5479	4760	5973	3271	1013	5054	1281	78	2939	4586	3011	1462	5208	3105	3066	373	3392	5033	2135	5780	2789	5400	854
Row 12	4511	3408	981	5848	2230	4048	2388	3794	3527	1148	3767	798	2160	2820	2079	2237	5759	664	5248	1220	5871	2353	4286	243	5744	3318	2377	5524	107	1777	377	4617	5185	1357	4465	1414	5405	853	5207	2932	2000	2973	3729	4159	5793	5807	396	5551	470
Row 13	5644	771	341	1996	5057	584	1740	2375	2961	1263	2481	4738	1640	1098	3922	2997	5562	5335	2401	414	4542	5332	2414	1515	3061	572	1308	2868	968	859	3338	611	1630	3678	2607	686	4262	4346	3060	1222	5609	5541	5959	1249	638	3881	4245	200	3216
Row 14	645	613	1757	5977	3027	3272	3038	3598	4579	5905	4566	5438	3242	5177	1067	920	1783	1753	5182	128	4812	403	5737	4352	362	985	4990	4242	5229	5189	1457	5874	5802	3213	5851	2828	485	2888	425	5064	2793	4991	4501	35	4167	5568	955	5949	1320
Row 15	136	77	131	538	5814	4483	899	798	3472	5141	27	2661	597	5901	2462	3810	5751	5289	4294	2639	5714	3358	5431	4704	1858	5465	2870	1425	419	2819	2744	554	2896	2875	1092	2709	1358	1991	3506	4830	1131	3533	1490	1728	3433	3951	5537	3184	3239
Row 16	3831	5822	2952	1188	5252	1656	3046	4717	4526	4471	5136	1344	1214	5690	4239	4089	781	948	5446	2772	4453	4276	3903	1986	5765	5630	5419	3716	5166	2602	954	2997	2423	3906	4184	1675	5562	1229	391	4087	5699	5526	5431	913	5215	3670	5002	5996	4617
Row 17	4448	2767	3070	2723	670	5055	2487	299	4473	203	5465	1075	1156	2461	3497	5062	645	5172	4623	1873	5562	2710	1572	5088	2141	2485	4302	5810	1486	4298	4427	5933	1065	1496	2656	1734	551	5143	2032	5024	5345	1497	98	501	3957	3595	5562	4601	2766
Row 18	4185	474	2328	895	2046	1415	3035	4530	5717	2845	15	4014	1271	5948	5078	2766	2603	811	3317	1745	2843	2340	1089	4340	2438	1589	2296	32	1151	897	2798	5336	1371	5125	230	3416	540	3265	1946	256	109	1961	4270	1379	1909	3348	4144	4511	4159
Row 19	1460	256	1002	3800	1345	5341	237	2933	1637	269	4084	2533	3067	3419	3904	2192	3649	1320	2731	913	3266	2987	1021	5226	1256	2399	1134	4604	543	5645	2762	2003	5900	3763	5802	1244	3103	39	4177	4739	308	2261	1272	3374	5680	5176	5565	3328	495
Row 20	2296	4240	3760	5282	5261	2986	538	1659	4119	5141	2202	3763	1902	4204	3663	5664	4006	4907	2767	4045	3083	1505	4352	5344	2777	1726	5023	1952	1290	2350	2446	3586	590	206	2867	5850	3191	3404	1508	1310	2545	3710	5072	4446	1913	2735	4110	5918	1641
Row 21	877	3962	4723	2382	2314	4066	5158	4039	3088	1109	5329	5438	3555	2914	27	3761	5780	5876	951	3184	1384	2261	5729	5093	1332	4175	1006	4066	2285	923	5707	3161	4885	4430	5542	1198	2495	4700	5237	5583	5809	4565	5021	3363	1478	5047	1124	1258	4923
Row 22	2075	4442	306	4335	4170	5399	5666	2344	404	3732	4628	1327	3439	1789	211	1868	1331	1409	4363	30	645	3945	5838	5210	2966	3201	687	2013	4324	1945	935	398	387	1241	4732	4556	639	4398	900	1043	2130	5528	2369	5568	1317	2580	1435	2647	3989
Row 23	5797	2676	4634	3742	2514	3843	707	5714	4530	2719	4037	474	3654	4435	860	4894	3166	5416	5533	1563	316	575	3693	5843	2944	3260	1159	5524	4694	3806	3512	4490	481	2146	2232	2994	5988	2938	2708	4517	5657	744	4991	3310	5178	5850	2203	2344	5266
Row 24	1736	3907	5581	2311	1599	5423	5254	4858	582	4778	3552	4387	2289	2041	4868	4435	4273	1862	4422	1210	4569	2938	867	5313	1928	4176	4491	1778	379	834	1043	2115	4741	623	4425	339	46	3678	5197	628	2456	2748	5015	4745	4789	3883	3179	3061	5744
Row 25	1600	4271	4313	4538	5137	3626	465	3313	2116	2243	3691	2950	3285	5805	1690	3908	4230	2029	3953	1908	1225	4581	4363	3972	3595	3107	2760	1477	285	5821	1221	1884	4091	5533	421	3228	3158	886	540	5274	3128	4231	2223	413	4036	3913	4320	2265	5941
Row 26	2273	4172	1165	853	2534	5137	4447	5640	1897	5924	5924	1717	1144	1808	5808	676	2228	3035	3834	3114	3574	3107	242	1804	5329	654	5839	3242	4974	2103	3182	1247	275	4347	2099	2808	3483	546	2448	5379	470	2371	1096	1613	4178	903	2289	406	3937
Row 27	123	3519	1510	3229	3760	3314	2558	4414	3152	5799	3387	5255	2981	4634	5530	1327	732	2337	4809	1278	4784	4188	1748	1155	5283	3360	5332	185	5649	5738	4121	5771	3256	5631	3000	1016	2944	5557	5429	96	5356	2816	5351	2336	1449	4880	3662	2181	1217
Row 28	2471	3459	6000	658	5206	1155	5940	2566	487	125	2214	224	4245	1985	3480	3876	4984	4495	820	4541	3924	915	3896	739	266	231	2188	5145	3893	4368	361	363	1826	361	1021	1032	1515	960	3597	2001	1084	5811	2225	5329	1795	5704	3205	778	4199
Row 29	4024	5318	2122	4939	3214	2861	5204	3445	5048	4348	1337	3416	4709	1700	5242	5069	2720	274	584	3680	3870	2585	4764	3680	4810	4093	5475	4513	1297	252	2712	5320	5570	4834	4258	2783	1694	3462	227	742	1809	1564	4158	518	3263	3399	5587	5983	3673
Row 30	171	3663	1542	2755	2426	5222	1564	519	4696	77	1815	4948	2789	1135	4518	1622	5393	1300	3315	2854	1527	4057	4663	3090	2214	5181	353	5613	4767	336	3285	4937	3998	4827	1692	424	4048	3256	942	2744	3332	2757	1692	120	3891	209	1742	3284	1508
Row 31	5057	138	3035	3113	4800	124	5327	3981	477	4940	2747	813	2225	1684	4810	1051	3375	5234	5099	630	175	1843	3962	2932	3534	4082	823	3742	5823	4106	5250	4879	4244	2285	1992	3044	2409	1318	1024	2885	258	3770	3697	2482	5453	2507	3533	2827	1740
Row 32	2631	3457	1915	4474	1419	4847	2007	5500	5669	5749	5323	3775	4999	4201	2018	1283	192	5061	3692	1510	84	576	1767	3853	4273	4248	3306	780	1781	133	2519	4411	3590	4434	2885	5008	3280	4892	4507	2948	4641	3829	723	3639	2030	2740	4922	2222	1800
Row 33	2613	3731	1883	3189	5497	5736	1462	3745	3042	2241	5525	3174	4760	3936	764	3193	821	5771	473	5712	4277	3421	4352	2106	4143	1991	4135	882	913	356	2682	3526	4087	4564	714	3584	4300	2175	1329	1341	4415	854	4515	3175	4789	5278	367	5610	5048
Row 34	840	5321	3325	4260	3673	5431	2403	5663	3566	3284	575	3921	5965	4100	2008	4529	4814	5591	2829	989	919	4169	5404	1772	2684	2578	561	1961	2944	170	1009	3784	5491	4334	2044	3163	3764	4446	2826	1329	1730	3401	5250	1695	1501	1257	223	314	848
Row 35	3051	1302	1766	1220	705	3538	3903	3282	4099	5864	226	4268	873	4010	3759	5206	53	921	2969	4498	3746	4298	227	1146	3547	1922	2646	4804	2144	2960	5651	5195	4261	1417	415	4966	4954	4318	2248	3052	4181	2474	1320	5053	483	5078	4259	536	5999
Row 36	1228	5033	3744	5525	5260	4890	3071	1181	1536	1875	3325	4495	1525	2520	2756	2941	2934	1722	1894	1251	3970	4946	5432	443	266	4485	926	5344	2743	1461	5342	3970	494	3086	3495	5753	1975	566	934	3511	2440	4258	2005	3964	778	4761	905	3711	482
Row 37	2798	4962	4451	1744	4393	4894	2010	2877	5819	1353	5620	1280	694	3590	1773	3780	1084	1525	5755	1649	2459	3265	4088	717	5270	2052	1494	4030	2956	5204	4512	5754	4166	2963	1498	2558	1856	3507	5435	1675	4859	5054	2954	5553	2644	4726	3332	3727	251
Row 38	3086	5375	2710	351	3463	3426	5620	5514	4919	3650	2470	4123	2161	2223	2288	5123	3720	4846	979	1226	4280	2653	85	3334	5607	5638	5977	4333	2970	3703	4583	55	3078	1292	406	541	4718	25	55	3636	3674	2524	1758	5835	4747	4046	4958	2466	2891
Row 39	5936	3692	1170	2589	3777	4504	2195	3414	4480	527	383	2183	5110	438	5261	402	843	5801	5119	868	5856	2754	4541	2379	4512	4376	1125	2558	3333	3591	5448	3269	1282	618	5857	5059	5122	2051	2472	3601	2578	2855	5784	1687	3293	5045	2089	4135	4846
Row 40	1207	5002	4701	3961	3543	1080	2473	1919	2204	5030	5251	5795	4477	2519	1076	5095	2375	135	4216	4426	2607	1817	1004	5461	1601	2691	2753	645	4779	888	5490	5985	5890	4191	3945	3432	5270	418	5351	1474	5447	4601	1268	3924	1120	2344	3018	3495	2478
Row 41	1234	1921	5084	3050	2924	4545	4651	5614	1298	5295	4392	2185	4785	4377	2074	2976	2322	5506	2245	2739	4856	3719	2185	3457	4986	109	4576	1329	3126	2070	3807	4360	3990	2890	1410	914	1435	60	527	2732	5355	4919	4916	4140	3296	990	1115	5617	495
Row 42	3360	2355	5351	1078	4540	2807	63	4648	1383	1392	1774	3453	5198	134	1442	2088	1543	2355	3522	1603	2882	253	957	1801	5169	5096	5096	158	210	4712	653	3570	1067	4	4647	5607	2811	4710	4255	4193	101	29	1645	5298	162	3087	1385	1705	5442
Row 43	4907	3307	2323	5160	4263	4123	4328	3359	3219	4486	3569	1931	5139	1138	2998	5142	5784	2604	1952	4493	859	145	4594	887	1790	3891	1049	4876	5276	2753	4317	4182	59	640	3341	4322	4763	1669	1680	1981	154	5249	3912	5292	386	909	4434	170	3513
Row 44	386	4663	4371	531	3256	5257	2320	1146	306	1196	422	3058	5513	4604	3117	152	1944	1439	4915	3613	3119	896	3766	2367	4807	3058	2752	5715	1492	2922	3227	1877	1584	1597	2408	4839	854	4727	5985	1160	5922	406	4217	5434	5009	1334	5586	953	2772
Row 45	4500	4565	5890	5395	2331	2257	4202	5389	5008	3916	880	1929	1143	2757	3513	2740	5164	2351	3594	3890	2335	4753	3812	2741	2969	3246	1749	4303	2831	2702	1075	1331	1267	965	726	3597	3221	4927	2985	2229	2843	3865	4158	3985	621	1670	724	5785	4020
Row 46	4317	3675	355	3070	1486	3095	38	4732	4844	4341	1563	1546	5415	2893	2812	379	3618	409	3599	2545	3394	5827	5387	1258	3985	3372	1879	5654	4096	1664	3674	2413	5338	4029	5482	824	1123	5519	5555	5967	3860	1117	1513	3274	4010	4324	3653	1627	4733
Row 47	1251	4172	2126	1078	3558	3384	5063	929	5262	4716	5025	925	2390	1437	263	418	918	1086	1541	436	641	1507	4296	1758	3020	1569	5767	1343	5222	1394	75	472	5565	2201	1550	3123	5584	612	4052	4846	5328	3076	5771	1717	4512	33	2134	5429	1119
Row 48	3674	5865	1760	5181	4160	3517	2200	5729	3284	3543	4950	4677	3618	5422	4242	5818	972	1364	5401	1584	5415	4246	911	2491	4017	2628	1002	4049	4762	430	5168	2436	295	927	1616	4454	4443	3816	4183	1726	1359	3132	403	4976	2553	4644	4794	3524	7
Row 49	4195	5108	5422	2441	18	1912	457	2646	2914	4505	1407	3344	3672	3843	3638	4598	5458	2091	3041	3274	273	4767	4632	3405	5169	3608	5958	3812	2401	3481	3819	596	2589	3241	3036	2607	5153	3492	5252	2066	1997	659	5409	5669	4501	3046	4267	3959	5137

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.