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	2503	4051	3951	3082	3165	4640	4656	4950	2869	2235	1417	2176	4635	3113	1178	3182	275	1667	2695	3699	2540	4127	995	4371	4421	961	4658	2976	562	67	1365	1297	2197	3101	4449	1131	5695	64	36	2609	4013	1358	3456	3967	4862	1918	638	1288	1751
Row 1	5978	5676	4826	2571	5868	5219	367	5944	3572	4533	2933	410	1429	5123	337	1030	5909	1016	1507	3732	5330	3406	4817	3253	215	5641	1627	4539	847	5101	3406	4462	3112	2746	120	446	5965	536	3229	3945	1589	4328	3021	4865	2682	2585	4306	4968	5135
Row 2	2542	3318	2131	981	5878	3894	4005	5112	4403	5615	132	2879	2788	4532	4830	1823	3827	3666	4574	735	347	5099	4074	3200	338	1879	1233	511	5310	1280	5410	2989	1522	3393	618	2213	303	4464	5220	4681	3490	2142	4627	2138	2228	2488	288	197	4370
Row 3	604	4572	5468	1980	5005	5146	999	3117	2690	4108	2733	1016	374	3341	227	1217	1998	4252	3130	1070	3537	4358	2403	2511	5387	5950	2529	4578	5253	3104	3763	2673	2475	1880	4826	4248	5409	5691	3266	4400	2764	347	4432	4799	2749	140	5760	3538	5368
Row 4	5712	159	536	4861	1258	2661	2471	1292	4148	1177	346	3213	3632	4438	3206	2423	2022	65	4769	1115	1067	5774	1679	5573	3467	3674	5465	2728	2308	4793	1458	3655	4325	2446	4729	4823	2614	276	4383	727	2233	976	5841	1283	253	876	4694	5665	5651
Row 5	669	99	5197	3106	4693	4938	3502	3865	3620	4787	4809	3420	3444	355	5159	4208	517	2421	3240	3309	1825	4035	2767	4472	4254	2405	3579	5197	5428	2542	5376	3078	4697	4924	2156	380	4972	745	5589	4258	2966	2567	1006	5115	1984	677	830	5586	2881
Row 6	5847	1195	3765	695	3207	733	1969	2546	3191	1884	5759	5361	5385	5851	262	958	2409	991	3159	1570	2088	4563	3105	162	495	4964	5973	2060	1263	4800	653	3690	491	502	4618	911	1926	5866	5854	4674	1395	1910	4417	3075	2935	2671	4738	4333	849
Row 7	3986	3358	706	2702	2912	2091	2739	5038	3795	4152	1899	3671	3459	2923	865	5832	1154	403	3113	1498	3102	1248	5091	606	4878	5579	1708	1121	495	5378	4693	1136	1384	155	294	1152	5257	2239	2756	3681	4725	2588	5448	2417	594	5717	1656	46	4740
Row 8	988	478	1216	1442	3295	4916	5859	5692	4066	3545	2354	5151	1138	3752	2660	3948	3178	795	3333	754	4056	358	1111	4293	4898	1500	543	1784	3907	122	5915	2636	5765	3701	3140	1183	2509	1403	1097	4882	3502	4845	3921	3521	4836	2341	1241	2163	3268
Row 9	4385	4746	2631	5151	1034	3802	4647	152	3232	2373	1366	193	5336	1804	5918	4896	758	2279	3671	1298	252	3985	4130	5733	3634	753	3382	2966	3857	5614	4590	5806	3592	833	4670	3461	4210	5988	5855	573	4438	1974	915	569	968	5464	1514	3164	3280
Row 10	2629	775	931	519	4261	2074	171	2621	4765	5825	648	882	1616	4337	1200	172	308	584	4843	3236	5986	3655	655	568	1175	4907	4980	4500	4260	1009	781	5334	4152	2683	1977	3206	4701	2307	5523	5085	4532	3662	709	2340	2831	283	5703	2876	207
Row 11	5187	2240	1109	3111	2128	2815	3744	776	1257	5902	3089	3842	2156	1410	2393	5210	683	1291	4784	650	3396	358	1113	5793	4683	2800	5053	2186	847	3347	4970	2952	192	956	275	3023	4045	3100	1645	2859	256	4263	1755	4357	298	3244	4346	874	993
Row 12	3615	1782	605	3125	4091	4099	2210	1944	3514	5719	2051	4356	2960	4189	2003	1727	640	369	5600	4645	2578	3816	2664	511	4407	1589	521	3675	2866	4739	999	179	3523	2303	2950	331	3522	3788	4934	2262	5454	1124	5291	1879	382	2139	2532	3714	4263
Row 13	2271	727	3674	1848	1626	1160	2992	5046	4573	3829	1103	2633	1630	2790	3831	1673	1782	861	749	3569	4835	1329	3612	54	5043	5251	4896	1909	2594	3623	847	3280	2614	736	788	1213	932	399	2582	4885	5133	4544	1133	3739	427	3159	4577	2985	1825
Row 14	1218	5694	2285	2899	3066	2261	683	2957	4913	472	4512	1359	700	3825	558	2926	2043	2830	5375	5220	3448	1735	1318	1468	2790	2284	203	1320	4971	4960	2571	4159	1892	663	1810	1698	115	2442	5211	2031	3946	1051	5692	546	4741	1035	2313	4503	5414
Row 15	1934	1273	3874	1106	1584	5451	1051	4287	4116	3235	4570	5536	692	4251	1546	2188	631	2081	5628	5883	1391	4600	3618	5008	4627	260	4836	5189	3628	150	5832	5809	5389	2664	2542	1626	5682	3215	800	207	1561	3207	930	596	3206	1886	3568	807	628
Row 16	2230	1790	1711	1983	204	3744	1118	5351	2243	358	436	1136	4982	3729	5701	272	3399	3962	1765	314	2238	660	3486	5751	4942	198	194	1477	5565	2980	696	4243	843	1605	4463	1615	4876	1632	731	3752	471	2640	4095	4511	1961	3562	3959	2561	1193
Row 17	3936	4045	3980	3588	3538	4318	2302	2378	1112	191	3894	1621	2062	812	4316	3069	2649	3099	3619	2855	3788	155	3839	5802	4907	4587	3810	1343	5142	4235	3261	5664	5125	3736	5133	2721	65	944	4960	2523	5536	1562	5813	619	5297	5179	138	3355	4429
Row 18	4313	772	2632	2381	993	2830	1420	271	1474	1233	1406	3231	238	5853	4200	2080	1011	738	1480	5047	2469	379	3174	1225	3412	310	3332	3922	3295	5872	1310	3915	5563	1155	3213	5748	673	1512	2161	3972	5517	3086	4853	634	1174	1473	3451	4095	2816
Row 19	4962	3837	1987	3064	1398	4370	3895	394	5321	299	2262	4753	3546	1143	3162	713	5788	3934	141	2076	3368	2913	5906	3447	167	4022	735	2544	2612	1170	2533	114	4198	3900	3133	5716	4510	809	3902	1282	3211	5316	3535	4416	5264	1437	5229	4450	2320
Row 20	4692	5861	1263	5765	789	1273	442	4095	4095	2593	298	3111	83	1025	711	3846	3849	3142	2645	4695	442	3747	4261	2687	3740	5272	1668	4422	4604	1431	3870	2661	2266	1362	3220	5844	1286	1532	2098	5817	5342	1110	2670	3600	4604	4359	266	415	4373
Row 21	4098	5593	374	2723	3188	480	506	148	5610	2447	2985	1117	4541	5296	3283	3513	225	2726	1504	4887	5041	5841	5313	822	1223	440	2361	133	990	5767	5906	499	3899	5621	813	5551	5862	1131	4186	2959	4020	1088	3307	4043	4986	3614	4852	3662	3393
Row 22	762	4196	4963	2390	608	1515	26	1407	3385	3494	1763	4285	486	115	666	3314	4319	1452	5444	4602	1535	5374	687	2817	5573	2289	4865	4254	3553	3071	4658	5841	1983	5298	1749	5699	1976	5301	4294	5615	5337	3026	998	59	2488	669	5669	2009	1253
Row 23	721	4509	1133	1935	5071	107	2083	1320	2514	3878	1173	388	23	5270	4432	4463	3289	2887	805	1617	5031	812	2294	3007	3468	2949	4111	2423	4058	2823	3027	1404	639	4058	5893	5918	4081	4118	5385	2441	4830	3305	1453	5904	37	2760	3596	2868	1428
Row 24	4431	4043	70	741	1164	1417	1517	4707	1813	86	5862	3431	584	2088	4045	5799	5312	2664	3008	4932	3261	16	725	4439	4723	4312	1568	5050	2069	3400	4076	3555	2751	4744	1022	804	4591	3439	1039	5893	1778	4571	5499	5146	4029	4061	413	499	1819
Row 25	3934	5846	4487	1953	4564	2862	4864	1667	4050	1416	3232	5070	5917	258	5994	4116	775	1649	2685	1169	4777	4415	2659	3597	3935	1478	367	4477	1089	3229	1272	327	2176	3488	4231	336	1163	5562	1133	4105	5206	2054	974	1698	4944	214	2740	3399	3583
Row 26	302	659	4576	309	3605	5150	1176	87	4706	5086	970	2311	899	1734	2182	4522	617	3870	4712	2290	1036	4503	2777	3492	2690	3382	5161	2563	3250	2485	5411	553	2997	3054	5252	4188	9	3513	942	4487	651	5075	921	1446	3639	4011	5161	1734	225
Row 27	5340	2299	2486	59	548	888	1151	3413	3815	4177	3830	1398	1828	4027	107	3183	2557	2656	4795	4610	296	960	3458	2024	457	1024	4441	428	511	984	3420	3014	4650	414	4203	3622	3489	2313	4558	691	1486	68	1671	3230	2416	2404	4909	1549	2388
Row 28	5138	771	1157	24	4772	3689	5288	1051	43	84	2206	1158	3033	1417	2913	1946	5915	2845	5949	1308	4270	659	4017	3880	1880	370	3499	4410	4198	3887	2580	511	1871	1505	1279	3526	1639	3289	4291	1826	96	1588	4560	1916	3108	1274	3538	3074	554
Row 29	537	3438	234	5948	1127	1061	1233	2686	4334	146	1181	4373	1633	64	4346	4964	4271	4223	4466	344	1395	4735	2873	3903	1098	873	3178	893	5851	1278	2694	1094	817	1657	4251	2353	284	5859	852	146	2765	1071	5618	4404	5622	1438	3074	3775	4506
Row 30	5361	4732	2812	2941	4300	1821	5073	4399	86	5265	440	345	320	5274	261	5159	3048	1763	4038	1856	502	4743	5641	2649	2862	661	5279	3147	4168	631	4631	294	2763	5812	3298	2684	4430	3493	333	3997	5635	4197	1318	3715	2283	2823	3746	3323	426
Row 31	928	383	420	5774	1692	2635	406	1402	3471	1257	2912	5443	4056	3191	4556	2947	4663	5909	5182	5640	4959	920	1831	5901	3221	1703	2240	3359	1627	5954	2493	948	985	3800	1673	642	944	4217	5107	4088	687	5663	1806	4206	4053	5461	2354	3818	2758
Row 32	3934	4333	2148	1929	2581	2994	2631	3620	229	919	2171	991	3203	89	67	26	768	818	3593	3001	5317	5348	3531	331	1271	492	1080	4884	284	5378	1622	3489	5100	5022	2670	1467	2385	5495	2932	370	3581	893	1230	3397	5542	421	3100	2107	4844
Row 33	5238	3909	507	362	3991	787	2003	2619	5982	1483	5883	4756	151	1029	1154	3525	2844	3305	3199	5970	929	4917	5757	724	2762	5602	1060	2711	5414	5634	535	3357	1135	91	3250	2123	4810	4630	913	4093	4757	147	3337	2161	4925	852	3978	1787	1981
Row 34	5845	2680	4174	4480	4522	5593	2901	12	2779	3919	5730	3307	2243	3250	1771	910	1135	1505	5153	2917	1279	971	2207	5271	3622	4692	2954	3365	5365	2733	3390	834	1790	1974	3912	3821	4074	2031	291	218	3411	801	3729	5486	254	2511	5111	1338	3817
Row 35	4807	176	888	1102	3037	632	804	5702	2019	3665	3776	5924	3912	2774	3486	2479	651	5482	4021	933	4587	2878	2740	4357	3040	4274	5514	5334	4970	4341	4420	3812	5474	2717	258	5981	3752	4568	1749	5057	5939	5097	4663	2239	757	2158	1114	2013	102
Row 36	374	2803	3232	5264	569	806	3416	5448	4384	5836	409	4943	2998	741	2414	1463	4131	4634	1527	2539	4030	4007	2160	5309	3834	133	4393	2056	5626	5805	1398	684	5007	4180	531	4028	425	1047	349	5118	3619	1045	3661	4124	216	3943	5054	1710	1014
Row 37	387	3712	4084	5340	216	496	895	3003	3732	2190	2317	5397	5883	5647	4865	4324	561	5327	4520	4268	3994	3054	981	2057	2233	4042	5088	4198	3472	3632	1819	1889	1802	3193	3129	115	2119	965	2415	5610	4981	2622	4937	5550	3955	4034	2587	650	4908
Row 38	1484	2319	3082	3133	1741	3850	2496	3728	5301	4578	3405	4716	2844	1776	2466	1917	2674	494	724	1223	912	4645	4426	2126	4138	4183	3145	1634	5101	2616	4798	3759	1210	4957	2432	4641	2615	2067	5635	815	4348	3900	760	853	2418	1275	5389	4265	3282
Row 39	1658	382	814	4780	3779	1860	4681	5439	3556	2598	3531	5400	5955	3940	5892	1230	4933	4923	4105	3182	3877	3978	5149	5893	2310	1101	3221	4623	2572	869	3456	246	746	4620	3126	5654	3585	702	2622	5798	1809	2381	2768	5005	4504	5590	595	4815	1982
Row 40	2350	4297	60	2542	2514	2947	1527	1470	3621	1537	5578	4232	2261	3053	960	4956	1425	4678	4622	1654	905	840	4236	1108	2209	1010	2599	3928	136	4284	4269	215	2152	5291	3024	3656	4323	5756	69	1469	318	1793	4689	360	2897	2335	3600	1572	431
Row 41	632	916	1300	2188	3315	4103	2987	539	5930	4676	2799	2226	2952	2440	4266	5802	2364	4093	4526	3067	4414	4176	58	2102	1042	3222	5092	3620	2376	3629	525	5326	3463	2735	5349	4170	4822	1090	5083	2235	4628	2598	531	5191	1516	3688	497	825	999
Row 42	4041	1775	3271	1678	5596	5885	2330	1302	3226	5112	366	2691	2903	5021	1598	881	599	2241	4423	2028	18	5509	5712	2044	2205	5945	2328	3603	512	3229	2499	3112	1594	2627	3518	3076	5413	1028	4733	3483	3138	89	855	3372	3368	4283	4698	2818	972
Row 43	4289	3985	1491	4755	4048	5663	3044	5736	3382	363	143	5629	5810	1097	4537	4775	3808	524	34	3498	3016	5490	1522	1352	2155	4013	4823	540	1893	4004	2441	2627	3852	5748	5697	4074	385	2647	2546	953	5714	2680	1036	1182	4894	5273	1340	1611	2497
Row 44	4992	4513	1224	1547	143	3261	827	5038	1706	4285	5152	127	4752	4603	440	404	5074	5495	3707	2158	543	804	1169	3662	3356	3673	954	2104	3893	1234	2013	1476	5777	1530	1117	1369	2112	349	2782	1852	2082	5659	4308	3123	5761	3735	43	1698	2887
Row 45	3456	284	5710	5865	1941	634	2714	3550	404	2487	5132	3779	4002	1628	3267	4057	5020	5836	1272	2244	3304	5978	4477	999	5949	304	246	4750	2676	1760	2827	2638	4189	3322	4542	1861	3365	2695	1574	1461	1701	1733	2286	5980	3057	535	2086	1768	5506
Row 46	4864	2492	4790	4531	169	5635	3233	1828	2002	66	4885	4479	5316	4051	3520	979	5053	3685	2574	1788	5255	2556	155	4776	4880	438	2851	2787	2117	616	2731	1859	2576	1598	64	1437	1882	971	545	4429	1086	2553	175	3432	237	1080	4762	1118	3484
Row 47	5535	4283	3767	1810	2229	2661	2630	634	2503	4056	232	5434	2982	4662	312	5087	4092	3171	1714	4405	5187	4746	3011	5431	1745	810	96	4858	1747	1360	2764	5867	270	1399	3528	721	3731	4107	3284	5921	296	5837	2302	2682	2662	5091	4109	4200	473
Row 48	543	3702	1966	3384	5658	2925	5989	5173	3353	4080	4502	4351	1488	4560	3040	719	4453	788	5731	736	2832	5345	3730	5826	4480	1776	5855	4979	4511	4297	3996	42	5576	5190	3614	4088	243	2843	2541	5542	4271	1740	1161	3608	333	2126	2829	1479	1838
Row 49	4780	1608	1134	5799	698	5297	4135	3989	5130	1685	1981	2722	2247	5997	1675	5371	2850	386	3150	3987	425	306	4445	4813	5372	4306	3260	1783	5030	922	4198	2319	5062	2262	724	947	3463	2507	5435	187	1824	797	1781	3434	2263	5695	2162	976	4128

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.