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	471	500	2702	5670	4078	5738	844	3477	2684	863	2278	3144	2151	3086	351	2395	5886	432	2224	565	3164	3539	931	4433	4957	4899	2256	5520	985	382	1955	1456	881	4656	1125	4958	4394	1969	2435	1078	2831	4713	4221	4982	1798	4571	1377	1683	5002
Row 1	3601	2248	2166	1139	3179	598	95	2078	2853	5615	3062	3234	1570	4517	4114	225	5642	3072	4619	1611	5507	5696	4441	4219	3916	3423	17	2486	4800	1700	1488	2400	3947	3653	3538	1126	4250	3632	3203	1103	3247	264	4337	4816	4781	2450	5041	4422	5522
Row 2	3659	32	5028	3354	4473	3247	1270	1896	3263	3756	695	4963	5243	3094	2910	2896	631	4035	1146	4263	1237	2248	1509	1501	584	324	281	3034	5364	4702	2556	3023	4734	1584	376	3206	4830	1645	5101	2093	5400	5796	1056	4643	2889	3965	1538	3520	1999
Row 3	2683	1782	3236	4931	3291	4736	5514	3615	5016	2548	2979	3718	5103	1	2452	686	377	5657	5516	2022	4758	1609	1422	4553	2664	64	1442	628	1602	4961	2627	4284	743	5862	3215	4033	4598	2729	1648	3614	5276	4626	1331	4379	4627	3783	5065	5003	3439
Row 4	4581	1024	2197	189	2445	750	2853	2509	2192	3480	4110	1152	107	2394	1895	5969	5608	5928	4566	2336	1575	2179	1612	201	3510	5991	4827	1292	5055	3829	4731	3635	4853	928	3824	1298	1677	676	3807	3868	4156	1917	5020	4262	4311	914	4230	3918	841
Row 5	2796	254	2416	4975	1866	2616	2484	1856	1443	3776	911	5272	2507	4546	4124	3434	2369	5422	5110	3044	3228	2978	1200	5145	1997	5462	3455	2911	3691	1373	3752	487	1626	167	5461	3492	2783	1945	5348	4225	5720	258	3496	2227	4803	1620	5660	1171	1041
Row 6	4769	4215	4269	1747	5415	3413	3744	4876	868	654	2567	2240	4405	3053	3866	4572	2514	1357	1354	4458	704	5578	4178	962	3074	404	5764	4693	63	935	5734	4832	5150	4002	579	4564	1415	4322	3439	2282	4975	5	4521	3380	3058	2386	1951	5571	3743
Row 7	3305	4028	4447	2883	2206	5408	5956	2610	5172	4648	2672	106	4381	1504	5255	2383	2082	3819	3797	403	1258	79	5378	1262	4600	2757	4320	985	4708	3890	4728	2013	1918	3174	4895	4123	2581	4850	732	1752	3498	3404	1858	1878	4908	1113	4261	989	4931
Row 8	2058	1392	189	2136	769	1450	735	3526	5770	1720	2234	3659	447	4246	5577	3621	3140	3700	201	1990	4432	1953	5488	1835	3811	1365	743	4923	5626	1731	3854	1683	3123	4042	3818	3891	5492	4553	1417	5261	272	3651	2920	718	1896	2496	4339	5036	196
Row 9	4539	1026	4627	492	513	462	4303	1878	1204	3225	1503	2934	1079	3185	56	5121	1003	3947	4613	5555	5364	3874	5826	3014	794	544	4910	3289	4882	3945	3484	3421	4970	2111	3913	5483	2572	2215	1360	3775	5440	2863	709	519	47	765	5639	1049	4712
Row 10	4251	604	4075	2125	429	1088	2918	973	5997	207	5855	3942	3691	3275	2912	5801	1188	2394	2372	3402	3754	146	2841	616	855	3359	663	1619	2998	1712	330	1249	2315	4405	3373	2744	5493	290	3716	5489	497	3571	3431	4187	845	342	3987	2032	2736
Row 11	358	5434	489	504	2275	1105	1359	5633	1767	2977	2631	3478	3307	3879	5793	1711	1252	2536	1203	1542	252	692	2038	3822	4123	224	4667	4464	4211	698	1200	4569	132	1689	5072	2406	2793	430	2038	4560	3407	4669	2038	713	2547	1830	2424	3798	4365
Row 12	3627	5340	4616	4318	1377	2437	2440	1601	1103	904	5811	1801	2104	4379	1932	3792	3451	4337	585	3881	375	5145	1287	5043	1182	2000	1590	3011	4424	5388	1375	2050	4727	5991	368	104	2428	2808	1704	3530	3711	1514	5331	5814	5892	1263	3606	3342	5600
Row 13	4191	1222	5975	3335	2509	5018	4516	4509	607	1526	2932	5995	2900	4982	4721	2890	5349	4825	5317	2156	528	2847	5867	2041	2178	5681	1933	3440	3286	5275	3040	1476	497	3014	4811	3005	2031	3326	1514	2637	4851	4446	2632	1751	3427	1353	4641	2775	177
Row 14	3958	4931	704	805	4797	2745	2982	4477	4677	422	1762	3951	3461	3238	4448	474	2048	1453	2505	5374	2966	5142	4225	1411	1773	5975	4837	3125	4616	1612	3301	2573	542	4005	3377	5338	749	358	3814	5426	780	5576	3377	4240	2814	1824	4714	4861	3276
Row 15	1219	4235	242	360	2459	1652	2132	2434	489	5257	1049	2100	2557	3621	2642	561	997	1979	1310	1355	5793	735	2134	5368	4111	374	2181	5934	5088	1042	3210	306	5276	3451	665	1735	5103	2797	4168	5591	2053	5216	1690	4610	2836	4331	5171	3833	310
Row 16	480	5187	102	1215	1320	5470	5325	1694	1650	5259	781	2692	2468	1087	1968	5919	1751	3702	5021	4547	1869	4611	600	1084	301	5209	3920	4632	4379	1752	4942	4859	938	5043	73	2258	4512	5398	3952	162	4656	4732	2853	1124	5819	4821	1043	1569	2522
Row 17	63	116	4391	4674	716	5475	4975	5924	3394	3606	4303	5145	2548	3162	83	1590	3234	2341	102	2632	292	264	1288	5024	3117	2411	4842	1937	3454	411	4459	3516	527	2849	2190	1242	2323	1164	1166	5716	4770	5468	4861	1317	2630	4944	2906	5864	1285
Row 18	3008	2495	1576	3272	3782	600	388	193	5442	2324	3646	5852	782	1162	379	3631	3351	1620	5953	4514	2785	5669	3283	2253	4529	4599	4883	3473	1505	4746	4757	4513	1240	333	1784	5022	932	2172	5214	374	4495	2859	226	5277	4020	604	2907	1371	2224
Row 19	2860	5884	5008	2528	3167	1261	1057	1766	143	4529	3271	4889	3286	1784	128	3618	3567	5150	4550	5738	4363	4924	4233	1222	5149	3510	5242	5752	417	612	1976	3276	496	984	5804	3663	2244	860	5428	2387	5389	2699	1275	2675	4482	1403	292	2049	552
Row 20	4842	1786	4915	3765	19	136	2913	3528	5377	2665	3945	5989	4640	1220	485	5623	1024	4147	1867	1884	3575	4254	1272	273	5529	3947	4755	931	4238	803	1483	3080	2589	398	844	2607	533	3757	135	5910	422	4079	5899	5062	5299	383	4685	323	4529
Row 21	551	2206	2104	4805	3478	2377	4333	1424	1131	5264	5662	1934	747	2741	4522	1144	3585	1129	1676	1342	1263	1586	1763	5342	1484	824	4641	1866	5508	4963	395	59	1168	2499	4864	4645	4875	3196	68	5	2459	5730	1939	3206	2470	460	4349	55	1588
Row 22	25	1396	2851	1610	3158	2192	3094	3982	833	4959	3490	5795	5354	3549	962	1852	2412	5607	727	5608	5675	732	2067	5404	2670	5272	1874	3129	3620	1928	4717	3644	3323	1567	5253	481	3759	2346	4463	4591	1305	1953	4386	659	5501	5348	2511	1913	4954
Row 23	3237	1520	4629	3968	3586	4032	637	2857	5906	3766	476	1833	2482	4120	5156	4049	3373	5637	1807	5719	4099	398	1023	51	4783	1682	5552	4130	4192	1464	3084	1429	2983	1712	5397	568	5744	33	3424	5649	3799	3900	1482	280	2020	637	4328	5392	273
Row 24	135	5110	4372	532	133	4422	5315	1814	3973	3445	6	5436	528	1435	2419	2239	831	2986	1983	864	410	1631	4662	4310	3112	4942	329	3749	3270	5720	4021	3404	4830	2393	3936	4962	814	3251	776	4787	695	782	4223	1222	2216	641	3461	3046	3627
Row 25	5443	3910	4037	1074	2571	2347	4186	1512	2675	1934	4782	2395	5955	2185	1224	2347	121	185	3161	3371	961	1948	4066	1742	170	5287	3957	811	2748	1003	4438	2191	4912	2475	3264	1483	4821	1450	2994	1495	3383	1776	3889	3338	3960	5113	5684	4081	5298
Row 26	2845	1452	258	4792	5517	1999	4962	4804	5956	5773	1552	958	4211	3742	5870	685	1006	1352	5505	2455	4346	999	5838	121	4888	3175	4081	4001	2859	2161	3298	5703	3613	3555	4495	3130	5554	3457	1934	5509	3230	3485	467	1440	1226	336	2124	2232	1688
Row 27	1629	4686	33	2628	4523	154	1515	1698	4234	5515	4556	395	2813	4258	4008	367	2753	1137	5920	210	3070	5429	3439	554	5895	4878	1780	231	1002	4011	1919	2630	2697	1951	5257	1220	2105	772	2917	338	287	1472	733	3099	5730	4740	3466	2483	5876
Row 28	3385	2692	2945	2814	130	3499	2709	5008	5278	2939	9	3289	4858	2639	5985	808	1896	1204	2913	2668	4121	3250	2954	5592	3982	52	5322	2721	3517	1804	2597	902	4495	5542	3715	4624	3040	424	3631	2318	3362	3640	5606	2219	279	5591	3027	2174	795
Row 29	5939	4841	4915	3189	1795	4507	1171	1847	3828	3892	5364	5631	488	265	4125	29	3980	2749	3069	4403	380	5387	1765	4019	4992	3984	4297	4583	1011	471	5378	950	5312	4292	4139	1106	2798	5309	2952	626	3200	2315	256	3688	2580	4381	3717	560	1129
Row 30	785	4963	1508	171	728	5527	5163	4712	3824	3746	5723	4294	3123	673	3606	1415	4811	4711	4213	4119	1663	4838	1319	3978	5093	5006	558	3474	2723	1118	4602	3507	81	110	3678	808	5636	2840	5520	3459	586	5242	1753	3708	5915	5359	5122	4725	4070
Row 31	3334	2844	5733	2171	4162	3710	1264	3168	4268	4737	5890	5386	3339	3397	5466	3449	1074	274	3084	3914	5793	543	4499	5035	2296	2207	4949	1654	1328	3674	5723	4662	517	5455	833	4679	3165	2097	1847	1433	834	1737	818	4172	5133	283	1620	207	557
Row 32	4704	4121	350	5247	2619	5385	1542	4825	4333	3196	153	2007	2919	4815	2523	2374	5647	1202	5539	1743	3048	971	2576	4785	1789	748	3918	2072	2368	4124	2628	1072	2244	2977	318	4863	2361	1860	3688	694	5056	3841	2700	1975	2655	5223	4348	2301	424
Row 33	3887	4044	3472	4858	620	2257	646	1367	174	2717	3735	4297	5345	4806	541	2321	5124	5404	4681	983	3092	5375	39	932	2075	2013	3586	1297	361	5887	1721	4247	3931	5193	3105	4550	1449	3750	5917	1622	467	3651	5919	5811	2457	460	2132	1580	5863
Row 34	813	2563	2954	187	2601	3885	2261	4614	1471	3558	4974	1358	5279	3221	5288	4471	325	3837	5919	4075	3754	1541	4542	1404	1459	4353	3860	1918	484	5439	1781	1296	2002	4734	1483	4602	2619	3744	3215	4090	1301	2189	5447	579	5409	4735	5050	5733	2572
Row 35	4969	3808	325	509	2349	1728	1968	701	5588	3886	1185	5027	5666	2480	1028	4400	3963	5629	1019	1707	2844	5108	3007	5032	4555	3586	4441	3289	2636	4174	5860	1604	1981	184	2113	4330	1912	4080	5030	1499	1966	214	526	1632	2694	1553	32	657	1182
Row 36	1050	2363	4025	158	5370	3057	4712	2955	1497	2001	5591	5670	1860	1194	1651	2044	3306	5980	3956	1386	5009	5454	3352	5223	5979	4983	1917	1532	5015	2573	2713	64	4935	738	222	4305	3794	4933	1260	5291	933	850	4961	2793	2043	611	4836	5349	590
Row 37	2791	735	5599	2245	4087	4821	2224	3069	738	3756	2084	3310	468	2147	2245	1205	2368	550	4999	1301	1809	4290	2234	2658	3250	5026	4701	3860	3862	4050	4450	653	4785	4048	2897	2871	2869	5121	5940	3606	2876	2023	916	3344	4169	3161	4549	537	3710
Row 38	3547	1838	5519	1837	4071	2176	5086	3096	877	2946	958	4926	1395	1610	3710	5442	4507	580	2311	3627	519	5916	503	2541	832	3846	710	3992	2395	1247	1702	5942	3084	1220	1778	1155	3396	863	4251	4272	3809	5208	3198	5203	817	907	4645	5323	1487
Row 39	955	2950	2006	870	3453	4547	1701	1298	5257	5693	3693	503	1395	3634	3587	2614	5411	4741	9	274	2991	4281	4082	2198	1478	3284	3015	2385	1928	2337	3871	2882	5286	5877	3752	2738	4423	5453	4036	3679	5145	1729	4182	539	5362	1768	3153	4772	509
Row 40	3162	5045	3500	1442	3126	5698	2919	410	2712	5303	2337	5049	3174	5219	4335	3050	2970	1073	1473	2422	5109	5151	1567	837	3332	2106	198	5100	5258	4970	5609	2419	4014	3109	3861	1140	2807	779	1549	5518	82	3886	4567	3256	3105	2901	306	74	3974
Row 41	1778	2496	3082	928	4062	3918	4260	168	4116	3360	5425	3085	2969	1844	1099	77	5704	2239	2883	483	3788	2401	564	1674	967	3820	4778	3868	4125	4852	1841	5902	1347	4923	830	5409	2840	5090	5576	956	2449	5001	4041	5417	845	5140	5494	548	1378
Row 42	2376	1031	5166	4777	1595	839	5744	5414	5616	3611	3538	4467	5452	3439	5814	4374	4269	5222	1213	3358	4798	2169	5806	3799	210	5223	4643	5349	4716	5190	726	1092	220	5891	5869	1814	730	5612	1228	345	3222	4765	4812	2673	2204	4625	1046	472	3846
Row 43	2259	3829	2644	4428	3635	442	4637	2858	5084	3985	1574	4274	4711	2666	4494	4602	2534	308	5331	2145	1535	5676	5367	299	4487	2040	2503	3111	3085	2975	957	5344	804	3600	3771	4438	4041	2408	1295	3125	392	2868	1398	5103	5533	5891	3704	2067	198
Row 44	3035	4211	1733	2710	3577	2032	1196	5616	4534	4307	2701	1508	5263	2045	2311	2862	5816	749	903	2223	2044	4027	2615	4912	5424	1718	4445	5315	5421	511	5513	2456	4722	1245	5165	2299	3276	361	1915	1810	4667	4615	3318	3929	660	5629	791	475	377
Row 45	1693	2698	2420	5719	5312	1332	5143	1029	5776	4458	450	286	3970	2906	5008	5215	2070	1306	2491	2431	3220	4300	1098	1835	1618	5026	2494	1246	5817	2969	1622	1509	5666	4042	1228	4978	5373	371	7	5149	4828	457	5435	2798	3362	4442	2013	5432	5747
Row 46	4503	1862	2966	2803	2959	4800	4420	1985	1294	5666	1801	4262	1287	3310	3927	5329	4538	2905	4702	4909	2911	3850	3737	3367	3284	534	728	1725	2547	160	1471	1050	2022	4437	3852	4981	3237	2272	965	4530	1938	2766	2792	3224	76	718	2553	4614	3623
Row 47	1254	3522	533	5103	1258	3900	2387	1791	4628	4111	4338	4787	5582	5387	808	4018	3239	5788	1255	5511	753	5784	1448	3519	2575	4672	3595	3293	1224	2208	915	2478	5729	1448	1581	986	5347	3967	2777	3974	2078	1114	2760	1659	501	3568	5677	3739	3356
Row 48	931	3249	4108	715	4697	1627	3290	3368	5221	583	4592	1428	1497	1069	1156	2945	2650	2141	2291	617	4918	264	2694	31	3024	4353	531	592	4029	4270	3947	4960	1518	2055	5675	215	3681	2964	3582	2901	3546	2173	4328	5043	3242	5484	1987	5892	1624
Row 49	4278	508	541	4542	3201	572	1565	1553	1103	2157	5582	5372	103	4542	890	2157	4216	1104	5837	1180	4685	2738	4726	858	1066	3768	4100	549	5755	3991	2172	4032	4498	2713	2574	1699	3285	4139	3252	4387	295	2834	3758	397	1375	4647	2554	5591	5750

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.