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	675	4196	663	3217	5316	2950	4642	4255	1336	468	4086	2276	309	3792	1404	3473	5318	4349	1810	2306	2235	3371	777	32	507	289	3707	1225	5874	2362	426	2361	4095	4099	465	1415	5487	3318	4378	1444	4027	3698	347	979	5028	3735	2284	5103	3708
Row 1	5974	2377	2246	5499	1842	1778	4632	5082	5457	5000	1887	2008	337	900	4520	5981	140	5651	2931	2363	530	5016	1688	288	516	43	2549	3035	2670	549	5859	4721	2450	5917	3813	1435	5989	1516	847	2215	1326	3429	3324	4433	1294	2837	1852	5252	2119
Row 2	1898	5733	3232	201	1638	1420	510	5418	2964	756	1663	702	2009	229	4490	352	4642	4352	1583	3827	3029	2090	2970	1760	3855	1872	3259	3406	3834	5106	1472	5740	1939	22	910	5503	3787	3616	5201	2406	2660	1047	841	4092	2907	5477	1509	1604	3222
Row 3	3217	3681	3948	4882	1311	3626	3312	210	247	2740	4110	5698	4110	196	2706	2475	463	3521	4028	2856	5734	5393	4663	167	3783	2912	2323	1439	2	5552	2837	5887	2735	2209	4138	2736	2059	3200	4121	3986	3831	1774	394	3037	1400	5793	48	1599	2609
Row 4	575	5749	349	606	3618	2309	1079	4042	5296	594	1151	402	982	3066	5185	4448	2601	2231	1244	1306	529	4853	4916	4844	342	1713	35	2873	3495	2298	1475	4408	598	3121	277	3079	141	4696	4218	4700	4027	444	5229	2520	1755	4770	5676	5675	3483
Row 5	2702	5134	5104	5829	1841	5094	5697	3919	3158	4727	4709	4841	2059	1983	3643	2364	4645	5515	3431	1739	1276	5945	4095	4053	4817	2747	2197	5340	5846	1944	3572	321	505	2578	5230	3500	5844	973	4410	3950	2260	2644	2553	4507	5550	2963	4583	4512	5470
Row 6	5901	856	931	1666	2645	4885	1901	2212	1649	1316	752	1762	3255	4458	4418	4021	1838	4797	5592	3689	1923	383	3304	1935	4117	1452	460	4493	276	395	361	1224	5947	2128	5308	1463	2769	3687	3113	5151	1834	3512	2591	1095	1625	151	3309	1609	3464
Row 7	2989	1233	353	1783	3365	2132	3351	2979	2490	4539	5860	2040	3181	5444	5913	1175	4486	4293	3932	4074	4695	4297	5747	1266	2325	1832	4145	974	1789	5148	732	4279	1050	527	3274	434	3434	3512	2617	5908	3321	6000	4674	5415	3063	1787	700	3934	1517
Row 8	4877	5693	3452	2460	5044	4852	4034	5722	249	3774	4599	4535	3387	1096	584	2784	637	700	4887	1540	2449	4955	4286	2408	151	78	3384	5749	2225	3625	2486	4071	5942	1841	2370	5168	4537	2353	85	3246	4201	1325	429	115	5176	2	5154	4973	4352
Row 9	3600	1763	1450	1919	4209	4759	3299	1018	3627	5042	2197	1677	2710	5593	1710	629	3670	2802	587	4362	2196	2807	3400	2216	789	4548	4875	1687	2669	2591	843	1860	5	1119	422	4602	2459	2979	3011	2841	4954	4973	5035	2191	5928	2602	3904	3071	267
Row 10	908	2014	3108	97	5339	3330	5368	199	2332	2637	4795	3288	1285	4400	1339	4826	3457	1753	4150	3504	5870	99	4840	2783	4322	88	551	3830	4810	2003	4745	4957	4763	5319	5664	1215	1824	2647	4636	4032	2764	1829	2307	3609	4861	3641	1218	1516	4502
Row 11	3182	2732	5529	5405	1256	3387	4070	1441	1921	131	1077	2471	2900	1092	215	301	4337	4333	529	5475	4918	499	5672	5149	3399	1562	1303	5379	5895	5928	99	3903	4386	3883	1509	2285	3652	2908	2140	5914	1149	1610	5971	4584	961	1240	4499	3963	4053
Row 12	4428	3344	1539	4854	2353	2349	4362	2997	2091	129	5325	337	3786	5778	4585	481	4139	5045	5519	2465	3940	154	85	3485	2821	386	2651	3757	1717	4367	3550	630	940	3039	933	1459	5250	1700	65	4960	3899	1538	5231	1974	4401	3923	2712	3858	2266
Row 13	3175	3534	2901	5619	3223	3046	5539	4876	5831	5083	5028	473	699	4583	4833	2205	4994	1834	2174	525	3773	3297	5551	3520	3041	644	5860	196	2989	2702	27	3344	1848	1798	2367	5522	1139	4547	2179	979	1041	2811	628	2207	3409	4141	3488	1446	3540
Row 14	1213	1719	1470	2781	4042	4603	1409	2997	5678	3056	4182	621	5647	4352	1909	5865	3254	3337	1298	5702	1765	3977	2370	1534	4085	4362	3826	4146	3760	4243	1338	4033	3453	1185	3776	2587	860	3438	807	772	3848	1501	2952	958	4035	4509	1653	1530	116
Row 15	3648	5475	2864	4839	3787	4482	292	2217	1615	4844	2117	770	3436	3810	105	3081	3302	1782	3245	112	4266	5801	1800	4062	3802	4634	546	1347	615	5413	5911	475	2796	5923	457	4225	1249	1098	4531	3629	2666	3869	2316	1168	4530	196	4517	4472	3668
Row 16	5501	500	4973	5364	1022	4171	1712	2283	1881	667	5202	3196	1818	2958	5608	2769	1584	4100	2885	1867	2685	2386	1407	1389	3241	1783	400	827	1173	1593	4514	2937	386	3603	4146	332	1794	5669	1830	5697	1316	5884	4515	4298	433	5158	515	4673	3272
Row 17	3515	464	1070	1886	3681	794	4594	5304	4391	5293	2825	421	5777	1591	3120	2693	3309	5309	5497	5137	5607	5573	1659	488	875	3986	1057	4381	3039	3733	2066	3780	3415	3914	219	3705	918	994	2109	5323	1738	4837	919	4386	5252	3926	3983	3910	2621
Row 18	5519	3588	161	2103	3350	2723	5380	3575	605	4932	535	2159	3646	3385	1773	501	5094	4247	3466	3087	4732	690	1819	3763	2292	2980	2036	856	1099	2323	5439	5466	2828	4041	5982	729	3939	1409	2904	221	199	2167	93	846	4535	5734	1656	1895	4135
Row 19	4423	948	1445	3722	2901	4342	5701	5605	4089	5327	5850	4137	3379	3514	706	4847	2267	161	4337	5863	3668	1855	4834	3520	4343	90	3595	3566	4771	2840	2703	2189	2160	721	5369	4733	4605	3484	5899	4076	3857	3697	5817	450	4328	3225	4881	5866	1293
Row 20	2215	489	3370	700	3116	4495	161	1950	495	4053	1667	5599	556	3204	5786	2270	3176	5635	653	2691	1614	234	5909	385	4094	4637	1614	561	4403	424	3439	2225	1979	5911	554	279	2661	4205	1466	491	1843	2931	3280	172	5925	4209	5400	5226	867
Row 21	3316	3292	4461	5486	3573	3815	4452	1033	1340	1893	4863	5160	2938	3868	5745	2867	4720	5282	2923	4759	5467	2210	5531	420	2466	2986	504	726	4579	5317	2814	640	1253	793	4743	719	5359	109	4635	2680	3852	5362	2016	3169	1369	1086	3705	3791	5123
Row 22	3551	4185	3910	5343	2161	5824	4042	4170	2141	3973	5064	1206	1909	2293	2920	2192	4325	868	3794	4615	15	4422	197	2802	5636	701	2104	3959	3722	5842	2611	688	4536	2543	3298	5680	3596	2877	3962	26	5744	1471	4449	5834	3185	1482	5816	817	1485
Row 23	3877	3413	123	3346	3076	4110	563	1151	2823	992	3580	5457	2690	669	5987	4781	5173	1876	5383	1510	466	5217	5126	3791	4668	5354	172	2845	3028	345	405	5842	3457	5061	3462	92	4878	570	5848	5145	2539	1921	4868	1168	3792	2562	5118	5685	5981
Row 24	2289	2469	447	5637	4483	2717	1728	4211	1631	3181	3503	4337	3982	4126	2076	428	3152	3782	4224	1872	1539	5798	3960	2912	4374	4187	3135	1106	4315	4954	4903	5632	5759	1347	3159	3292	4537	4725	2003	2911	5830	5323	3463	76	3942	1024	1963	5555	4055
Row 25	2747	2824	1190	2161	4678	1133	4772	5834	3163	1062	857	887	1103	3092	3867	3080	969	3263	3710	2315	3095	5215	911	4922	2444	815	5780	5205	1434	4061	2095	3737	1103	4652	291	5520	4722	3210	3844	608	5277	1242	1525	1604	217	1702	985	4913	5396
Row 26	4321	3392	1408	1880	3026	1667	5705	4851	4914	5512	4115	3842	4801	1758	4836	3546	1647	4078	4418	41	4386	1507	3586	1322	1338	5455	3636	2051	4895	5595	787	3588	5870	5785	4496	4434	5512	3174	5239	5121	5937	2624	994	3097	4258	2113	3524	3114	408
Row 27	1287	3765	2485	4120	5909	2158	5950	1695	2911	520	2272	4555	5966	4145	3017	1883	3864	1175	2322	932	5620	727	4773	1104	385	1105	5726	3513	309	5478	841	2859	3689	911	4496	4714	5509	1709	4226	2877	337	4749	63	3176	3440	2841	5284	2396	5329
Row 28	882	81	5184	3052	4236	139	967	4273	1472	1427	3572	3057	1354	1026	1124	1293	5522	1197	3279	5902	5080	742	5229	3916	901	977	3964	5791	4989	3657	1598	36	1228	1126	2787	2960	2625	5124	2444	4816	680	4062	1224	5226	766	3872	2889	1472	1086
Row 29	3536	2360	2010	4838	106	4257	1791	1045	2081	201	3759	1373	4092	502	1943	5535	4557	2156	4273	4221	2136	3634	3482	1344	1449	5242	3981	1136	1802	4091	755	5373	2448	5533	2445	4357	4540	1410	245	2996	2020	5430	151	1310	1230	2746	3702	4465	5038
Row 30	5004	5464	5456	3865	4113	1511	1531	3672	722	1724	5255	53	4936	5938	5661	2800	3487	1797	3171	1978	4053	3458	5258	4854	614	3043	4741	1294	4437	4097	5914	2051	4482	3766	4267	4337	594	1641	1647	5569	3810	1847	766	5020	5279	5202	2205	5136	274
Row 31	3518	3110	4961	5209	992	5593	2967	1381	807	660	4655	5148	1518	3785	2297	5150	1418	1944	3577	3899	5011	2351	3780	2968	5784	4534	4876	849	4568	4423	2152	88	4586	5996	486	5817	3686	4788	167	5725	1339	4427	3235	5027	3688	3506	2140	325	5569
Row 32	2205	430	2953	1877	2959	3620	1307	291	4547	1587	2940	5355	4893	2881	2702	4432	4834	3627	2534	3052	896	5404	2927	3702	4569	3403	3132	4692	3379	1899	4339	2974	4851	19	2513	1245	2707	1302	3934	596	3612	5994	2420	3916	5360	3258	501	1729	4868
Row 33	2453	194	2261	2402	1855	3905	2011	3580	4314	2723	5969	3916	350	1753	4077	144	5843	2446	5910	2237	1189	2077	3292	5010	1412	5348	1348	3280	2561	2037	4478	4555	5762	4282	2276	4194	1127	697	1983	5238	154	4957	1552	529	2685	5326	2170	4773	1787
Row 34	1012	2566	5662	1607	2927	1139	12	4843	4306	5408	1201	3818	1051	4502	264	2827	4791	282	500	1397	5262	654	512	4675	1286	1709	4046	5559	2172	5920	5707	3152	1074	2039	2144	934	267	3438	3315	1395	1757	1010	553	1384	5699	2931	784	3840	5749
Row 35	3720	5945	274	475	63	1759	1735	1371	3838	1362	1457	1302	3241	1998	2152	5182	2425	1160	5926	2452	1282	610	5704	3724	2489	1078	2703	1314	487	1006	3255	3857	4170	5998	5169	2114	899	3975	117	2018	5440	1171	452	1092	3313	594	5702	905	981
Row 36	1859	4552	582	2002	5481	3235	4573	5512	5934	2232	5430	50	5149	5547	2625	2247	3233	2551	167	2454	5869	5743	813	2253	1392	2419	2189	4940	1655	5753	2595	5662	4983	3770	75	94	737	2770	925	5542	5384	1469	4422	2698	171	2507	1260	1396	136
Row 37	4149	2842	3832	3357	3493	4262	2361	5066	569	4918	4680	1839	2766	1632	2463	4597	1315	5266	2429	5629	2364	5113	2930	5997	4802	252	2930	3713	2185	4478	2803	343	2763	1312	1190	768	1826	3462	3281	2318	123	2120	3446	3568	2288	1956	4165	4536	2952
Row 38	234	4575	4530	2255	807	2542	5893	1100	2955	3468	5285	5163	2759	2930	5717	2828	5879	3591	5756	2844	4981	4842	5291	3622	1504	426	3609	4961	2132	1771	4087	2777	2745	5436	3955	366	4535	970	5739	5055	4056	5004	3969	1663	3976	1927	5882	1400	3900
Row 39	924	1261	3469	114	5928	4618	2981	5797	732	4704	1227	155	4976	3772	1754	2015	4726	3276	2724	3406	3748	3584	1051	5460	73	3054	3174	5690	1031	3722	967	1570	1641	632	468	1828	310	221	4263	5184	3042	1914	3410	4799	1069	1987	1481	3538	949
Row 40	3060	1694	3781	822	5607	2922	2337	3484	1119	260	4475	5108	3311	4503	4542	5755	5125	1842	890	1851	3659	2505	4494	1411	3977	304	731	1408	3533	5278	4976	4441	1101	1256	461	5078	1270	950	4256	2655	1210	53	1605	801	3719	3384	3044	4151	1104
Row 41	4205	2455	785	5152	3503	5642	409	1020	5822	1094	2931	1104	2947	610	4842	1902	2303	1267	3901	4681	2911	1421	1721	5010	792	4729	2045	559	2324	3972	2268	3051	4886	424	3666	1013	2403	3055	2661	1712	5454	1889	62	24	1134	2931	3826	5034	5302
Row 42	3088	4231	5111	3284	811	5800	2778	1239	5856	5944	5886	5393	4219	2730	3723	4326	4994	3151	4451	4577	681	4011	967	3359	3567	3940	1284	3391	1612	1752	5428	3716	5754	3160	2566	4545	4627	4997	4766	526	1550	2438	3149	5065	5357	4163	4330	4728	2739
Row 43	5795	3028	4734	2336	4802	4975	5476	3838	3409	5224	3890	5735	4621	1926	1666	2098	3176	3671	4915	417	5698	833	1321	687	2449	1410	3747	1893	4585	3664	1203	2576	3598	1022	3647	2534	801	3980	5899	4131	1406	1374	2407	990	3203	5390	3975	63	4588
Row 44	4583	1260	289	4285	5554	1894	5937	4057	2259	1753	1053	4278	4363	3561	3399	5216	2495	2671	2343	249	317	1425	4501	3820	5787	1824	1748	2156	799	4162	4748	110	5858	2922	5965	1267	1840	2395	1418	4821	1913	2882	803	1700	2100	1107	1918	230	3814
Row 45	3728	686	2495	5635	5837	2474	4165	1367	324	4554	226	377	5734	4748	3076	4147	1044	523	230	1221	1061	3457	4259	1594	5545	972	3239	1494	5278	1332	730	1903	2079	2240	5838	3356	2932	1819	4073	1191	2546	2834	1634	5302	5636	5077	5597	5596	1298
Row 46	2748	2806	4756	263	2694	313	1859	89	5671	2952	2762	1740	2815	544	4058	4677	4912	1561	2695	4105	88	5148	3607	5388	1567	42	1702	356	1298	1306	1867	3063	3863	5312	2599	4108	3433	2425	1696	3892	4770	1077	4714	5706	1490	4604	3144	3126	529
Row 47	4148	1570	127	3505	513	1682	556	3890	2029	3063	1343	4828	1256	2536	688	4645	5785	2665	1114	1875	5176	2832	5944	1461	1832	4052	2265	3536	1962	699	5311	4737	3947	1544	3451	2162	5228	4140	2873	5148	2124	2559	2120	4349	3749	4940	4990	1971	3890
Row 48	2474	470	4680	1025	1447	580	2605	716	606	555	5404	2910	3763	32	3668	3544	4113	2786	2919	1871	1844	2462	3763	2242	1681	1774	4630	4658	4222	1729	3350	1703	5868	3185	4349	2862	3456	5681	4652	3824	5903	2503	2477	3937	4586	3717	375	1655	691
Row 49	4134	3496	3965	943	3097	3657	528	3794	4180	5952	5750	3584	1257	2325	4925	3346	5405	4850	5169	5482	5947	4124	845	2247	3109	686	2293	402	4342	30	1961	2604	4175	1311	875	4447	5515	4961	2033	5698	1922	4032	4361	2155	4402	3038	3762	2855	4528

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.