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	1653	5287	2581	3404	2458	1769	3195	1921	3439	1242	72	3519	282	5789	3810	4321	3428	2138	588	149	3550	5430	1476	1915	3151	3892	2843	3830	4788	201	1445	2655	3987	2427	5297	3508	3005	1376	206	418	5752	4996	5286	5154	1661	4943	4942	1355	4672
Row 1	2568	2919	1780	1218	1927	768	3519	1004	796	143	2265	88	1953	3964	3629	2735	3839	4518	2762	5136	385	4971	1989	1562	3474	3271	2687	3568	364	5924	1225	3357	4358	3937	5556	3580	5848	5110	3389	5775	1256	5199	2660	5079	1278	237	3765	2425	5399
Row 2	5221	1992	4559	1106	4302	1414	1288	4937	3805	5909	5970	1360	5023	3094	2405	1958	4844	1840	3136	5315	3149	1725	4115	2486	1307	2743	1500	1098	3963	781	2984	214	4765	542	4688	4660	2288	4331	4479	4736	4366	5136	5765	3309	5670	5940	5099	3598	1122
Row 3	427	2300	2411	556	1822	3348	2562	2274	3281	468	93	1869	492	4191	5175	3842	2828	3797	4451	2136	5361	4926	4378	3477	2735	222	1948	5819	52	1191	4738	2488	1609	4703	1280	4063	561	3355	2926	4781	4456	4359	2347	560	2126	250	5489	3179	1630
Row 4	5381	158	3115	5737	5700	775	3878	819	1768	3665	4686	304	3592	2438	4918	2287	1116	4092	2485	3213	3527	2188	1234	1850	3173	5959	3636	356	5796	4060	4979	1188	173	490	2712	366	4722	2118	4443	4663	4725	5729	5414	2695	784	4236	2173	2410	689
Row 5	5211	4870	5785	2300	1171	4774	69	4472	613	4210	1081	4155	1361	5065	3889	3413	2744	4585	3772	2030	5764	983	1341	909	2745	2900	2250	4262	2653	5781	4925	3595	5817	5324	4779	1860	4045	5595	20	372	4553	445	5016	1351	2761	3342	5344	2682	4722
Row 6	5755	1322	5377	3981	1906	2653	2446	604	3474	3613	490	2894	2800	634	3244	2065	502	4971	4004	448	556	567	1780	5796	2196	5811	468	2540	2864	916	1933	1968	2409	3108	5148	4244	1310	3701	971	469	790	2782	5876	4252	4685	1169	1878	4579	1535
Row 7	2953	2219	1596	506	1830	5914	5568	5479	5152	4953	1238	1247	3714	973	2898	651	1321	936	2313	4517	1731	1169	1206	157	1196	3645	3431	5124	3731	2633	3900	2243	3826	3927	4678	2913	3731	15	1533	4017	5200	4245	4017	5440	3163	1320	5271	5602	5252
Row 8	975	2596	1414	4686	3417	4096	1108	2423	4277	557	4872	5125	5149	5856	2937	5647	3853	4939	4508	2727	3270	2001	5559	5804	1766	4701	3540	2739	4104	2996	4059	3292	1183	3497	2566	5333	942	1818	4400	1362	4652	1188	2480	4281	5867	4876	2665	1595	2506
Row 9	2441	2929	3469	3795	5705	2760	3870	1012	5617	10	5774	5145	4419	1107	1533	3927	2107	4008	3554	3866	1616	3738	5918	4279	65	3473	4983	2135	3797	5923	2631	3240	3161	1973	3249	3886	3461	1145	1695	3886	251	5198	3870	2552	4849	5601	4191	4410	3118
Row 10	3073	397	3007	3664	346	5806	5694	429	4604	2010	4827	4810	4757	271	1896	2649	817	1797	701	3635	1496	3410	230	551	4319	814	4164	2501	3572	4176	4408	216	2125	4892	1199	3243	5222	418	2362	3532	1078	4010	1699	3503	4779	123	2962	1003	1496
Row 11	2715	471	4746	3114	1503	4807	45	4104	1378	4846	3728	1860	4629	4316	5958	2455	1184	2858	469	3614	2243	3194	3546	5855	5371	5720	896	423	4525	4762	282	1638	423	1907	4337	4745	3642	2357	813	4059	4938	5245	501	3644	3185	2120	1465	238	13
Row 12	5540	456	1366	554	3797	716	3219	4143	2696	4758	5865	815	2458	3294	31	141	3392	2505	1155	4646	2385	2453	3456	2160	292	4051	1110	4503	309	2328	626	308	361	287	394	2851	1348	2510	4969	4984	4320	4529	2846	2229	5511	438	948	1612	3738
Row 13	1578	2537	540	5341	176	3026	5000	1472	2926	3686	1744	1704	3059	541	3512	5074	3127	2967	161	1071	5793	25	3209	4676	1876	427	5968	2027	2844	3597	5837	5170	614	5099	4357	2176	5858	5821	5037	1789	4623	4239	728	472	4914	4653	4026	2345	2565
Row 14	2787	5484	36	4028	5101	4152	5748	5401	4893	5319	3812	1424	1440	5661	3960	4174	3676	144	1267	5730	677	5317	4090	1145	4685	4465	1542	5132	1908	1265	5404	5157	1469	484	1782	5390	4695	5974	3612	960	1916	1945	44	3348	2966	5679	4213	1138	662
Row 15	3048	5196	4336	5061	3060	251	2807	4417	1303	3147	4592	1949	3427	4191	4129	4532	150	2670	2478	3782	2740	3504	2912	5158	5049	981	1855	4552	5151	1660	5003	5726	1272	4572	294	5883	689	1397	778	3569	5302	2697	2689	2841	3166	1296	2007	1294	5545
Row 16	5845	4933	2703	4495	4692	2380	4272	2925	290	3765	597	1949	1731	4336	4691	2898	2308	4418	791	4794	5119	2136	3458	5341	1347	3912	5056	2433	631	1240	4346	1201	5457	2749	2879	4817	4826	4009	5207	4916	4557	468	670	258	1690	4121	952	2695	2794
Row 17	4249	1103	1478	2453	5291	3333	4747	2913	3096	4363	5944	4801	2308	3396	4498	1023	4730	3091	5933	2066	3235	4246	5730	5383	3465	1686	4083	1362	5366	3864	2840	5701	5595	2517	4841	1475	2286	5882	4908	2408	745	5724	5063	207	5311	2755	339	1490	3907
Row 18	5748	2710	5177	1536	3670	3851	178	1073	2519	3267	830	3310	4506	3558	4682	610	794	5112	3920	5976	1133	5560	3613	1332	3133	5815	4174	2714	1171	4889	3322	835	2843	5682	5785	716	1811	2250	1000	2235	170	2066	4437	2101	1425	4405	2502	3380	1437
Row 19	4196	5242	2950	3723	2558	2676	751	5752	1466	1392	5081	5385	2871	4045	4098	2068	5368	2925	1683	3730	5854	4989	1910	5564	2949	4890	278	3711	5538	2330	4016	1012	5970	1845	5251	134	3721	5013	337	4225	464	5449	2218	3512	5118	2848	5080	3390	3781
Row 20	4012	5816	422	5928	4475	2695	5257	3537	1104	146	2777	3351	3505	5628	4182	1414	4525	2198	1616	637	4452	752	2471	4656	2469	398	1253	2685	5672	1127	4630	1382	2095	4732	3083	4297	88	36	3989	4655	2432	5045	4825	198	2156	4871	1169	5123	5559
Row 21	2458	1873	3493	2863	4246	4880	4348	763	3860	1989	3865	3860	4377	5472	3815	219	4862	2051	4606	3182	3006	4581	5111	2318	5879	4553	2127	975	2457	5178	3167	3639	3983	4614	696	832	3981	4667	615	5137	1373	5527	4761	2426	1697	2171	4550	186	2228
Row 22	479	5786	2157	1146	2779	5696	3953	4411	1311	19	3722	4427	1654	4948	2228	2666	3078	3472	2308	369	2602	93	4819	4168	3716	51	271	1161	67	2467	5134	3867	1131	2814	430	3038	684	2115	4690	2750	5842	261	3709	2893	5690	5418	197	1762	1112
Row 23	2184	2367	5266	1240	2462	626	5561	3526	5226	2625	1900	309	4381	4595	4103	2248	5618	4602	1436	4738	2595	2859	2255	1558	4212	4419	4416	102	2689	4183	3611	750	844	4780	982	719	1030	4160	3295	4161	5603	1570	3024	2732	1373	708	1267	5380	5572
Row 24	2713	515	2127	4641	5517	2997	2978	1558	4911	1466	1501	3983	4175	5437	3259	1445	233	1154	4966	5104	1747	550	2319	1197	539	5020	3042	970	1165	60	230	3553	2352	2505	5371	3071	5780	771	3709	1917	5098	672	1158	1238	3800	4986	3794	5044	2246
Row 25	4	352	156	674	3650	525	3467	5056	2282	4284	3210	4006	685	32	5940	408	2305	5346	3586	4212	202	3796	3954	2426	2795	602	2034	1089	1859	3889	4299	662	2336	4259	2435	2214	309	892	1025	2324	4501	4158	5929	5770	1247	3784	4313	5196	3763
Row 26	406	644	2550	3327	5643	4994	2052	4070	4850	2180	1502	3188	4939	2633	2781	1740	3450	776	917	3769	2213	5210	4051	4416	753	5341	3383	4169	5259	2390	4540	774	4937	3011	1631	1799	1785	618	5414	3059	1942	3145	1284	1436	4581	5483	2539	1939	2848
Row 27	3658	503	394	2135	5886	2463	5249	5306	3606	2422	2671	821	5954	2302	3214	1777	766	661	2739	1882	2233	4823	4065	2035	2790	4824	833	5029	5350	5191	2943	2623	2057	521	1915	5750	1354	1599	5036	1635	2105	4322	5145	3743	218	3487	1422	553	2417
Row 28	2474	390	2536	166	3316	2724	3647	2719	4786	1014	812	623	532	4860	2692	1121	2290	2885	5926	2253	614	3151	4706	859	2119	3037	1062	1639	4715	5523	3502	2312	611	238	3331	2337	273	4150	4784	5673	1662	130	3742	2469	4285	3587	5324	2918	1341
Row 29	4093	2621	5945	3230	1327	4584	3060	4799	498	5717	3838	3795	2704	2881	4184	4430	2231	889	4134	3026	333	1210	428	4040	2154	2617	2433	1080	3570	361	4401	1646	1934	1906	699	4251	3411	1784	3698	271	192	3450	2709	2889	527	4347	5783	2873	3175
Row 30	1269	5112	5063	3010	3686	2310	91	3668	4258	243	1241	1335	3931	2029	530	3838	777	2815	2696	773	4751	3584	1960	489	1492	4755	1346	2832	3033	2792	5862	1615	426	5302	3254	4766	4072	2651	3029	1019	3433	2667	703	5208	3781	5286	3336	454	638
Row 31	4296	1549	2784	106	3138	4104	3027	5071	194	1847	4449	1264	5043	1735	488	1412	1114	5014	4882	1526	2005	2502	3548	213	785	2338	4940	2242	1195	371	3564	3138	4779	2299	2740	3581	3233	2121	1502	3249	1061	377	184	2405	5460	41	2144	3708	2162
Row 32	1408	388	537	4055	946	5475	5116	2362	1280	4403	2952	2146	4658	1	3159	5602	755	4895	2501	5246	137	5206	966	4271	130	3675	2416	2894	389	5118	2903	1282	3472	3176	304	2668	5430	4012	91	666	2400	712	2398	3487	5925	1792	2568	3836	1592
Row 33	2903	5033	5536	1833	5314	2760	2911	5970	521	4501	4636	5015	3046	3021	1190	686	4485	4296	3233	2515	2339	5435	3414	2167	4041	242	1345	3436	403	5153	704	1103	2489	3234	4217	1669	3037	2620	1026	1738	2857	4794	4889	3687	2604	2103	231	2743	5905
Row 34	4177	2896	2947	4997	2910	3409	2559	4000	1124	1639	2945	2178	1428	1014	4256	5406	5785	5439	4542	5205	2840	4146	1149	4721	4055	4299	3341	3752	3998	1338	1518	3735	71	3274	3944	4406	1059	5547	4175	467	5069	3809	2125	3538	3079	5684	1739	2682	100
Row 35	1132	4179	3241	2463	1899	3577	1514	4922	1486	612	3507	3028	5930	4560	5724	4551	5282	643	3808	38	9	4213	2571	5255	3580	3214	2116	2599	263	4854	4739	497	2040	1426	5263	1116	2397	740	4349	2137	2672	2507	2080	297	5463	544	2550	1853	5506
Row 36	2578	2152	4025	362	591	2059	5285	5440	1723	5456	5794	4477	5579	1198	5391	1502	5	3721	497	4823	4527	5801	4504	3121	5679	1054	51	4259	3129	2896	879	5216	49	1270	3329	5688	1012	3188	3633	730	3312	2786	1297	1982	3379	5891	344	3282	3876
Row 37	4535	1754	3287	4204	5867	5790	3433	1789	1182	390	4142	5416	3291	1810	2161	2077	5915	3488	3005	2966	4181	5137	4890	500	231	4846	3696	5338	4903	4587	2050	1596	3704	5661	8	355	1393	5884	1618	5177	874	4693	3911	5365	4649	2719	5891	3776	3502
Row 38	3390	1761	4849	4393	4675	3342	5187	1083	5982	537	4759	4011	2683	2816	4679	3181	4293	2837	2278	2748	527	3265	3547	3648	1834	1663	5889	2776	4068	2838	3749	391	3321	5210	178	3593	3183	1500	4395	3429	607	5373	990	2766	846	5373	5412	2433	1844
Row 39	2589	4513	3247	1962	4857	3141	5683	2722	4171	1515	983	4070	2917	4495	1727	2308	4831	4946	4746	5159	5509	5229	1860	1247	2018	5223	254	2947	5034	386	3600	4887	4987	4437	3447	414	3653	3725	62	5659	3697	963	487	679	310	5714	1330	498	5066
Row 40	4868	1809	895	37	2195	5084	4307	671	1358	5620	808	954	4420	4014	238	3280	599	4228	1287	3529	4390	3435	1467	155	3443	5063	5654	39	4621	2950	138	1372	5384	3553	2580	4837	3701	3265	1182	3105	5358	4429	194	5695	3579	5657	439	3932	2819
Row 41	2263	1702	3045	1114	2176	3437	2569	3313	950	2919	3481	4396	1801	2741	3440	5933	2767	1141	4196	2824	4439	770	5745	143	5048	3116	666	5535	2084	4920	2709	1705	1432	5369	5579	1734	717	1317	455	2945	4721	5657	1870	1612	5474	2391	2036	885	1090
Row 42	1076	5038	4680	3213	4841	50	4387	371	1321	5311	4008	3628	5818	1222	3380	238	1428	2728	4265	2015	1796	1406	3855	5344	706	3	4497	5141	2901	1550	943	4917	4148	3532	845	2452	5988	720	1993	4424	4353	1805	1097	3693	956	4846	2726	1270	953
Row 43	724	4087	3924	3462	3334	3591	5394	4587	862	23	2565	4847	5010	3158	2161	426	4673	3032	3613	165	3043	1888	3447	3261	5714	3946	5844	5071	3223	3264	3396	2319	5215	2243	3802	1465	5565	858	5995	3745	762	2722	1426	2292	3977	2844	3997	3456	2342
Row 44	183	360	4516	2635	3923	5893	1057	4733	1624	5417	2107	3148	3593	1119	3168	1379	4854	5501	2341	1960	887	3779	923	4308	3599	184	672	4054	1339	671	2249	1218	1955	409	1996	783	5355	3457	4180	3745	5880	3422	1318	4252	342	2090	4859	107	3804
Row 45	3241	3211	5160	4741	2405	339	3088	4405	5789	4461	5448	4980	22	5182	1889	2092	5487	4937	5407	474	915	163	4814	4109	2578	1196	4031	4989	458	5345	3659	78	3586	1548	5018	3911	1224	238	5539	4584	3269	3737	3359	2412	193	3436	2620	731	3342
Row 46	932	2719	49	591	3301	281	3421	4218	2481	2053	4281	3884	3208	4155	2144	5668	1950	1446	4910	5534	2863	3901	34	2786	2264	755	608	4964	4130	3601	5184	2757	1658	5269	2442	2551	5965	2984	4199	4237	4189	5072	855	301	4403	4629	479	2786	2686
Row 47	289	3456	1869	4692	161	3500	1864	5039	1956	2120	2976	3636	3439	1882	5722	268	4773	3476	3047	3045	4315	1740	1540	395	3618	4837	5335	411	3888	4138	2855	5401	4920	3655	2517	104	3126	4153	5974	5552	3095	4671	1955	2266	303	5295	3971	1329	109
Row 48	5501	1079	5726	117	2550	4656	1987	3908	894	397	3586	4601	5508	3768	662	5276	2315	5595	3975	5791	1223	5267	1036	3300	3520	3909	4955	4161	3105	5961	177	4316	5702	4905	2471	796	1061	4600	5737	268	3512	3087	1324	4403	104	5951	3080	2496	3895
Row 49	5261	2799	5997	3076	3250	4432	2367	1733	5654	941	2402	1759	5425	4997	3644	313	5410	2881	3220	3434	3115	2636	1617	1222	4329	3984	5180	5698	5210	4860	4302	3793	4231	3498	582	1666	3375	4508	3381	3410	4947	4439	3546	3339	1851	1176	3414	4206	4042

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.