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	4973	2776	5275	2967	2996	1114	3798	3455	4491	1474	2453	2138	3812	838	4468	2929	2894	2314	3108	3286	4392	3802	428	2944	980	4285	1273	4454	3206	5730	1012	2178	2505	286	5144	5501	1400	2941	2955	5890	4414	5408	2028	2226	245	495	5154	3139	2809
Row 1	2261	424	1201	63	852	4145	1042	5136	5418	5496	2341	5147	508	4518	1652	793	3661	1152	2192	602	4106	2082	5015	3514	4109	1241	3758	4604	395	897	1413	2656	1321	2614	2718	2172	759	3760	1307	176	3256	3647	5322	3763	2164	973	4555	5825	2125
Row 2	747	426	231	2829	5441	3744	937	681	1502	5541	1076	2399	954	3731	3719	3567	448	5890	4325	4208	1196	4501	1463	4843	3823	5225	1007	4795	3780	831	920	4526	1257	1150	1354	698	4894	2291	1379	395	1832	2454	2793	2786	184	512	353	632	401
Row 3	4678	4839	1597	3178	301	439	1000	5526	1446	5795	3305	2276	714	1831	3533	1864	3185	4230	757	5475	5608	1152	1307	2062	3945	4092	2245	4456	4444	2876	4856	3121	1714	453	299	2015	892	1298	1540	2337	1092	4845	4613	1806	675	2145	3669	3859	375
Row 4	4426	3334	5983	5577	4640	2044	3522	2732	4288	1977	1176	1164	833	4296	2878	1285	4594	4893	2176	5892	433	4513	984	5277	3125	2789	5951	5269	458	3809	5644	4883	1143	5626	4460	5783	1670	1981	2514	5958	3957	3689	1121	4790	1985	3999	75	579	2891
Row 5	2250	471	3323	763	1454	2599	3887	4242	2550	3156	4699	359	2799	3581	1501	2425	2040	1283	4094	4021	3797	4052	1977	1486	5173	767	3471	3171	841	4049	62	3091	4519	3384	3853	5972	5983	1739	4214	2533	4894	2912	2891	1693	493	4392	4117	2533	5675
Row 6	2211	553	3471	262	2530	4956	5434	3296	2427	2604	4137	475	2666	1227	4994	49	5079	4966	32	818	3180	2564	5711	92	5454	1403	584	3845	5520	3117	3519	1730	3670	990	1992	199	5946	1425	3495	2372	4029	1631	2847	694	2858	1841	743	1936	806
Row 7	774	2754	3986	3337	2464	4077	2791	3867	4660	636	3386	1777	4154	5116	5446	5144	1107	5645	5089	2531	3139	1461	560	4770	4307	1253	1628	147	1995	3564	953	2769	317	4939	105	2780	3015	2895	647	1674	3530	4032	3451	1684	3148	2896	828	4254	2540
Row 8	5917	785	5679	1377	1344	4449	5684	2596	76	5831	4591	3639	784	1359	3955	5722	1464	735	2736	4359	1381	4410	1889	5413	1860	3573	2560	4755	4400	813	1295	4317	1597	973	5693	2941	5421	5377	5536	5496	5207	4127	3135	5990	5486	1089	5711	949	1824
Row 9	2447	5308	3204	856	1196	2616	2715	4769	5176	1470	3169	5988	2764	1485	1585	3737	1178	4525	3157	554	4061	2653	5760	2188	5787	5750	1673	876	5461	2622	2699	1907	1930	5902	2762	3125	2518	5477	1894	1693	947	5062	1681	3710	546	3266	1446	1723	1791
Row 10	4603	2276	5851	1255	2036	2039	1042	1785	3712	1917	1245	333	4615	3151	2263	4517	5913	5388	1034	5390	1281	2727	336	342	4407	4046	887	1673	5492	2610	3463	4094	4885	3314	5349	920	5352	390	2705	3063	2306	3950	3396	921	1101	5658	5437	1013	5045
Row 11	470	403	326	3196	738	667	1603	4784	1554	3276	4275	4163	738	2369	3048	4051	1717	3968	3403	2107	672	465	4413	4621	3861	5333	5721	3519	4769	734	2563	5239	1136	2888	2435	1874	3555	4038	658	5108	1313	4932	3270	2050	1301	317	101	3018	4284
Row 12	3503	5124	4956	3968	3536	3577	1829	2868	3297	5347	1637	4031	1909	875	5167	4797	3309	1041	2351	1346	1698	1459	2658	630	4729	4708	1931	5046	4809	4948	3330	2312	4071	2285	279	1607	5861	2107	4475	3158	1453	112	1189	3362	986	355	2159	4295	1396
Row 13	4510	5640	3093	5968	2298	3723	4696	1006	5653	3741	5814	4601	1070	2125	2671	3355	2404	4278	3216	4511	2753	373	5964	2864	1561	3325	3849	1916	5483	2143	3311	3993	1783	404	3960	4081	4127	2656	5087	3779	397	4900	2379	1467	1025	5050	4821	3429	3328
Row 14	2037	1939	80	2409	1902	2943	3970	5227	792	5886	4709	2935	3197	2702	4718	3601	661	2799	1727	3316	1885	5506	3713	785	1885	5179	1809	935	4000	5237	4262	36	1176	4342	2444	3077	1285	414	2303	2076	300	1012	5011	3496	3713	3729	1096	4374	527
Row 15	2823	1690	2411	2328	5402	3196	4212	4580	5005	5146	2579	4242	3408	2615	5417	1749	5059	2494	3033	5472	4796	5109	5772	5808	4120	3268	3521	1848	4363	1894	2375	1185	3583	4786	3512	2985	1981	1724	1565	985	870	4144	5226	4277	758	4643	25	5816	1136
Row 16	3058	5288	5932	2167	5059	5739	286	2326	3259	2134	689	5153	4508	1874	2736	3293	5386	5720	5273	1109	1285	258	1978	5428	5484	254	185	4126	279	6000	5261	3337	5288	5192	5503	4346	4931	5789	672	2190	1922	1360	1343	429	3233	4078	3722	2619	3798
Row 17	2995	3727	5082	3253	5705	4509	2736	5959	4694	861	238	4694	122	3574	3981	5314	3076	2327	4244	2865	2998	434	4786	4358	1776	5215	1591	5853	2936	4209	3651	5931	1936	2732	3183	1640	1241	5918	1598	5934	779	1835	4628	900	5409	2609	213	2484	4935
Row 18	4457	5349	1933	4890	4134	291	665	3349	1881	518	284	90	4168	215	2025	900	3397	3665	2141	3315	5262	2075	4093	1097	702	4992	505	3310	5205	2989	2245	3662	2337	4177	2551	471	4467	3216	3819	348	3734	4103	438	1902	4317	2462	2802	1714	126
Row 19	4942	5028	5388	1016	3120	485	1718	2112	990	5027	1316	3979	1272	4977	315	5448	1528	786	3915	4744	4604	4263	2477	2707	4700	4379	1023	1161	1180	2736	1287	122	1763	675	1137	4883	1160	2854	994	2149	1881	2310	127	3152	1287	442	2600	2815	1228
Row 20	515	1558	5831	4777	4035	2537	3476	2413	3560	4637	3593	296	5924	3714	2058	598	4851	940	1758	1705	1934	3907	3586	4243	4033	738	5530	4475	3337	2344	5702	3851	3901	5533	2627	1936	2070	103	4349	5629	4739	1941	5925	4662	5655	1982	5260	4506	2922
Row 21	1018	210	4856	4924	3795	3098	2956	4532	2627	1431	1869	4970	1133	5719	2871	665	2346	4806	2735	2449	3154	2364	1187	5095	2288	5849	4750	4270	5109	3255	1191	126	3464	47	5049	1259	3144	2004	5790	5771	3435	1659	4741	4567	1378	1612	5232	3723	418
Row 22	1966	171	3571	4329	1358	2666	616	1206	1415	4885	315	4669	76	440	2132	122	5488	3391	3266	1492	3180	3037	4926	4839	1777	3493	216	3389	2724	3938	3806	4689	4109	1377	3017	5467	4042	3632	673	5456	2517	987	4125	2592	1426	257	2713	913	3647
Row 23	5979	2404	827	3015	1330	5665	4792	4822	5880	2180	1545	3818	5986	234	1927	1362	3250	1393	5403	882	2065	4859	3398	3051	2983	5990	4476	3239	2703	5389	885	2681	1793	1711	5696	3122	1376	4487	1944	1255	667	3489	5072	652	3722	998	2013	972	2391
Row 24	1416	1854	4455	274	5252	1506	3256	5241	5981	495	1944	5370	1379	4625	1162	3090	4320	4284	4465	2806	228	5720	3473	3716	4791	4124	1438	5789	136	2410	2179	1551	4263	634	1825	3514	2139	5081	2755	2120	5575	4699	1489	954	3323	2651	4043	1643	935
Row 25	2508	4448	1162	2227	1921	4877	1018	44	315	807	180	2724	2985	1731	987	3619	3555	4501	5757	2635	1256	1876	2210	5954	3365	3163	3277	16	1206	4919	950	3713	3367	2111	5940	5287	988	957	5331	1303	1763	5510	4026	4748	1240	5013	2366	4794	3513
Row 26	2123	1429	4769	3998	3638	4722	1363	800	1999	1378	2006	917	2328	5718	4284	4438	5658	3571	5426	615	2901	728	2378	2410	4753	1125	3649	3766	3491	2443	1278	5613	3872	46	3611	1509	4768	4974	2309	767	352	4314	1684	2679	4032	5967	1116	3690	3537
Row 27	541	4304	437	1268	681	2847	21	1806	496	3786	5297	2938	5064	4909	810	5110	2520	2319	3878	1493	4627	4644	1845	2941	327	4523	973	293	5638	4663	3830	179	2966	4267	1447	3647	1113	1467	5453	1608	5253	4749	4546	4316	3658	5355	3425	178	1674
Row 28	1302	1670	301	5946	3515	3241	272	2037	4214	564	1674	2877	4394	1853	5842	2660	3299	3489	3772	4766	2941	5380	4018	1690	3926	2334	5347	3281	5759	5524	4954	1061	1194	5254	1006	4708	2495	1277	744	709	1841	2418	3585	234	4271	3427	2893	1569	915
Row 29	665	335	3856	44	4352	5545	3970	685	4892	1250	443	4416	203	1503	5609	5457	2508	4317	1951	3785	5061	2660	5625	1479	244	5858	5749	3670	2751	1318	4585	3415	1652	2441	3459	4	1985	1428	688	877	2678	1131	5292	2881	2634	4901	2337	5142	3217
Row 30	4288	2926	2278	947	2551	3756	1191	2408	3505	4860	5159	4823	3445	2573	474	5885	32	478	1870	1460	1165	2746	4137	2296	2037	1018	4929	938	3355	4070	4155	1642	996	432	2589	3546	4188	3779	5954	1692	2639	5112	514	83	1685	988	5968	1717	1465
Row 31	1837	3176	2630	4582	1313	4926	619	2330	3855	1557	5684	1924	5711	1326	2920	142	3914	466	4329	1693	419	21	4331	5531	535	4414	1216	1523	4381	2932	2987	218	108	5617	4800	1421	4543	5418	3751	2397	975	3435	4321	685	4760	1240	827	2674	1705
Row 32	5155	4366	2124	5176	2697	1655	5710	1110	2870	1232	5491	5802	4219	5708	5909	3836	4507	1330	2378	3925	5080	4774	4899	2514	3094	5584	1273	4334	410	3947	38	5565	2312	2162	4740	5009	3816	4449	119	686	5681	5609	487	3900	5317	396	1735	3823	1725
Row 33	4112	1748	805	2886	647	3318	5979	230	4590	4312	639	2537	4350	203	4848	512	4943	3857	4328	3392	3975	5013	3072	3584	5500	971	2900	5896	2706	723	1621	818	2470	2425	3703	3116	5742	3682	3346	4332	1994	3984	868	344	4187	5716	855	3129	3573
Row 34	5183	520	1547	4196	3592	5130	3695	4563	2030	3591	1268	2752	5212	2085	5221	1636	5787	2337	1378	3468	5682	5710	5461	3666	578	5804	1852	294	659	4981	3866	5841	5501	5412	4036	3092	4542	1731	1655	571	5322	2922	3322	4533	5006	2543	168	4793	4880
Row 35	1546	2261	4561	1255	1722	2227	1832	1526	4079	2125	2184	3059	5991	2025	2560	5402	60	5652	3944	1791	1306	4514	1112	4227	1836	5644	3233	4379	5812	2025	3258	1357	4286	1819	2612	7	4045	4444	1533	2124	569	3716	5183	559	5741	1742	5961	5801	1393
Row 36	3904	1591	2698	2418	2703	925	4254	2346	4157	2632	2158	182	5890	3515	4467	1708	126	4474	5753	4570	6	1877	5138	3722	1059	5696	3462	2801	5657	3262	4193	3560	4853	891	5978	1555	1815	4231	3901	5972	862	58	153	752	3572	4620	2459	3698	3094
Row 37	2212	2267	3100	4088	1405	822	5147	1101	4284	1947	757	1545	140	4316	398	1030	4293	1953	2845	2523	5853	2816	3385	5910	2969	4136	3482	1589	595	1180	4683	2807	3446	1782	895	4850	2604	41	5951	887	1988	707	2432	2127	5022	2829	3156	3315	4781
Row 38	1	5838	4634	2816	3223	4544	5785	1358	2025	1374	1953	3205	56	4759	650	1838	5653	5500	4441	5694	5450	5327	1681	156	1758	3807	5178	4587	963	2493	3367	963	2330	2001	3779	5552	544	3563	910	2569	4936	2862	5773	4992	1621	422	829	1274	5922
Row 39	5270	967	5372	4596	2648	5528	354	454	4706	4940	1417	1198	2307	2379	3527	4307	157	3079	4850	3720	3988	1418	2656	850	1190	1647	2470	1612	2476	3743	1534	1745	4709	905	341	1357	432	694	1810	5137	5633	3227	335	1940	5605	3861	246	5762	940
Row 40	5095	3482	4927	513	137	5776	1702	1784	2246	3314	4259	5988	4847	4	4697	5751	344	53	183	1038	1863	5320	671	5089	5654	2610	4693	3515	2855	4455	4454	1950	1936	3381	2462	2073	3156	4164	3856	5401	1477	2114	5389	323	2118	4085	74	2461	4138
Row 41	257	3499	6000	5576	4169	5088	5230	778	3781	2744	3633	2236	1198	5582	4171	4578	2044	244	1734	208	4099	1135	1684	213	523	2007	2330	4608	2081	4791	2745	2337	2289	2745	1913	458	1832	1143	1236	5613	3887	4868	1849	5084	4450	20	3662	494	263
Row 42	5395	701	4361	530	2385	4573	1052	4392	902	5660	472	5693	2404	2809	1982	5148	4722	2439	980	5865	3674	593	3751	2541	2441	2835	991	2460	496	1484	2723	5891	2185	1083	420	4569	5655	1472	2961	557	1131	3433	250	3535	242	2231	2683	4964	4669
Row 43	3663	4828	2343	4255	2578	4883	696	5413	5874	3156	5908	1358	5878	5799	3542	960	218	2111	615	1690	5071	1172	2820	2503	1422	355	2744	3652	3037	1707	2321	699	535	4663	4954	3113	3546	5650	2525	3419	2805	2433	4777	2683	2231	2318	3643	2449	4429
Row 44	4257	4138	3499	5429	958	2	850	1312	2746	4502	4348	4453	822	5047	4987	5485	4000	2099	3030	3649	4624	449	454	1056	5225	3136	3286	1543	778	5735	5971	5035	3872	3470	4464	4829	3471	5314	141	217	3815	4488	4669	4637	3535	3656	4121	1535	5755
Row 45	1151	5183	4378	1599	5637	5433	824	2772	2719	2366	3550	2453	2336	2584	325	5805	1048	5153	3276	361	5293	3492	4175	3781	2161	2812	1315	5816	933	2849	5570	2083	2032	3948	3682	1669	3381	4505	4441	99	871	1990	2552	3206	4574	2876	3011	5621	2029
Row 46	286	5981	1322	3778	4156	5103	5938	968	418	5753	1900	3267	5323	3983	5299	3270	1665	967	650	170	5407	749	1040	1396	3300	4246	5970	176	1256	5590	2205	1542	5571	3527	5319	3727	2629	5256	4694	3046	5009	594	312	4331	4576	5611	1601	241	577
Row 47	2250	410	5983	2999	1450	1379	299	5695	1348	475	951	938	2679	2492	509	205	1811	4235	2833	1066	2928	5879	75	3521	191	4405	2097	5801	5	2338	378	2255	2748	360	5254	4197	1739	5552	3892	3086	26	4842	4024	2704	1334	4532	2909	3144	2766
Row 48	5742	4210	5694	5621	4284	3215	5811	2689	5312	5612	2694	1649	5989	4948	4396	349	4202	2593	2087	3753	484	5173	3779	5326	3196	482	659	1727	3391	3803	4493	3132	2012	4186	2752	296	1400	2563	2984	712	2175	5678	2360	2163	4626	756	2512	2827	3349
Row 49	4598	579	3832	3770	4357	3158	966	4839	3817	2693	2230	1619	1185	5361	3631	5371	2113	3927	770	4676	910	1482	850	588	3841	3013	5213	4597	5524	2039	1945	4121	2618	5777	1891	974	2934	2856	5813	750	5548	2042	2369	733	1403	5999	103	3515	3925

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.