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	2059	3971	3652	5229	2376	4301	4147	3570	3354	220	653	2788	560	5490	3755	5840	1940	1370	5504	878	4801	4168	1996	4769	839	3539	4417	5545	4240	356	2646	4082	766	3548	2591	3445	1389	1376	2491	1042	4905	4790	5659	1289	2839	36	4060	2116	4806
Row 1	2545	949	2130	1371	5965	4789	1481	4527	839	1227	5284	2748	1507	2890	2024	889	868	443	2733	804	4903	3102	3875	1633	2031	2526	3119	4012	4220	3666	5314	1018	2839	2141	5190	2387	3439	1664	3716	1871	3580	4057	4396	3455	1548	3116	1331	3043	481
Row 2	827	1011	2461	5540	1171	5420	4673	2388	3511	596	4381	5886	3248	2306	2510	2842	2653	1407	193	2580	2555	3683	2980	652	1094	1896	1233	4971	3906	258	26	92	1859	4565	2128	134	2813	5239	1117	5326	2597	5665	5533	224	3459	5151	2563	2569	3448
Row 3	4310	1200	1824	994	1764	2838	286	1170	3116	3879	2341	169	3195	170	1161	4926	2709	5136	2498	1521	2180	5382	3363	5347	734	5310	3810	1344	2980	3572	4038	4948	3761	2317	5702	1631	4108	2133	5653	4726	4198	3911	5503	4657	1993	1278	5061	5091	5651
Row 4	4316	2339	1775	2516	1602	1604	3675	4110	3158	2306	1708	1306	3466	3126	2720	354	2009	1792	5389	1686	2340	3868	3878	4987	825	614	648	392	5305	2526	394	1349	1812	3954	2444	1745	5875	3159	1146	4398	3453	5810	420	1962	4328	4813	4648	3335	2070
Row 5	4878	3971	4813	5624	3579	3075	1664	4865	3918	546	516	2372	1008	4400	3750	3845	2524	4252	4163	4235	1726	439	2864	4511	5645	5591	3547	4646	4580	4613	3820	2246	359	3170	1787	5062	4607	1020	2374	2453	348	27	4598	2041	5270	4784	5544	2688	4818
Row 6	4806	2787	5457	4803	3668	453	5258	5722	1521	528	4235	2672	2919	1257	534	4506	4792	4028	2748	2687	5191	4343	4890	3548	3025	1554	4121	3355	5534	3791	4878	3999	565	3979	4624	2509	625	2077	3385	5267	4210	389	936	5188	448	1476	827	5213	329
Row 7	4163	34	4032	660	4655	4177	4369	2829	1286	5038	2835	4424	176	4167	385	5471	1774	1974	3403	2475	4573	2489	3492	3414	940	3778	640	2225	1320	5111	659	819	86	2003	3993	4877	1167	2218	3299	1257	4462	4777	5042	4359	6000	4731	1525	1461	3113
Row 8	5537	2722	5092	919	2533	1352	3490	5010	4061	1660	1605	2395	3767	3349	4209	4015	344	305	2849	2331	2821	3682	3183	2988	4593	4993	1749	1644	5818	5360	4915	4090	3693	2865	3018	923	2893	779	2502	1847	2884	5700	1024	2157	825	5782	2547	5257	4155
Row 9	4591	2145	2995	709	5827	2159	5971	249	378	3836	5045	1350	371	1082	1507	1208	833	4541	1086	1483	606	1432	4376	11	3496	3457	1297	1084	3666	2718	5939	5416	2121	1712	2258	4736	2617	4094	3695	976	2774	4289	3345	1827	2166	1774	1600	5028	3219
Row 10	5672	3886	3247	5175	3104	625	2541	5344	5517	3318	5225	1382	4307	5535	123	2774	2297	4256	5227	3219	3395	3708	2964	5325	340	4175	1100	4223	2782	2946	1990	1983	2121	201	5971	5647	3988	4879	5435	2471	4231	2924	5997	3603	3156	5275	197	2988	1436
Row 11	1803	5694	4256	2935	846	5832	2233	4242	118	4308	1204	4995	410	275	306	2998	1659	3090	2751	1004	2370	3192	4478	664	4934	1798	4954	4109	3661	5025	314	2302	1822	3427	1240	2846	4299	4036	4365	2203	3490	3172	1760	5061	1317	3339	1108	1511	4931
Row 12	5493	306	1664	4146	4829	2457	1609	4532	1739	4490	2650	51	3323	5906	4090	3981	5941	3511	754	4873	2364	3785	3297	750	3326	3919	5009	5423	2809	175	1972	914	3160	3277	4362	4732	1534	1855	4129	5246	472	17	3378	2336	3847	1997	3387	3644	1912
Row 13	4910	558	3208	3175	2289	2849	2132	2757	5111	3624	2600	2521	3641	3186	785	3646	4955	3408	4265	113	610	3536	2970	3473	2902	1844	1149	3291	2347	3458	2373	4110	5692	4014	3740	840	2665	4328	5733	4919	5678	2794	4004	1933	1436	518	5486	3599	1773
Row 14	5334	4860	3836	4715	4490	1165	5711	5627	1143	2698	4925	774	891	5415	2934	775	5186	2371	472	4360	3439	17	1268	3558	2002	1183	5283	435	1579	409	4328	1089	3238	606	5812	4434	60	3273	1077	2310	2696	4862	3966	5009	4816	5710	5289	4425	2352
Row 15	5090	3720	1551	536	3167	1408	311	824	1917	932	4433	434	983	4089	1307	4805	3358	815	48	5456	2803	2974	3286	6	4980	5376	4805	3130	1234	5961	3353	2025	5138	5075	199	4586	4172	568	163	848	3608	2948	1982	3194	5557	5746	508	4662	4704
Row 16	38	4613	4122	2695	1206	5283	3673	3054	2642	2776	3456	336	3081	260	1545	4340	3032	2309	3249	2681	1774	445	3933	101	4712	3083	5652	4103	2384	2126	3200	2847	1334	3008	5218	3887	1897	5745	4664	987	4224	1150	1093	4372	3289	1204	1559	1205	3866
Row 17	2264	4579	3354	1288	800	2797	2860	3259	1619	314	5662	1985	1453	4239	3475	2223	665	1184	3646	4914	4342	1163	5337	4397	5847	3873	2189	1505	4039	776	5779	2064	3879	4049	5968	5207	1433	4902	5597	3283	509	3702	3436	3249	621	4720	755	3057	5234
Row 18	5478	5957	3987	4913	5517	486	5493	4905	2397	2453	4658	148	5214	3600	4712	2663	2336	333	2790	1886	4134	3660	1143	4181	2654	3961	5728	3923	4334	1675	5065	1252	2850	206	2722	519	3248	1645	4768	2749	4819	5831	3055	2347	5599	5261	799	729	2882
Row 19	3699	1731	2580	2539	5040	1818	1486	4076	4642	389	409	1760	5133	4288	1141	5599	263	1806	595	1871	4843	3583	171	4434	160	869	4034	4498	751	3752	3255	4387	979	3500	4868	2643	4026	3121	1095	1339	3908	5161	3787	1875	2030	473	4141	3061	2054
Row 20	4079	3948	151	3326	999	1137	1417	3363	2236	3801	3795	933	2219	4605	4076	4121	3495	172	3822	425	441	1651	5389	3721	2392	564	5232	4367	3312	870	1340	3441	5199	4180	5228	3221	91	3718	4117	2130	2199	1054	4031	4936	2643	4680	4014	3915	2011
Row 21	4678	3476	1665	1899	1051	2907	443	5207	2566	3604	518	935	3172	4723	2104	4938	4643	5552	4139	4166	1202	1307	3941	42	5245	79	5010	3063	1218	4917	1667	3699	986	3360	2528	2180	2738	726	2720	1053	605	4718	3174	5262	5723	514	1003	3107	1958
Row 22	3298	1370	1638	3749	414	1098	1294	851	4439	2070	811	3073	3885	3649	5648	4862	814	5894	5728	838	3828	4892	1408	3650	259	5130	3881	4738	5106	2450	3731	2772	3416	424	935	1401	533	3691	2166	52	922	4257	3193	2156	1671	4865	5418	2540	2321
Row 23	2115	1794	5713	5090	4802	79	2104	4252	764	5234	4552	5103	1414	5721	1612	2163	4794	5458	711	3803	5018	4713	1210	2165	1465	3137	2920	2895	2200	2510	4042	4266	1129	2881	5425	1825	2348	3741	3096	2008	3090	4584	5880	4667	204	2263	4208	2247	2958
Row 24	2413	1373	2451	3182	5754	3884	3495	785	3093	2377	3197	669	1808	5564	5698	1598	712	5248	611	4456	132	5932	4032	776	4257	1658	3355	6	1266	5582	1454	5814	5192	5074	3402	3133	4624	5610	5915	230	426	200	1505	4568	4933	2102	5308	2821	315
Row 25	2690	3828	4155	4662	2152	555	2185	5552	4756	2737	1180	2383	5908	5504	342	2232	64	200	156	1332	2090	1297	3638	303	3234	285	5681	1024	169	5563	5196	4323	1245	2415	4482	4234	347	3525	3992	5306	3296	603	4442	5674	4694	586	1527	4097	3015
Row 26	2027	3733	4844	4586	4036	3002	1835	3142	2065	5337	4541	5946	396	764	3722	5889	2451	929	944	1566	5393	4241	1914	2951	448	1664	4278	4847	3203	3401	957	3414	4947	4764	2561	1054	1927	1804	4126	5775	2431	1576	3794	4946	3178	3636	251	5118	2593
Row 27	897	650	1003	4026	1707	5911	2142	3753	1028	2951	546	157	5241	5434	1315	4479	1171	4146	4418	4370	320	5714	2821	2634	312	5106	5705	4665	4181	3831	744	5916	2591	2418	3195	779	2822	1695	354	1367	5372	892	2937	327	3673	1199	5432	3244	3032
Row 28	4098	5810	4742	132	4718	2155	4960	322	3191	1308	5441	1098	3872	3148	4975	3604	1276	3714	348	2971	3850	1154	5252	5932	3355	1369	5901	4041	609	203	274	3701	147	5928	2549	4738	1320	77	3734	3208	3950	257	4735	1986	3750	627	534	3801	125
Row 29	1311	5271	4468	5943	3400	201	715	5453	5614	2967	5429	4758	517	5484	4546	2096	1038	4836	317	4623	5638	395	4329	9	482	864	2090	3229	5465	439	3531	3569	5159	2301	318	4965	4765	4511	778	3803	367	234	5716	394	5722	1776	2122	679	5024
Row 30	1802	1376	1827	4859	2660	4322	1244	4439	2115	4168	4402	1099	1309	4018	1869	4556	1438	5028	2959	3800	110	2316	3019	5471	4121	4833	4254	4846	4887	1918	2599	5373	3945	5752	2349	4997	2925	28	3558	772	5214	2700	4524	5443	624	5496	739	1031	5863
Row 31	1836	1587	5308	4992	1561	4942	732	1554	4863	4244	5877	4612	4496	2577	3492	2064	5460	3535	4571	4818	958	4007	349	429	2990	4709	3277	2242	4025	4592	1341	4905	3176	4267	903	964	3876	4682	2798	4447	462	2463	1448	966	5893	4052	1339	981	3369
Row 32	3711	3358	546	4580	2700	4409	2916	4475	5539	3172	5593	5851	1379	1967	2780	5764	1763	3249	777	4695	2259	1554	1370	1697	2321	2270	776	3469	1098	2105	4324	1854	1324	2032	5163	5099	3337	4203	5999	2032	4975	5118	1946	1647	2420	4529	738	2887	5270
Row 33	1925	2651	111	3569	1987	3543	5515	3907	4516	481	4254	330	2831	5126	4702	5031	394	473	981	5826	4790	3355	3347	5878	5689	4117	363	5603	3726	2497	2589	5022	1387	4665	1486	3707	3853	1444	1456	4342	5632	3081	2283	5044	2106	3608	129	4107	2988
Row 34	4919	3210	3805	3755	4732	3789	1918	2166	5450	2670	2357	5234	1624	1947	3370	2889	36	5623	1251	2034	4035	5000	5552	1187	4802	4483	3220	3192	179	4523	538	2621	5040	2366	2573	4444	1805	4118	4881	604	1270	3201	3750	1067	1420	1003	5403	5980	5525
Row 35	509	388	709	1063	2080	2558	673	568	4817	897	4449	1158	2741	856	3109	717	1443	3698	4380	2874	5070	5559	712	1942	4684	2974	1263	3852	676	2754	5448	2511	2985	4388	4086	1334	757	3962	1823	4108	4353	1141	5013	5268	4502	1197	397	5006	5008
Row 36	4298	2175	1467	1318	2160	3249	5503	5673	4704	593	4556	2779	1789	455	4251	4632	4683	5315	4998	88	5576	2881	533	4401	2502	1296	2580	4753	3350	2138	4230	4425	2357	2986	658	2180	2025	17	712	4701	5935	2202	1994	1491	2564	3093	463	5715	1279
Row 37	4543	2303	4560	1127	4365	115	1406	2737	5822	1082	5610	170	1125	3743	2686	399	1661	1421	426	117	3144	5858	1118	4510	2896	1949	5223	4502	5453	5203	225	4336	837	5169	2915	5908	3555	3327	5563	4832	1306	4995	2498	2986	5118	1509	2440	2288	4167
Row 38	5442	2842	4117	70	2970	2872	3519	1156	3074	5076	4824	5987	2320	5170	4373	4878	1017	5127	5630	1638	5879	4238	2998	5549	5917	253	5270	3368	1112	3334	112	1959	563	4652	1167	1033	3352	4667	4104	2297	4323	3646	5063	908	5418	5391	5529	140	3550
Row 39	170	2205	5779	1888	2497	2149	5717	2748	445	2458	192	3432	4195	1072	5152	4255	5450	4959	336	1880	5445	2085	3539	1549	4002	4762	5224	589	2424	5607	309	3366	5952	3865	1436	4115	801	4582	1317	4359	3959	3443	309	1763	5954	2316	3194	87	703
Row 40	985	4648	4806	4450	280	2197	398	78	3061	3143	3866	3568	3477	3549	1420	2506	5756	20	388	2259	2099	1615	3799	5862	942	3172	5275	4926	2665	4687	5386	2890	1607	4049	3352	4616	3984	5474	5070	1044	4200	526	90	5067	2812	2178	245	477	3476
Row 41	4517	1754	2733	4459	4224	5788	1638	2651	3249	1180	329	2292	2402	5390	3507	3539	653	5787	3932	4359	5424	1463	1253	1249	2566	1374	5979	5729	119	5506	4218	2746	5865	4417	4690	4531	5212	545	3785	4447	1407	2555	3508	1569	5037	861	2891	1419	5596
Row 42	5479	5489	5897	5085	2048	2956	3358	1522	5380	4328	5138	556	901	1574	5425	4655	284	5058	2969	4174	3856	3626	2626	1011	1496	4692	3439	1297	1674	1107	5992	888	943	4069	5736	4525	5009	4811	5249	2052	1883	4678	1537	2681	2469	763	4099	4942	3182
Row 43	4834	2904	1414	2091	201	2492	1265	2093	4590	1297	1404	3284	1833	2373	5401	1501	2037	4021	557	3252	5147	2709	2389	4477	5979	4290	3676	4630	785	71	316	4793	4949	4033	1379	3888	1678	1741	1674	5923	3690	5978	41	1982	4624	2248	503	3415	1030
Row 44	2421	996	1738	2462	5967	5215	2284	3024	4149	234	3824	1116	1101	1654	4835	5189	3421	1314	3580	1653	5842	4743	3588	3229	304	838	4531	2033	3037	2183	1615	4089	4112	5008	3576	1132	1780	912	3716	959	5976	831	3281	3837	3764	5667	1312	2867	2299
Row 45	601	2896	4839	5267	3951	754	4301	737	4353	1504	2083	886	4657	3088	4886	4126	3320	968	4749	3983	3913	1765	3566	5932	2134	5074	5599	1376	189	717	4981	2315	1213	3780	1345	4878	510	2091	515	3032	2528	2444	3483	3047	856	4368	2295	3914	1517
Row 46	880	2298	3146	2017	768	3947	3937	3781	344	3568	5151	23	5067	5807	4824	279	4802	196	122	675	273	963	2621	3497	2387	2798	5457	5986	5208	2585	4308	4886	1046	5626	3671	1450	2465	2768	4147	2816	2160	1967	634	4558	3345	3741	635	2738	754
Row 47	5042	21	3498	3331	5020	5168	3010	5171	3223	3993	5004	5663	815	2437	5761	1530	2477	2221	321	2978	5504	3186	4186	217	4443	257	4279	5147	4040	113	5356	1634	1637	1035	5003	908	5449	3074	4479	2937	1194	3362	4494	867	5573	4456	2805	1847	1209
Row 48	4459	3336	2139	2071	1023	4952	1573	3402	280	4475	5954	5078	5701	3391	775	5129	455	2629	3802	2413	1515	4550	2671	2231	328	2347	2960	5934	2487	5606	527	2821	4602	4890	869	143	3615	55	5819	990	5706	5556	5158	2878	78	454	995	3248	2334
Row 49	5252	63	2605	3249	3029	356	5844	496	880	5577	453	5872	5121	1506	5394	1955	4441	392	5466	1749	5303	574	5568	1294	898	3400	3589	2514	1534	5916	3466	1534	181	2643	3176	2848	297	5200	2355	3618	1275	2213	5375	5185	2564	2367	3335	1520	5652

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.