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	7	4119	3567	4695	556	3523	409	410	785	4950	1595	4678	3427	3759	4421	1087	3168	1061	4138	3892	1629	1397	5206	1790	1807	4265	2197	3197	135	1010	1611	4112	2329	1446	2088	5298	3995	3824	1059	2002	226	4410	5437	5633	1837	3775	2670	1690	4873
Row 1	2488	2046	784	2964	5142	5206	1854	3687	4573	3656	5385	5778	3787	729	2752	4541	5930	5293	1120	57	3273	1269	93	4357	3354	3828	2998	267	5439	2241	4097	3980	2424	4548	3212	408	2298	4171	720	5067	1845	1853	5646	2957	14	587	2579	4708	577
Row 2	1363	5926	1574	5606	5550	5296	622	1655	267	927	4087	2197	5565	4562	4163	1643	3434	4807	908	753	1989	1164	2031	1283	4619	791	3591	1	4434	2447	4567	4482	870	5923	5992	4983	902	3447	2657	3877	3422	2705	4727	5220	133	4651	1294	4123	5879
Row 3	3926	1578	4448	2314	5170	5488	4372	3983	722	2025	4992	4067	4414	3675	2287	2331	1359	2417	4853	1867	1121	4066	2579	4636	1536	991	900	1898	4925	2320	5355	768	5386	5763	5364	468	5453	1751	5256	3638	735	814	2913	1453	5418	1964	3115	5243	1530
Row 4	3059	2112	676	915	3156	2659	4302	3021	1379	3189	5879	4963	2092	1385	644	3622	2217	462	5153	1501	3385	1881	4441	124	5054	3319	3757	5588	5471	3907	3936	3728	176	1214	5633	685	4373	1749	1324	1933	78	2156	3958	4652	5304	5576	2105	3632	3340
Row 5	1711	854	4831	1556	540	1706	3901	3961	3032	5474	3839	5128	1330	4239	2045	2195	3443	962	1594	1465	1099	2210	1219	4316	2501	3818	2644	3497	2429	1305	3282	2985	2005	1392	5655	4626	2887	1044	3445	3101	461	5842	4876	5554	4341	3038	5817	3974	22
Row 6	2127	1986	4443	823	2251	3845	2919	2082	5169	623	1181	1744	4759	4178	3189	1772	1373	1474	443	2626	2729	242	3092	2646	818	5753	5962	201	2772	721	343	4127	2832	344	5472	3238	610	5622	5836	2881	2151	571	554	2602	5468	5756	4912	5091	957
Row 7	3885	3621	1136	2121	5341	4731	2813	4468	4157	4201	2457	760	2064	2800	2954	3363	1388	4686	4927	1443	2453	2272	4828	1707	5282	4916	404	4429	1365	662	944	670	1222	444	4566	5120	32	1615	2557	2670	574	5981	5229	4853	936	4305	3417	5727	3078
Row 8	5878	5646	2508	2735	2112	1291	3413	1849	5041	4721	555	4468	4844	322	3467	4558	1872	5467	5290	644	786	1693	619	2732	203	1393	4268	2889	1107	3407	4258	5301	757	4811	3960	3450	1654	1582	4278	747	5089	1228	1778	4475	5878	5835	1060	4765	5228
Row 9	5576	909	822	5556	1949	5547	4656	1791	1716	3469	1984	3727	2293	5461	3667	2513	2828	1656	2228	5097	2166	3533	1977	3702	5351	1847	3658	3857	747	4845	2788	1185	5288	747	4793	5200	1774	3788	3425	4810	4369	348	5695	4833	1813	2850	5773	5525	1532
Row 10	3321	5928	4706	1499	5414	2080	161	5163	1420	1753	2087	1658	2540	3609	1601	3544	2949	84	1195	4691	3416	4724	4878	1648	3546	5484	4620	3599	4977	5100	952	2307	4084	4425	4594	1918	267	5270	986	1929	5663	4229	2680	3636	3496	1978	4842	3464	4388
Row 11	4902	4554	2024	3219	835	2519	4650	898	1984	1601	2490	4858	3739	2996	5646	1184	2114	2551	5160	4211	2553	850	1579	4145	2075	5644	1146	5428	1202	3609	504	5039	2409	5560	1901	4442	1595	3262	411	4994	648	5257	945	4320	3929	1747	227	4856	3320
Row 12	3559	4648	3854	267	1435	4236	1303	1994	5150	621	1853	5173	2120	714	1013	4036	3973	3602	1909	1413	2654	4090	2087	5795	819	1696	4651	3302	3417	3727	2320	170	4964	3292	1396	4752	2585	4578	3555	2788	684	4579	5404	4916	1248	4095	5482	3077	5206
Row 13	5494	5224	2615	3111	3879	3686	1775	1569	5224	1312	5356	2403	1526	2483	3375	3397	1284	5050	225	4762	4279	576	4570	295	3645	3963	2560	4920	2981	1980	4485	596	4617	2939	2785	789	3503	3357	5309	4214	5880	1173	4351	3312	303	4788	3720	2104	3192
Row 14	5862	487	5748	5165	282	4884	2725	60	4471	2469	3019	31	321	210	3382	1053	2414	5233	2793	773	253	5636	5916	5291	5925	2803	3849	3935	3886	1511	2029	1277	1088	4288	68	630	5929	3334	5003	1428	5165	5184	5517	4891	4220	3036	3437	5442	702
Row 15	5044	258	1057	1801	4130	2417	3123	4200	1940	5264	5333	4888	3562	4132	1357	2686	3763	3866	4831	5486	1515	5927	2130	1140	783	3750	1069	3033	4366	3544	3768	4461	5763	715	789	1222	2024	5107	4923	5688	3924	3928	4087	268	3069	5974	1511	3735	5214
Row 16	5955	5680	2747	2366	4527	4430	3283	5285	4984	3059	1753	1005	868	1932	4347	3029	4256	1989	5547	3146	3199	2934	1642	3679	3827	4889	398	863	3978	491	4289	3130	5699	5652	1726	3561	3725	2593	1029	4541	1895	5172	5585	4561	874	2604	2893	2813	823
Row 17	2778	4910	70	4462	3940	1059	3695	1020	4500	932	4282	4662	3894	3397	3623	2989	3479	3	4972	2991	4660	3820	2225	4348	5184	4401	2712	1327	2432	4836	4698	3997	5572	773	305	4429	2112	3097	2275	532	4637	3617	5633	4778	1308	1267	3585	2807	2430
Row 18	1894	2832	2905	5588	415	5615	2515	28	100	3746	39	3918	3559	3181	3298	5135	1407	4395	1913	4689	5807	3257	828	803	5662	5514	3845	5142	4901	2369	5560	5811	951	5441	3181	4351	1837	3710	4024	4480	1052	5756	1662	2826	5187	5437	751	1734	4846
Row 19	4438	2894	2297	2052	1752	610	3320	2804	4775	1187	4336	5194	2621	1272	319	3489	4862	692	676	4138	5184	4451	3744	2684	5074	559	1110	974	5519	1488	2932	5553	5953	1208	5770	4867	972	1209	1518	1659	2186	682	2826	1937	5676	3059	2488	5215	3282
Row 20	4828	3579	5070	3447	3397	4119	5251	5614	4553	2181	2183	3641	1581	4153	5395	5942	1112	4950	2702	834	5192	1935	2337	277	2913	5398	5135	1993	433	3169	2493	4849	4938	57	3790	305	2276	4648	963	3757	5638	3361	2309	1032	1459	4629	1680	3584	5125
Row 21	3093	488	5428	648	1022	5306	5995	1420	2361	3686	1377	165	885	2287	1333	5526	3905	4492	1052	5744	2310	5495	4181	3595	4423	3606	4061	2979	4600	1041	5795	799	3114	2651	3662	479	3065	2104	1149	4563	870	594	5404	3107	2999	1753	1742	1149	1051
Row 22	3765	2134	5848	3463	5621	4586	3521	2082	5575	5354	3846	1248	1137	5769	3899	4672	5786	4300	5576	2859	3924	1499	4892	3952	3851	4136	340	2381	1747	3172	1942	2089	97	4103	1074	3245	3913	5237	5465	5915	1368	727	2827	3390	5167	4039	4096	2337	2109
Row 23	1578	2002	2263	3666	3173	3651	3753	3135	549	5313	5828	1306	2633	5308	4100	2910	4485	4214	343	5864	5991	4242	597	878	5557	4889	4586	872	1157	3471	1077	3892	4155	4143	5167	5755	5158	1189	4592	89	1824	3256	2530	1641	5192	2175	3556	5678	5413
Row 24	3026	5861	853	5152	3899	5487	2602	500	227	5345	5493	858	1426	274	5394	4729	2161	4440	1820	2268	399	157	5222	3861	2998	141	2156	3310	716	2585	1523	2279	788	620	2676	3854	1080	4697	3692	358	5571	3935	2523	5822	1989	5462	3867	409	5171
Row 25	3204	1658	2548	3761	1742	1731	614	5168	4078	4274	5106	470	2891	5290	1901	4841	5620	3794	5820	1521	349	2795	5765	3391	5536	7	5912	3374	1633	3798	1512	5087	3920	5852	114	2445	844	3413	531	2786	4366	5304	1423	1935	1714	4532	1487	422	3015
Row 26	3495	3949	5985	3119	1850	1023	433	4649	5469	3241	480	611	4236	5301	1196	3881	4076	10	1205	4342	1422	2433	4936	5567	4444	2044	2118	3772	23	3151	172	481	3439	1484	1841	4985	4230	1855	5895	4758	5467	1698	4554	1170	5124	2951	3799	1838	3848
Row 27	5318	702	119	3083	2557	1341	737	108	2501	956	2769	500	3510	5451	5661	3133	3396	1738	4487	820	5724	2694	206	2780	904	5066	2323	5146	257	607	365	5727	4781	3457	3141	2800	5471	328	1081	539	624	1030	5485	284	3456	450	3437	5374	1288
Row 28	2606	1903	1283	4016	3972	3090	892	1844	2019	1563	3662	3290	3777	933	1444	2780	2023	1633	3001	1622	4446	3066	2611	2923	1639	5867	1731	5786	4922	4314	5967	3309	788	2550	2518	3840	3430	3709	5201	4048	5797	3841	1147	218	251	4781	1021	1766	5515
Row 29	4004	4564	3234	1018	5914	3760	3136	28	2491	3721	1742	4063	787	2501	5531	5816	3520	3701	5622	1041	2299	3759	3904	4336	1774	5196	5967	4786	178	1558	1253	829	1524	2569	1233	2821	4165	4368	6000	5342	3493	3538	2089	490	2325	1421	5959	4084	63
Row 30	966	3330	824	2997	5175	2371	225	1799	25	2879	5665	4311	4534	1410	5944	467	5240	343	295	2788	246	4160	5233	3155	1905	2172	1862	1744	720	5027	105	4024	3190	5704	1804	1374	4059	3959	1420	2506	3558	4005	88	132	910	1718	1047	4869	989
Row 31	3828	1910	2439	1792	3974	1310	2415	120	3022	3671	754	4230	275	5744	3652	2282	2119	1406	194	3977	4120	948	2742	4030	3434	5000	2691	5049	1847	1991	2416	1646	1573	2337	2647	5654	2604	5720	5187	4822	667	1896	3815	2664	1770	144	4475	1493	590
Row 32	5029	5843	2918	1583	5128	2153	2762	4015	1255	4178	729	2656	2187	2759	1575	565	4741	2927	5539	3949	5491	2411	5245	3989	5542	1543	4530	5975	1727	114	2307	560	951	5627	469	4359	5348	1783	1007	280	3704	3512	5591	3649	2974	636	4024	4202	1575
Row 33	3965	4340	5369	4665	831	1763	2026	1929	826	1084	5241	3243	4378	291	3971	607	4881	5464	3625	693	3528	2519	5931	2813	4387	1018	4082	3408	5475	5136	4787	1518	463	5164	5721	336	1690	3097	5634	5512	1921	3556	3853	4938	1206	1722	573	1953	1901
Row 34	1417	2411	2971	944	538	1808	325	4398	3099	694	1038	4765	1643	5884	3374	1433	2079	1503	2780	728	1879	322	1985	1271	2401	3474	4151	3984	1193	4889	2769	2333	4209	1796	5242	1926	3865	683	319	2967	960	3616	2034	645	2304	1000	3372	5728	4705
Row 35	924	3526	582	3944	5787	1432	3404	5507	2029	1252	2132	585	1128	291	328	1922	657	4055	1769	5256	429	4667	463	4322	2273	266	5126	5871	1475	4733	2985	1810	338	2408	706	336	4865	5605	579	3084	184	5421	4114	2999	4583	5087	3256	2234	3239
Row 36	3257	3182	4744	2356	4531	839	1704	2000	1301	3438	76	2290	2890	5756	5257	1096	4102	4690	5166	4223	3539	1746	3976	1709	609	1631	104	3542	2065	2919	367	605	3450	2681	5905	4585	5380	866	4885	3914	3942	3227	1088	2824	989	2318	2076	405	5475
Row 37	685	4558	5446	3203	5534	9	5894	1248	577	5956	1361	5749	712	4656	269	474	2717	4816	929	5996	179	3976	1133	3408	3792	5495	981	4239	4898	2269	141	5462	5262	4880	1911	2893	2896	3243	4609	5163	2162	4974	3300	5127	4338	5712	5428	3936	5111
Row 38	3303	525	5457	2530	2518	2377	1485	1856	1378	5545	3033	3883	4641	3035	5873	3319	4657	1753	1698	1147	5169	5353	2621	2041	2298	1498	4421	718	3688	5135	762	3509	4998	2169	4262	3689	2404	3758	3131	2794	1104	3607	4637	3191	2429	1197	2170	4770	4449
Row 39	1382	2035	4473	2846	3229	2659	3826	4755	4734	2162	2974	3459	738	1451	4087	1386	932	3255	615	956	3688	1211	5242	4666	2772	5888	5735	4421	709	2757	1455	4252	3665	2633	1524	2488	2223	1276	1939	2475	869	689	4786	365	777	3703	1203	836	4901
Row 40	4543	3236	2896	390	968	3380	3026	3152	1653	706	3974	1544	2654	5676	1267	1248	3624	2800	5682	5651	744	2170	1895	708	2424	4013	1225	2991	1675	4081	4554	5018	570	5588	5769	2796	4663	5351	4968	4695	142	928	4767	3670	2548	3518	4130	378	2116
Row 41	1751	3028	778	4935	4113	1580	5604	5212	59	3480	1032	3840	2486	1404	804	3024	3105	2567	3282	3608	5079	3648	2365	1329	5436	5251	706	981	5968	4819	180	4553	6	920	2247	546	4038	928	3173	607	5869	5005	124	1400	401	3755	873	5736	843
Row 42	5354	5235	339	592	3354	1526	3699	5311	321	3996	482	3281	3012	5390	1055	3161	582	1515	1269	1407	3651	3937	3860	4427	5203	5607	5380	5291	1266	3890	3701	1159	3915	3123	5591	5199	5526	3953	1919	310	3668	4605	2216	5518	2679	5283	796	4810	1666
Row 43	2470	3288	139	3670	4914	5087	276	685	4880	4382	2440	2510	1253	5933	4663	688	3361	433	5928	826	5998	1112	3744	1588	2654	3346	3225	4158	4020	3043	156	5000	4724	116	1402	5324	1844	4532	1420	2148	3551	4672	783	60	2949	4622	16	5703	5020
Row 44	2099	5931	3701	325	846	4746	4391	5902	337	1624	1371	3560	118	3706	881	4817	2925	4652	834	1307	1265	2819	661	1163	929	5726	2066	5228	3707	2738	2226	2962	2739	590	4198	1028	2518	5638	1073	2792	1903	5989	5459	3044	4256	3145	3085	5445	1049
Row 45	3687	3973	1644	414	1060	5871	4017	4048	5867	4506	4650	5520	5061	67	2331	4125	5754	1974	600	205	2971	3653	3513	5808	1175	2785	5143	3729	444	216	1814	4664	302	188	2491	3280	4219	4404	4122	3752	2020	5895	608	627	3086	3302	475	3644	2505
Row 46	5279	3905	5624	265	4619	1934	568	2586	4305	3371	4791	3955	3012	1337	3883	4937	2236	923	4904	3533	955	2000	5088	2619	2168	1491	806	5082	596	1871	4350	3173	1510	1743	3258	3259	3829	2436	3916	3615	692	1562	3798	3356	5972	5055	388	1400	3203
Row 47	4589	5738	3728	4539	1100	4017	2832	2749	727	3081	4761	3749	2463	3489	3431	2616	2783	4083	2372	2564	2593	1657	5402	3329	1350	4594	3073	1436	1466	5562	2373	3225	1909	2892	3517	2684	2921	1614	663	5477	5711	2092	634	5146	2959	3864	3078	2335	1604
Row 48	656	5948	2780	1618	3057	4576	4105	4713	3647	447	3819	3455	1305	1065	3788	5749	4615	4109	2993	1363	924	4588	4885	1709	2896	432	1140	3111	4765	4270	4567	487	4750	3367	4318	4601	3529	5003	5255	5580	3123	4725	2823	2454	1780	3526	5234	5601	4829
Row 49	2355	662	2553	2467	310	5957	4467	1743	1134	3826	1115	3634	1429	761	4512	5990	3896	2189	2830	4348	4278	4779	4775	157	2294	4788	4820	541	5909	3323	4556	542	5720	312	1920	56	4600	4348	3603	4313	2402	845	2269	1304	1611	2039	2226	5418	1237

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.