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	5700	659	5724	4699	2503	1792	3931	186	2041	3595	4602	85	716	4481	5021	4954	2297	3967	2762	5691	2057	4405	2741	2339	2606	4927	2658	5478	960	1888	5715	1801	5372	1837	4927	398	1065	3408	5473	3167	2346	439	3815	2070	1372	5717	5065	135	187
Row 1	592	3492	4402	1411	4729	3563	5093	5351	3862	2972	573	3237	5785	1968	1729	3185	1117	2499	1408	2849	2471	5812	1778	2767	4219	57	461	3262	2315	4952	1954	1840	4274	3935	769	3587	4833	1630	1440	3834	4661	1867	764	4903	3356	4328	5074	1700	5919
Row 2	4978	5959	2593	1384	647	2339	5657	429	3287	4459	4921	242	3816	1321	3313	5461	1184	4417	4435	4982	1162	396	3280	196	5470	3738	5354	4980	1594	5142	3890	4320	122	4795	4895	4416	1762	1873	2869	2070	3583	1488	5900	2546	3496	5821	555	2860	4095
Row 3	456	4057	2807	4459	2857	2130	53	5036	378	4959	3967	370	5805	2214	5811	2416	4426	1536	4295	5725	1932	5456	4331	2118	5685	3616	4993	5421	5845	987	3788	3539	2142	5958	3464	5682	1001	4072	146	3056	1799	2866	4	5106	4609	5042	2756	907	4044
Row 4	1271	5904	2214	5434	433	5551	4117	1264	5145	5016	5594	769	4549	4095	3230	4338	4790	1710	2759	5976	2783	4875	2740	3415	3005	5526	2551	5342	5079	5626	3820	4776	3177	434	5495	1548	4761	7	2132	4837	1191	830	286	2351	3973	2296	597	2735	284
Row 5	5692	3653	3310	1189	2238	5425	4973	2165	4099	3029	199	2443	4339	5283	2221	3251	4732	4627	1618	5461	5617	3476	5259	5591	4280	791	1155	1120	4415	4791	5658	2044	3300	3455	3038	2580	4573	3331	5214	3032	5666	2917	73	733	5512	3836	4015	3911	1157
Row 6	4257	4246	3270	5671	2899	1237	814	2231	875	5178	3494	5808	4857	1234	5005	1714	4490	3538	5449	4901	824	3383	1475	413	4622	3185	2735	3097	1040	2253	1011	3241	4570	1228	1664	5788	3590	3060	76	2346	3747	1038	4859	4378	5843	4917	5712	1856	4601
Row 7	2800	1777	5433	5411	5944	2991	26	1867	3608	4370	4182	832	104	3461	1222	1879	3968	4173	539	1006	3699	677	5133	3418	5705	2640	4995	3589	2469	3656	576	3621	5859	5594	4712	4522	4548	292	1102	3055	5066	4995	1677	2585	2898	985	5179	1962	5141
Row 8	2547	921	2083	3362	5018	2156	2206	2077	3525	1133	3314	4376	3500	3920	4454	149	3206	3876	5813	4721	3304	5485	609	2493	739	2575	2574	4415	3932	165	4377	1784	4555	4345	541	4018	4057	840	3358	4333	373	757	3534	178	5180	4734	5461	2278	619
Row 9	1699	175	297	365	2570	215	4424	4084	5928	3865	5832	4609	1211	1437	1183	5451	638	5731	3239	5895	4190	1841	5600	112	3219	5075	1620	3232	2329	3171	5108	2956	72	381	2108	5995	1469	3741	2270	1053	1720	2607	1671	4099	511	966	2514	2265	1058
Row 10	5005	2394	4969	5957	3602	1684	4636	1889	4086	1443	1409	3707	4421	24	3937	1800	4418	492	5839	4210	5797	3129	5115	4231	5509	4141	28	4349	1647	169	4222	2711	654	555	1642	3587	5363	5669	3988	2066	3272	4834	456	3894	1193	5666	4999	5473	3959
Row 11	3154	4399	5235	1335	1140	5300	4248	2665	5284	2131	2166	605	435	4399	728	2937	4477	4992	2286	5944	2052	4288	1642	5546	4294	862	2158	2022	1985	4760	3235	2257	3910	890	384	4528	2037	1496	4600	337	744	4238	2269	2394	3002	4216	1862	3763	3723
Row 12	5651	4046	673	4411	669	500	3258	2411	1601	2143	830	4546	3583	1801	1816	720	3302	5134	4836	3136	3711	2099	4485	568	4742	5368	5423	4457	3358	1953	5686	2477	1419	4222	3605	4831	260	2993	1361	2179	5087	5847	1896	402	1018	594	5061	5222	1025
Row 13	3102	4281	4304	3390	4769	4131	5818	3394	1918	2316	37	4325	222	4210	3624	1672	1173	3341	1127	3947	2355	5984	120	2947	1619	1866	2693	5778	595	4255	1328	717	5344	911	2660	1462	840	3884	2167	4491	5223	292	658	5995	440	29	3674	2598	3291
Row 14	4611	3967	4566	5013	424	5053	2981	2409	747	3803	3279	316	745	387	833	2863	5797	462	5229	3628	4247	733	3833	5922	4696	341	2395	1302	2288	1624	726	1977	1754	1179	1568	3143	2265	4401	4302	3311	1070	2767	4677	982	5545	767	3272	4005	5932
Row 15	918	499	5395	4952	2720	5736	4235	1587	4163	1881	4320	4063	1928	3767	2404	1616	462	4639	2126	4268	1595	4065	4144	1906	4929	479	3668	3550	1604	3233	4389	5968	1754	4631	2218	1735	4158	3186	2167	1978	3952	3185	3139	3349	16	3532	1534	977	5396
Row 16	3267	3655	1524	1032	5693	2087	2999	5679	368	4150	1650	4085	3595	1567	4095	1259	4781	3633	4542	721	2201	591	1874	4595	1367	1471	4629	4586	2988	4099	5401	2007	3215	1625	1047	1252	761	642	4774	3554	2490	1968	4843	1762	5981	1582	4751	575	5017
Row 17	1556	3661	3786	4293	1421	5166	5880	2437	4406	5037	4470	1961	1559	2393	3684	2531	4736	533	5890	5736	4358	1167	4552	4366	2434	4037	1594	1304	5971	1351	1411	5246	438	1253	5060	2670	2286	1499	3599	1932	4334	2989	2950	1220	445	4488	4995	4158	1360
Row 18	4895	3561	1276	1617	3613	1992	655	5911	2647	4639	256	4862	6	1402	3716	2858	994	1106	1338	3173	2427	3975	5990	2996	3101	5560	4942	2536	2369	3383	3890	606	4890	5716	2035	2510	5169	5730	3243	5054	1328	5848	160	428	5192	5080	4300	3226	2242
Row 19	2837	2559	1400	5876	1487	2433	2081	3490	614	4194	3640	1427	5299	4434	1782	3267	1104	4044	4165	2116	5380	1709	1962	227	4998	2027	1160	748	1319	1899	3036	5062	2107	5891	2537	4664	998	1011	4362	2441	3883	4411	3530	4182	2047	5634	615	4941	2439
Row 20	1411	4047	3286	2686	2029	1109	2678	3984	5181	351	3537	2625	4967	2357	2924	1621	3407	2167	1930	5178	1231	239	2459	2408	2226	4888	422	184	276	4765	268	2388	3563	2627	1051	2162	240	1872	3374	5339	5441	5366	1367	977	3486	5714	1838	1451	2894
Row 21	4822	2090	3634	3091	1756	466	4900	2076	1079	3538	4342	5661	2530	742	1152	4032	5664	1871	3814	3279	2255	25	3115	3472	5501	1351	1362	2248	2314	481	2014	4394	4900	4288	1140	977	5005	2250	5833	4952	3557	2156	1369	3502	3439	4211	2687	5029	547
Row 22	4019	3257	4841	4243	5871	5512	2398	1939	500	3294	5835	4420	4959	2656	5985	3653	40	1194	376	1054	3928	3926	2454	871	2435	3008	4357	1568	4108	2576	11	364	1907	2052	3956	5829	5555	5946	4324	2026	2322	3810	2649	3880	3306	2262	2576	1178	3201
Row 23	2409	2576	2940	5219	3128	2380	3548	4886	67	576	1161	3843	4054	2032	4785	1763	1130	5656	995	5538	5868	927	5693	5052	2194	4979	3938	225	4563	1654	3324	3543	2223	3434	399	2805	1649	1664	1550	5266	3482	5125	1480	2744	4713	4225	4909	3401	4447
Row 24	493	1145	1624	3475	696	243	5354	3731	4358	4319	2029	4210	5714	1951	5536	3152	2540	724	5629	3137	5188	2826	2657	1727	213	3553	512	421	2277	1070	549	2521	1082	2271	4529	5063	5651	1422	5744	3010	467	3532	328	4684	3541	2116	461	4612	209
Row 25	2969	3294	5000	1461	5473	4439	5410	4307	628	5786	5926	4790	4676	1322	993	2598	2655	2504	3858	2895	86	2431	1773	3488	5221	3493	1054	4722	2639	3292	1802	1449	2678	5261	4257	993	4828	1964	3769	4459	182	66	3575	459	5975	2243	451	4123	5162
Row 26	106	2539	2405	4657	1584	2351	3417	4692	3044	1810	1857	2377	5861	5056	2819	4966	424	2718	977	814	5108	4573	4569	3218	128	183	1440	908	5501	4699	222	2189	3914	1728	5079	5306	3056	3899	4535	5416	441	182	4037	2034	3344	996	1595	2101	3312
Row 27	4005	824	2143	57	4844	2868	328	5051	2437	3173	964	5800	4586	2692	4294	1805	1174	688	3028	294	5913	3327	472	5588	3142	2673	4842	5950	1867	4865	2392	5115	3355	3788	3427	3444	2862	2098	44	4547	2549	5474	95	4125	851	2530	1763	547	4020
Row 28	4015	5749	4704	2645	3791	151	1813	3481	887	5454	4592	1641	4337	4376	2482	3531	4075	5887	426	2660	841	3329	1392	5450	5855	3367	441	1406	2718	2864	2013	2805	1692	1259	1433	5872	3360	2779	642	1795	5634	2310	4801	2185	1980	2277	2327	2668	1439
Row 29	4121	166	1471	1854	1301	4544	5050	4052	5440	3933	4129	2661	1663	1934	3743	3923	4582	1248	1279	3493	245	2696	1801	533	4780	3053	1126	742	5486	4246	3042	1931	2358	3519	644	3731	3483	3066	255	625	3070	728	4452	103	4500	4564	4838	1634	1913
Row 30	227	317	5914	870	4544	1491	4425	359	5558	1963	5594	2190	1368	2886	2038	3265	4375	766	3830	5787	2896	4783	4533	3800	1190	1992	3140	4737	4599	3529	2900	4821	502	5647	3891	5520	5842	928	1771	1956	3772	5143	3314	4857	5661	439	1387	3139	1769
Row 31	4074	4528	5642	3840	4631	1279	4025	5288	1939	1482	4202	2389	970	1064	1330	5022	447	117	1624	1255	3815	1910	1034	5663	1642	1828	2378	860	4955	5295	896	784	4194	5230	1591	5757	3728	130	4854	5253	4038	3311	4968	1754	1676	2398	4598	5460	2630
Row 32	1740	2068	2156	1015	1977	2178	1412	5837	1749	1136	3673	56	1485	5004	716	1900	3795	5912	5715	530	1150	873	1106	2826	1246	2366	5311	2351	3172	5614	4973	3625	5207	3020	4959	148	3378	3770	4793	814	2077	5305	1143	2144	4867	5989	1018	5589	3690
Row 33	5393	5439	3793	2425	1079	803	3532	4979	2740	2047	4634	3395	4004	1192	4277	3447	3349	258	2619	696	4930	4004	68	802	3382	4358	1894	3809	652	1645	3934	4372	1794	1339	955	3177	4478	5408	2577	905	4684	3746	3707	1887	4748	5358	3025	5918	3573
Row 34	4957	3017	1160	2449	1996	964	3453	4802	1564	4626	3915	5121	2046	5443	3748	1263	2847	591	4442	3448	2560	1815	5621	3424	724	4699	270	5237	3717	4177	1436	1910	2466	4258	4077	4795	218	3544	4887	1690	51	991	4823	3925	1464	4625	280	5785	2616
Row 35	5507	2821	3572	4022	2366	4655	5345	5405	4005	3347	560	1370	2813	3671	2400	4969	3029	4531	4011	5272	4853	4423	5935	1003	1197	351	5746	1019	1774	2069	276	3024	3214	3705	3007	3213	48	225	2148	3446	1046	2098	2300	2854	5162	1828	274	4044	5399
Row 36	437	1733	2432	2029	1237	96	1436	5677	2946	313	2092	779	4206	164	2546	1315	2346	1376	2463	1307	3372	1020	4962	5124	1013	3608	4244	3377	3076	4588	2263	615	1626	1268	1957	2198	1927	1401	5519	1449	5450	5873	5231	3495	5969	1855	4110	1246	3544
Row 37	5151	1087	1307	4476	3495	447	3217	5630	1262	3671	5267	2674	4807	5175	4803	7	2126	1	4993	3574	1006	763	1893	4209	2819	3081	82	2158	1200	1390	5478	3901	2442	1082	533	3509	1798	3575	5846	2629	2140	361	237	1733	4936	4587	3275	4874	5042
Row 38	3649	3185	4216	4503	5375	1643	4222	124	5894	1726	4052	969	4820	728	4045	5869	4033	5408	5951	3006	5104	5448	1095	1413	153	5399	1036	3846	364	2012	5729	2009	2752	5070	5565	2456	3240	5246	2311	2200	153	1276	216	1747	5124	2798	2389	226	1410
Row 39	867	3319	99	5771	2365	173	5357	1557	2153	4999	2408	5340	4601	2241	4471	4810	5924	2171	5385	2253	2844	5507	338	4119	377	4494	1526	5151	3073	4789	1305	108	1691	87	1220	4540	2008	1998	2458	40	1826	4477	3585	5501	1134	4791	4158	1057	1614
Row 40	5472	1941	3915	5622	993	3558	1755	3567	4399	2720	4746	1795	483	1983	2462	5981	1847	1372	126	1719	4112	1794	3412	77	5265	1493	2712	2389	2081	5489	4794	205	3589	4370	2251	1919	462	1734	1293	2728	5008	5558	4623	3181	1433	12	2879	5096	407
Row 41	4756	1418	957	757	1101	3672	2742	3144	3503	3405	1916	5146	2276	1709	2775	3369	4679	213	4883	1703	806	188	1602	3982	899	3417	1563	4760	1810	2896	3226	678	2757	4189	2366	4073	1906	5853	3772	3953	4410	4995	4144	280	5652	5491	2891	4097	2200
Row 42	349	235	1046	3261	5624	4357	19	736	102	5158	760	5247	1104	1596	2766	1805	2825	5134	3170	2599	5097	4069	3006	2065	4983	4493	2542	5350	902	2786	32	3531	4239	2829	2896	3395	2412	5377	5097	3997	4286	3164	4221	5870	2370	1529	3146	829	5920
Row 43	4418	3820	3889	253	1932	4619	5153	251	985	2632	2312	1585	1940	2896	1983	2546	336	5343	142	4782	4811	2009	5219	4504	1899	5023	5689	3972	2303	5865	3258	4666	2626	662	4084	4358	2623	5756	4792	2462	4724	4644	4106	3335	4570	1634	2415	5254	4777
Row 44	1483	1696	5177	859	5443	5448	1178	945	2930	1912	1656	4995	2113	3898	3992	474	3068	5580	5324	496	1261	4255	1960	563	5483	3502	5423	1383	57	4079	900	4139	4115	3766	2195	780	1743	3744	4219	4872	864	2013	2042	101	2674	4284	1885	5243	215
Row 45	3556	4110	587	3472	2180	3980	5033	1339	5019	3427	5499	5079	2583	2032	4539	755	4239	328	287	1738	4969	339	4127	2828	2811	2105	632	1952	2253	2038	4357	4211	575	934	3718	1280	1965	1245	2217	4231	5046	4550	835	4213	3852	2334	2583	2696	3483
Row 46	412	2626	3420	5923	856	1262	3337	949	5837	2594	3786	1708	194	2258	2810	5185	649	5367	4163	4436	1315	4068	3672	3236	5613	2790	1797	4216	2408	5	1085	4921	2457	1504	2931	1078	907	5342	1508	4275	2307	5536	5642	4612	2022	5015	3482	1434	529
Row 47	647	4483	3261	3897	4994	2711	594	3542	1884	4293	4948	4713	2067	4205	5116	312	5530	679	5235	3061	1141	3846	433	327	5120	3722	5870	3956	4758	697	4131	990	5878	2170	3069	4708	2068	1207	1945	3991	4424	3147	4674	3465	1568	4981	5138	2557	1019
Row 48	5891	5161	3153	1938	1336	4300	332	1299	4682	2333	2649	693	1179	1322	39	4196	4382	2285	5805	1428	3438	3109	2503	3252	4844	3491	2133	4422	784	1160	1465	245	3710	4552	4856	5734	5980	1202	3574	4196	1789	4559	3700	4695	4518	4567	5577	5222	1465
Row 49	4374	2259	5660	1664	1126	1737	4006	4899	3751	4578	5235	1899	2133	3044	3055	3676	2365	1421	1509	2588	3087	542	3744	4830	669	1193	4312	840	3069	3311	3626	225	1906	3392	644	2874	3327	676	3247	4073	364	2916	1021	2630	2541	4421	3656	2928	1451

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.