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	5909	3773	2402	4956	2874	5545	1314	3117	979	2500	4213	1091	4395	30	1731	5764	5857	5613	5069	5363	3549	5653	85	3507	2065	5571	862	177	2988	3543	5332	5325	851	4515	306	4281	3638	1657	4088	5253	2576	983	786	1024	2613	3266	2467	5817	5051
Row 1	2748	1345	2967	384	5236	5834	2644	5303	1109	4326	2976	5065	867	5471	4346	1524	1201	3621	3549	4030	4839	4295	3561	3917	3240	987	4273	582	967	5424	4355	5602	1521	4501	5512	547	4688	4373	66	1672	5545	961	349	1818	105	3589	5718	1307	218
Row 2	3464	1170	3084	5759	5395	1301	199	357	5202	2190	768	4388	3595	4118	1777	5567	527	120	3245	2171	5764	4645	4351	1463	1283	1004	5823	5080	5637	5609	4784	2239	670	1688	1298	2588	5916	3369	5588	2402	2167	823	2135	3213	1825	1540	5246	585	1211
Row 3	2081	2272	3762	3904	3919	5923	4549	5040	1171	5442	231	4367	834	4291	595	5461	4988	5308	133	2907	3748	2067	1543	1665	4085	4371	5971	3547	2853	4973	447	3370	3759	4153	3684	5331	2766	1316	4364	3024	3552	2631	5938	5711	2441	2625	3236	529	5918
Row 4	5096	5297	4704	3694	223	3385	5948	2647	3307	3915	2925	2133	2273	4892	5304	3502	3739	1135	4108	5224	2233	795	5182	5721	5935	2978	476	2076	775	3353	1362	5902	5306	1453	2254	3350	2504	2664	895	1838	4553	3694	3860	1546	4642	357	3002	1958	2399
Row 5	909	4806	3327	4458	5613	3904	4542	1185	4928	2048	675	2947	2395	1806	5715	4602	3997	3558	3292	2768	4656	1070	526	5122	1637	460	4690	2223	4661	5779	4678	4118	996	1601	5330	2630	5303	4745	5043	4308	5551	1900	4368	4955	4003	731	5637	255	5813
Row 6	1835	5751	379	5086	3008	2393	3251	5802	218	771	5278	5241	283	5411	1168	4193	3745	1390	420	203	4447	4637	1873	961	3376	2193	5605	3375	816	2338	3702	2713	2428	2394	4913	685	207	563	5953	4587	3732	3250	2609	5886	4330	2305	913	253	2886
Row 7	4737	3621	3890	3768	4678	5320	4260	1476	3132	2327	1690	4460	33	4907	1094	3274	1640	1976	4349	5465	382	1334	4974	1267	3345	4921	136	1163	3480	4924	4190	4569	1734	3005	1442	3953	3043	3356	1654	5313	3405	5947	4785	177	3924	453	3773	2326	4777
Row 8	3986	1242	2139	1409	3345	2467	4183	5829	1808	4667	3844	3237	5799	1125	217	1210	3710	5801	2432	5413	2304	4049	303	330	1095	1403	5340	2834	1752	1103	555	2474	3481	4000	4329	4231	5172	4154	4840	876	1291	4607	4671	4987	1902	340	3569	5781	4081
Row 9	5729	2468	4956	2015	3217	4422	4616	773	5538	1608	3753	934	4951	5614	2267	4081	5058	5232	3836	309	3798	3855	2947	3153	574	2633	1488	5049	2290	1014	918	4411	4497	1035	2275	667	910	5396	4844	979	330	4586	3127	3371	5041	2388	2056	2473	4366
Row 10	399	2622	1453	5043	3941	6000	2822	1712	2968	2446	1230	5238	91	5786	1342	792	3329	5740	1074	3953	5696	3729	953	4257	1580	3629	2008	5599	390	141	5967	2296	2649	4972	2554	708	5488	3710	4104	5259	4461	3661	789	4872	3832	1034	516	3198	1168
Row 11	3989	506	4178	5569	4213	4233	5512	2313	4342	485	3613	3864	389	2657	5226	5748	3117	1124	2865	4970	1609	742	4576	4472	2836	3569	2412	2049	3258	1679	3568	5177	4966	5962	5958	5668	4124	34	5750	3164	3163	419	867	4652	5835	1549	2238	582	1837
Row 12	4633	4506	5321	3263	1270	2726	2034	497	1260	1127	1196	645	223	3345	4620	640	3487	5339	1794	4900	4275	383	2794	600	84	384	928	2902	65	4515	1871	4000	5045	3029	4124	1184	513	5576	4444	4481	4443	1146	5738	745	2126	4145	2434	5729	4594
Row 13	3786	2166	4017	1084	993	5033	2682	2103	2777	4233	4143	4359	5067	1011	1557	2501	5818	2302	5624	1191	1848	4700	4836	2879	1247	3467	2112	2361	3930	3519	1231	3630	5768	358	997	3089	2683	4062	4098	2951	5816	5689	238	1187	5139	1748	2770	3176	480
Row 14	4826	885	2177	1810	1960	2607	4224	5800	4379	81	2404	5804	2682	5823	5324	5745	3398	450	4189	2405	2776	15	5629	3355	4992	489	1276	1733	5388	1270	2376	58	2062	3365	619	3200	577	3587	5283	1826	2534	3169	5291	4146	2812	4886	414	3073	4242
Row 15	1108	942	3177	4187	327	5028	2738	5371	1225	1349	3536	2049	1876	4623	3023	4987	5379	2627	5152	1934	4313	5025	4805	5128	4661	1419	1730	3386	2823	5132	490	3753	1046	1854	4477	3579	1399	5461	3666	5340	3614	5016	4184	5247	300	901	4239	5809	4204
Row 16	1078	2628	2223	5356	2821	3082	3914	3143	1663	5388	2125	5666	3200	2946	5071	3125	5060	5344	330	3292	2978	1761	1994	1866	1120	5291	970	2631	286	3636	5245	4858	268	1825	2012	5384	2418	2813	2125	4660	2604	5337	2515	2391	4619	424	3214	4777	1975
Row 17	3539	2748	5468	760	2904	1972	1659	4092	4790	5171	993	4155	3908	2629	847	3656	5475	5875	5299	3747	331	297	5929	2071	3130	3877	4405	3533	5906	3181	5318	4630	4120	4886	5434	2353	4353	4187	1258	4872	4150	4757	113	5013	3140	3219	5841	650	4680
Row 18	4029	3203	4446	1237	5893	3088	5872	4585	3331	2934	5635	1677	4667	4809	1032	4922	5631	2183	1506	3493	3170	4464	1324	226	5518	4145	4661	4842	3231	697	2078	5718	4973	5550	4306	5005	5255	355	2604	1844	480	5285	1440	2464	4126	4420	4377	2367	1894
Row 19	2582	2327	298	4198	2216	4900	219	430	2795	4919	1029	4524	630	4131	3016	5534	3814	2565	349	1218	346	1220	4378	1956	4119	4416	4341	1588	1751	4748	2928	5903	2403	1032	4765	5042	2469	2329	3797	4176	1430	1062	1251	5696	4027	3914	3765	4329	4718
Row 20	4644	1981	1813	5163	5122	4072	5207	5966	5999	4531	3889	3314	5809	4958	1828	3197	99	1255	588	1155	3142	1736	5550	2081	941	2253	5135	1799	661	1679	3882	4273	626	2576	4958	874	4875	5676	3384	3381	5771	4588	481	2467	1247	5551	171	570	1600
Row 21	5925	5132	1514	4357	3689	2550	448	2954	4946	3162	4742	3207	5821	1743	1356	1473	84	5703	1490	2828	376	803	5498	1117	1641	62	3048	5398	5137	3750	1945	2564	1192	5624	4570	240	4475	3930	3366	4714	785	4070	1878	3559	1175	565	1446	2971	1290
Row 22	4462	142	531	5348	5325	1296	3926	1917	5474	94	677	4900	3736	26	1920	5797	3711	4599	756	5777	3668	3600	2330	4232	642	4504	1301	2095	5822	4773	5336	5045	3692	2469	4217	5018	21	3492	1808	5913	2805	2955	5133	254	2686	1131	2194	4250	829
Row 23	2063	3759	1796	2240	4691	5756	2892	754	4835	2789	3125	3441	172	837	1601	1617	1189	3434	1424	2450	1729	793	3675	3406	2603	5699	1003	3336	3425	2951	3188	1156	4995	4112	663	4172	3452	3609	565	5762	2351	4657	5879	3322	5493	223	2811	4504	4594
Row 24	366	4615	724	2492	1832	5420	682	4868	4608	5054	2157	3240	3667	2980	309	73	2392	756	5467	4265	4751	382	4297	2912	3199	257	1561	5767	3718	3257	1750	1856	3305	1355	2488	1237	3246	124	1657	26	1594	3323	1253	635	5835	5104	398	2078	4870
Row 25	4781	2896	691	3043	4274	98	2116	1281	5609	5655	4177	4238	5283	4674	5199	3477	3327	217	317	1698	3732	1256	3916	3359	4870	1946	1415	5351	4762	2175	5496	4307	3181	147	5308	3594	4608	4455	2126	657	2883	5367	2450	5646	2393	3939	4146	4932	2025
Row 26	3428	1936	3000	4729	5817	4223	2733	4717	1646	3563	2306	507	4160	5961	4107	3780	3186	812	2778	3333	1615	4221	2421	4337	71	862	4950	1512	2607	412	245	2248	326	3671	867	3322	4742	2457	1186	5199	2776	4632	478	2822	2	2133	3959	4990	3984
Row 27	1853	4104	1669	1659	295	5007	5059	1529	2291	5699	703	4635	390	5428	864	5821	4612	1550	5936	3835	3291	5977	1483	1098	4877	4778	2608	4126	2608	5183	5672	1865	3653	5765	1657	1841	1986	5086	5908	1074	5162	5142	310	2734	5070	3545	3451	1335	469
Row 28	450	2113	882	5660	5203	129	4919	5145	2631	5449	290	5361	766	4775	4022	2836	2241	4546	5724	3910	4666	905	2378	2872	2409	348	1089	4174	4965	2729	3829	4348	3239	986	1982	5127	775	4280	484	2492	2288	3383	3035	3801	1103	1614	3505	597	3001
Row 29	399	1755	735	3178	5048	2927	445	4657	1211	760	2195	3173	4583	1890	3673	5533	3382	5609	716	1008	526	3959	5061	1406	5276	4283	3642	2638	5149	5387	3862	3402	590	4753	4057	5234	2510	499	2222	3099	4795	1883	789	982	4194	4752	208	5968	5944
Row 30	502	5073	2403	87	4783	5386	1849	1409	2455	2681	876	980	5085	4829	933	4276	316	2726	3206	2179	2961	1734	2029	4521	2995	3350	6	348	2128	3568	2666	3629	4930	2246	1343	2205	3701	3497	606	2092	4135	3684	4659	285	467	4726	888	3230	4257
Row 31	198	3548	4336	1955	1589	4059	1090	3556	5745	5288	1945	3825	3883	2502	3534	4177	1184	4692	3425	1464	441	582	1579	253	5179	3946	2310	1831	807	102	663	3518	2667	5308	3163	1689	5931	1632	4308	2816	464	2825	21	1473	405	2069	5174	3013	3062
Row 32	3111	1866	4285	3562	3689	4640	2534	5119	1674	817	5655	4856	2334	5133	4488	2572	5616	1157	2198	4510	2384	2171	80	5120	3315	421	1521	2217	4426	1668	2278	2980	4655	5932	15	5934	3315	2291	4525	3751	3769	1101	4699	1727	5318	76	5703	5267	1443
Row 33	1894	3779	1112	5430	4421	5028	4726	525	4907	869	24	3098	2389	1034	626	5726	1442	1641	3045	2081	3974	4955	2249	4356	2636	880	1627	1090	2260	4898	2258	3557	5203	4946	4774	5370	5364	3888	4858	5727	1389	5614	926	1639	1100	3622	3916	1767	3977
Row 34	1741	4719	786	4361	2356	5341	3833	1720	446	57	112	3189	109	3375	1681	4249	4004	5380	1726	1660	3213	1405	190	40	4708	5780	4391	4204	884	4490	5761	2108	2773	4476	265	5809	4389	476	2079	4857	972	4977	3105	3605	3667	5486	3533	878	849
Row 35	894	4545	1362	4353	4334	4138	3071	2062	2768	3804	3218	2925	709	3676	4981	1840	3719	4257	2475	5559	441	5384	2009	879	5275	821	5898	4257	4980	4699	4369	3213	4034	2491	1891	4608	581	1550	1983	1094	1448	406	9	3533	1263	56	135	3812	3847
Row 36	5008	171	1159	4941	1701	1091	3525	3926	4112	2706	393	4775	453	4062	198	2284	5684	2184	1401	1064	548	1658	4124	2114	4848	4787	3495	5608	4355	3373	1441	1186	400	5938	3928	1237	5132	4431	2928	1776	416	2917	3387	4889	3256	4846	2527	5791	756
Row 37	1950	5336	939	3807	5602	158	1151	2207	2397	1799	5041	2382	5057	5242	1242	2845	3483	3823	291	2336	2553	5016	1004	1330	2797	106	720	4813	3185	1688	5999	2736	4204	2440	4229	5012	300	3194	5937	3890	5909	4814	2468	5119	1605	1952	1132	4185	1487
Row 38	398	3940	1601	3873	3186	788	5523	3978	4219	3308	3944	614	87	2217	2340	4258	4338	1730	2539	3442	4095	1517	56	4692	4929	5477	104	1746	3311	5063	959	3590	4231	1449	3178	4256	5364	3655	5396	705	794	2809	1106	1431	3937	2660	3338	4570	1329
Row 39	1449	759	4927	3923	2181	5882	4460	5215	3135	2093	1423	1344	3070	5611	2445	5609	1265	3390	4507	3246	973	107	5952	980	5345	5661	4252	5143	1706	1021	1704	2050	3173	1240	69	3103	2965	4926	5287	4733	158	413	2114	4867	4540	5623	3727	937	2205
Row 40	414	526	4271	2827	510	2990	5864	351	4396	1246	4922	2004	142	3842	1176	2306	4300	5592	3495	4931	2359	3680	5594	3877	1661	3249	5592	2680	4507	3038	3939	4336	1127	5815	5169	4619	4546	2029	5922	403	4133	1651	258	3562	5526	3030	389	5697	1611
Row 41	5214	5168	170	2824	2877	5213	2429	456	1507	3135	2707	1990	5284	4153	1354	1683	3608	3247	2846	4492	4139	1767	4685	5679	5192	1093	4	1377	5378	5470	309	3047	3211	3420	4651	1908	2105	3406	4545	4273	4526	5317	1209	1944	1889	2965	3327	2916	2067
Row 42	3266	5497	4131	1304	1488	1769	2345	1475	4644	222	364	176	2464	1273	5140	3986	2983	2638	696	3560	456	3947	1036	466	1077	1211	1466	3812	1882	5694	4505	1084	3588	1284	4697	3939	4817	3594	641	4727	4716	3605	965	4989	1935	4925	5007	2290	1675
Row 43	3163	3797	5966	4600	2597	3366	2365	3992	4863	2777	3835	3613	1446	1512	761	1354	1423	2748	1064	1308	1561	1274	5131	1364	3613	4731	1816	4820	1467	1912	5876	3498	3291	2267	100	5660	3867	219	4941	415	5189	3146	5804	704	5579	274	3172	5582	4231
Row 44	4378	2057	4257	4447	2775	3581	616	3440	431	3754	1976	126	1858	4195	2430	2874	1963	5191	1378	4721	577	1286	4505	305	671	5519	5420	4005	5804	1675	5189	194	164	4537	1056	3093	707	988	5009	2861	2436	2125	1615	2603	5924	2846	4239	1973	899
Row 45	1945	4929	2380	4986	5731	620	331	2261	4549	5137	4643	2775	1132	3221	3628	5409	5327	3731	4068	2494	364	757	2811	2353	4916	5901	3482	3523	981	2108	3643	2170	2059	3300	1721	4129	3727	4427	2497	399	5520	5998	3427	735	988	5407	4302	5156	2473
Row 46	2168	5221	3067	4647	4994	3154	3977	2720	25	1645	3641	1214	970	5578	3003	1546	3914	5071	2792	949	5633	3070	3822	1120	1852	1168	2003	3055	2769	804	3848	4064	1730	3422	276	1366	5462	5616	1436	2011	2753	5760	959	5557	4146	1647	5696	2672	5441
Row 47	1958	5998	1870	3008	4442	4635	3123	3853	4239	1650	462	2477	1080	2525	1929	3867	1828	713	2122	5762	5213	1172	4882	1786	2889	1601	3755	5812	954	2493	5847	2388	4392	3556	5900	4787	2426	551	2825	145	4850	550	5286	5371	619	3541	3988	1787	532
Row 48	3164	4912	513	5844	507	1347	5501	1925	1733	2030	4694	1256	4060	4240	105	1417	236	3186	2537	4878	3383	62	4401	2712	4882	3219	5847	2336	2888	2037	3002	5240	3523	1739	2420	2214	331	4776	948	2452	3598	5799	920	5591	4503	4692	2703	2698	1621
Row 49	3992	276	1698	2595	4456	5992	3934	1776	1030	5112	4289	3758	1427	4769	3298	63	3758	5201	5752	3114	316	4475	4884	1415	3977	2479	4955	5259	3084	501	463	278	2173	1630	5395	2874	4377	1988	2437	889	2676	349	5770	1846	4391	98	2494	2434	2957

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.