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	899	3704	4896	4573	5484	5421	44	1298	2439	1773	5412	5828	5820	2625	2076	4345	1485	1943	2641	3437	3909	1428	1645	1853	5897	1526	2754	300	4280	2161	615	5178	5865	5510	3750	5348	4931	3794	645	1369	5566	57	1196	5385	2681	3272	3730	4166	5214
Row 1	371	1602	3122	1798	3247	4975	1695	4772	1729	1995	3052	3889	2609	2229	3753	2119	5979	3100	1049	3772	3745	2417	3337	3801	3613	2722	481	884	452	4646	98	822	248	3220	2620	3495	2194	4314	2267	3922	308	5318	1811	2916	1546	5564	5035	1525	2664
Row 2	83	5296	408	2500	2632	4208	112	5354	4689	996	5805	3335	1093	626	3583	4312	3245	1078	506	1559	3344	4428	1866	2661	239	4782	4207	5802	3816	5732	2466	3899	5027	2873	398	1658	1081	509	1012	5770	1504	816	3104	2597	1442	687	908	4686	1764
Row 3	1414	244	5107	5841	2110	1768	80	892	5975	5881	4707	5706	2346	2605	4732	5219	3003	390	299	3511	1401	68	5014	2217	3172	1610	3658	3858	2518	2344	5622	3932	2587	4728	3773	4697	496	3852	5588	471	3733	4295	177	79	900	4909	5297	3902	5298
Row 4	5596	1412	699	5664	426	2916	2835	2036	573	693	4554	2916	314	2485	5503	5042	257	4200	5538	4109	3787	8	1841	2081	184	1919	2981	5092	1216	882	4390	812	2293	5089	475	2719	2004	3310	4755	2577	4003	3308	5493	4317	5793	4996	3358	50	3195
Row 5	2895	4158	981	2903	5998	3062	3086	1917	43	2178	3132	924	568	3944	3217	5656	4418	5935	1660	1728	4690	4237	5730	1997	3729	4046	1790	2724	1404	1839	5919	4298	5996	900	1201	5994	3961	4286	1910	4003	464	5042	4927	1031	2985	2143	687	1403	2078
Row 6	2347	3130	767	583	2860	2764	4312	906	4553	1036	2309	392	954	607	387	1853	1807	380	5814	93	2290	3817	556	1331	2743	1587	4316	4886	2273	5718	963	4619	2848	1730	5202	5708	4493	3513	613	3046	4548	2921	3437	5501	3527	3824	1354	5333	4204
Row 7	1167	5425	493	4983	5981	1824	1726	1567	140	611	3840	5858	1573	2459	2705	3302	1660	2412	1795	5173	3024	4841	3720	5945	2278	3221	3471	101	4574	2804	4305	5741	2229	4797	4723	2210	621	448	3776	760	1058	1616	618	2631	4074	3322	5933	5734	5734
Row 8	1727	4906	2758	568	2626	2703	2845	5847	173	2946	4421	2977	1250	4161	5206	47	2884	1415	667	3332	5191	1427	4389	806	2044	1020	4880	5366	952	4614	5100	2679	3519	1858	3247	145	4560	91	5992	4733	3036	4412	1709	4286	2573	915	4332	5456	2329
Row 9	4999	2787	1519	425	1176	2325	2469	2195	1205	1834	3147	5818	933	5826	3337	2791	3072	3482	1350	3162	3473	82	198	1884	1791	4484	4457	2705	2815	3912	5033	1814	699	552	2239	1874	2877	4707	4069	4081	541	1216	3898	1474	1041	1235	4264	4112	4716
Row 10	5613	1274	2188	5694	1472	4072	1485	5955	2528	4189	2770	440	3221	4583	1138	3773	822	3012	649	5528	1080	4730	68	2295	2628	1542	3336	3862	5805	1447	2577	5418	2721	4765	5111	4192	2837	596	4147	5364	4784	916	5804	2005	5499	941	5777	320	3952
Row 11	426	5848	5032	5155	5916	1327	1782	1457	4663	5643	1262	109	2220	679	2830	985	5790	1021	3821	385	5168	3185	5168	83	2988	1172	5582	3929	949	5902	1881	1374	5749	913	528	5664	2239	2310	1120	901	1953	2381	1010	4173	3059	3840	5157	2849	4860
Row 12	2978	3233	4028	162	2400	4110	3150	3571	3692	1078	4520	3593	2958	5893	3341	3870	421	3005	109	2731	4124	1010	4683	505	2020	2855	3564	5859	2012	412	4719	4989	3644	2746	5151	44	856	2300	3615	4547	3378	2134	2139	336	2027	5480	4206	2447	2484
Row 13	4314	5177	608	5324	3860	1113	1343	715	4676	1201	2726	5088	5920	1715	2732	2665	866	2775	3520	3166	389	2067	543	2523	4206	878	4549	3685	5083	995	169	3397	172	776	2720	4031	1888	4063	4746	564	5263	1471	5651	5182	3186	2383	1847	4052	5157
Row 14	5367	1217	5546	1433	1759	2068	5638	2637	616	3322	1720	1611	3490	5117	1783	4266	1836	5814	153	5899	4559	716	5162	30	367	4343	3215	2749	190	1266	1906	5556	2483	1451	988	4241	3519	625	878	4135	3947	2598	5746	1437	1714	1528	5702	3550	1341
Row 15	5855	3448	5899	571	2609	5929	937	952	3143	3686	1141	4409	5591	697	891	1042	1684	5132	4560	2309	9	2695	256	2607	2440	1692	4320	3968	1394	1870	5308	1248	5317	5207	1818	1926	5135	2755	2877	2278	440	4018	687	30	4714	1577	1072	398	708
Row 16	5631	2706	717	2326	2961	3324	4765	4653	1643	2732	46	3512	2040	1293	2829	1247	3110	4754	382	5864	1631	2659	304	5648	3345	334	4362	4922	1405	4759	5630	1036	1465	347	3361	4426	3670	2126	3078	5312	4858	3123	2824	897	4415	5653	2144	1525	4406
Row 17	2525	1389	37	5184	1692	5684	2529	2026	4046	1451	3430	2804	1080	4466	4269	1426	1826	2694	5095	3951	5771	4407	2808	2894	1231	3705	1309	883	5848	2833	5289	2373	4222	5325	1557	5914	5009	4085	1939	3054	5535	5369	5858	615	3834	4126	2040	5659	820
Row 18	1135	3610	590	5542	418	3483	772	4123	4791	1655	3971	1624	944	343	5846	269	1899	5759	5277	5984	1698	2331	5519	1066	2189	133	4899	314	2173	4558	1133	3307	2168	1723	2848	2586	5206	3620	708	3997	5275	4678	5620	218	5021	5465	486	920	5224
Row 19	5763	903	921	2094	422	1986	4282	554	885	4596	2726	5443	5729	33	1610	1451	2881	4195	657	500	4903	4653	5775	3580	4273	5993	2601	3737	479	3520	2961	241	4423	3881	2335	4844	5867	616	5398	752	5211	2124	194	4939	2156	1803	390	5036	5998
Row 20	1046	5536	4900	5698	5310	2480	3971	5302	5080	1707	5780	2599	4667	21	1022	2548	2355	5865	2414	2971	5263	3165	2181	1386	3359	1120	3541	5162	1509	2577	5159	2555	2112	4058	2253	1422	538	223	724	5617	1930	503	2216	597	524	3237	3144	2879	3102
Row 21	5558	5849	2364	2723	2030	3750	81	3149	1291	5242	4658	3867	4401	1212	5979	2459	3464	1400	2996	3686	2123	2612	5615	2626	4827	211	3150	2063	3355	28	5164	2912	5877	1528	5635	1906	5277	5715	5055	567	4957	3712	4434	3357	4923	4412	5815	2386	5811
Row 22	2810	72	1934	5422	5686	4560	4248	5897	1709	311	3251	1737	5475	163	1613	1003	5797	3519	279	5512	2573	846	4469	284	5279	1825	5206	3690	1640	1592	3501	4449	1663	5435	3871	1349	3994	2119	1246	5703	2429	4497	1439	1904	4659	3052	2906	4456	570
Row 23	3184	3968	3142	4030	2436	3426	3308	4261	2632	998	5900	4223	4499	4349	5886	3934	2219	1235	1927	4337	2480	1629	766	976	3068	2669	5635	119	5574	4091	688	2758	2058	3830	787	4494	1256	4095	2754	3887	5093	2653	2110	3591	1001	1996	1524	3220	3230
Row 24	3451	1556	5710	5080	2321	686	2147	4990	321	2266	4563	4411	2954	1320	469	783	2107	4962	2039	201	1716	5925	5294	4368	2035	2884	5369	4030	4408	2588	1260	1859	4143	970	939	464	1655	3085	5453	1975	5351	4016	386	2304	5336	854	3086	1442	5816
Row 25	5124	1643	1531	5049	936	5899	1084	3820	5267	5113	2228	1854	373	4086	5997	1342	5024	461	2996	2109	5914	4971	1459	3929	5356	3762	3264	210	848	4706	26	5972	349	1557	5021	1285	1455	104	5104	721	5216	1331	2575	5589	5417	2572	930	4441	3032
Row 26	3926	549	2945	2896	2008	874	2252	5770	4138	2462	617	2844	2487	589	3192	4044	5609	4476	5498	5712	3580	219	4928	4910	2793	4517	4327	5364	5446	2767	2396	3371	3316	5341	267	5324	214	2519	5093	4351	4980	5710	1195	1467	298	4386	5510	5907	2862
Row 27	5008	5619	441	5226	4547	5351	2019	3063	3677	1383	2508	444	3778	5879	3759	3118	146	3083	3332	2664	2175	1683	1643	1885	2877	3110	2183	1263	2619	2089	4124	1627	1708	4564	852	254	3915	2870	3317	1591	4253	5824	2035	2030	5703	5794	5148	5848	2876
Row 28	2479	2511	5051	4161	4154	935	1037	1263	3117	2300	3882	5206	423	5508	913	4987	359	1167	2901	3229	4483	4492	1481	4307	526	3511	4010	319	2658	3857	3194	5137	368	2244	3297	4521	3178	4334	5783	295	633	3664	5501	1056	3172	413	42	3530	1580
Row 29	2943	759	63	1434	2240	4369	1959	5750	2378	2278	2408	235	5472	1544	602	1715	4841	5123	4893	3175	4906	5188	3808	2570	4688	4863	5741	5101	4905	3270	680	1847	4029	743	3280	268	5111	5239	18	1489	1517	2425	1723	988	3969	2325	2702	2809	1447
Row 30	1595	5984	353	782	3791	2922	5470	2653	2662	4570	1557	5932	5250	3403	3960	5992	683	4228	5103	5922	4245	591	1438	669	2314	2426	4638	4639	5128	1446	86	722	1429	438	1504	5220	3359	973	1872	20	5543	3429	5952	4793	832	3912	4785	1515	2139
Row 31	3887	1436	383	4478	2874	1052	791	5299	5689	5429	4426	1135	5514	5148	2564	5951	651	1783	3310	1624	3654	3330	1167	1083	3281	5959	1914	1192	4743	3428	3330	2629	4864	3713	1106	1737	4764	1897	1036	4452	1325	5461	5586	839	4608	2149	790	5259	3931
Row 32	4099	882	1585	1428	2048	2667	4709	2007	4581	5901	749	2009	3230	3378	872	943	4484	2608	5706	380	3643	4157	1705	3104	3743	2543	1712	5891	3333	970	3822	1431	1851	5406	2859	3899	2073	1568	5905	653	1468	654	2662	4698	4031	3533	5640	2514	141
Row 33	5345	2893	3784	3502	4598	887	1244	1141	2598	1135	4473	3567	4956	5904	5418	4361	2762	3317	434	4330	3221	1087	5797	3874	3748	4494	1905	1280	4134	4418	1421	3479	1311	5204	980	5908	90	2224	1048	2688	3358	5521	255	2314	5424	5672	675	2186	2988
Row 34	1108	515	209	2195	312	4083	5942	4806	5987	1222	2939	4404	2642	417	5715	1845	1397	5622	1935	3621	670	4623	979	191	4877	3292	5614	4548	3966	1799	1536	5074	2314	1744	1268	2625	5826	1209	1430	5812	2431	4369	4216	5073	4786	3930	918	183	3552
Row 35	2852	3803	4222	1474	4782	4412	350	2073	4026	4898	39	5825	433	5112	2138	2177	380	4763	2003	1589	193	1815	4019	4561	30	3091	3347	3960	4008	3529	1512	860	1332	5734	2334	113	4146	2684	2186	2171	1581	2224	1996	2014	1336	4134	4191	1715	2896
Row 36	193	3303	3089	2007	1322	1650	2037	4412	4996	5997	2420	2524	1508	3280	3855	1242	5613	3968	5387	2297	153	1558	3878	2377	3553	5891	3712	1686	4082	5426	4582	4275	2729	1670	281	4050	3319	2318	2462	2315	2314	4881	4838	3822	2160	2693	5063	1773	661
Row 37	4449	4069	813	7	1946	3189	3559	1837	901	5245	5919	327	3826	4193	3055	5496	4473	1104	2814	791	3565	5128	3104	2446	3966	925	4606	659	5987	378	1319	4436	4447	2132	4442	393	5321	2000	2229	221	1244	2148	547	5070	340	3602	4565	4813	4706
Row 38	1379	5603	2271	507	2706	4716	4473	3631	3321	5131	3617	3699	450	2052	2146	2581	494	2538	1902	2493	4767	2123	3737	914	2669	2807	1254	271	1371	66	4976	2750	5668	1246	3256	2374	5962	1729	4	3282	859	3621	981	1309	5673	3126	3890	166	5664
Row 39	5791	2659	4430	1913	396	5344	4582	3202	597	4853	4573	662	3828	1322	330	5074	4578	2703	5035	306	2707	2316	1165	327	3297	2474	5999	423	363	164	86	154	2823	4516	2066	3218	3860	648	419	4456	5500	4992	5118	3328	314	5447	2401	4891	2150
Row 40	1435	5197	4857	3751	362	5183	1048	2835	5182	1470	3198	5346	1556	3351	2168	71	5417	5385	3930	65	5804	2386	5564	4795	1503	2892	5108	950	5292	3999	3100	726	3196	1956	4477	3558	1139	5524	393	320	993	3590	5666	2549	941	1833	2619	358	1218
Row 41	549	422	1021	2934	5986	5816	4437	2877	4924	5387	2169	2923	2487	2895	118	4443	1371	3675	5581	895	4068	5901	1888	1658	5566	4436	2598	1399	1054	2955	2616	1603	3377	3637	4536	3362	3453	2973	239	2376	2360	2407	5298	4846	5301	5416	3288	672	3091
Row 42	2869	1566	1158	2770	3453	2815	2335	1888	5413	3734	2941	2368	349	4544	5744	3986	3080	3106	1438	52	3345	3814	2412	5751	3112	1257	5052	2528	4545	5723	5618	1413	1288	776	4182	4741	3591	517	628	3004	4250	3569	5371	4599	2112	5115	2585	5191	2220
Row 43	4023	5243	5565	1836	1654	5315	4948	2910	4366	1475	1455	4089	1093	2867	5377	1869	1049	4117	5460	1566	4745	2463	5815	2313	1833	4414	4425	948	998	3615	3168	5021	2858	2732	857	4511	2046	5804	1421	412	1279	2875	4501	2371	5742	3877	4240	791	1994
Row 44	3699	2356	738	161	2171	3050	1994	584	1475	2941	1582	5089	108	602	1947	2839	1458	457	4885	1262	1878	5296	2540	4752	3797	4911	4494	1673	3151	5284	3666	849	1640	4404	1009	3810	1453	3003	4393	2928	5943	5975	2016	50	577	3962	2889	2035	4419
Row 45	1773	3296	296	1069	5836	5048	4865	4747	3542	537	1897	2826	4203	2745	4465	2606	3754	2274	4059	756	667	986	698	642	3002	748	1218	964	3636	3252	5382	5408	548	5678	476	384	4725	5341	5130	2267	5877	1026	5092	4080	3771	3556	685	1525	5830
Row 46	4744	2280	496	5730	2978	1137	2731	3726	2355	3695	1362	5607	3076	770	154	2754	1246	538	1479	586	5667	3745	462	693	2836	4542	4464	392	5227	5988	221	3970	2268	717	3700	5246	1854	430	2971	4208	4125	4332	3814	1201	5101	3968	3954	346	4505
Row 47	5432	931	4172	3177	1393	4865	13	5935	3328	404	5161	3316	624	3131	5583	1341	830	4828	3194	1260	1798	1401	5384	130	5215	584	5231	3183	4537	5577	1688	3969	508	5859	1145	1900	4724	1157	1834	2051	1561	995	5366	2184	4125	4948	3524	4954	3776
Row 48	718	213	5574	2118	5596	5704	1333	180	4934	4515	4716	4510	203	2685	5017	62	3829	917	4785	4986	2751	835	546	3745	201	2730	1869	5149	254	823	2924	971	1035	2498	3089	631	2201	4422	810	1134	2937	5526	5644	3139	2211	4660	3200	39	5577
Row 49	1984	5025	2327	2819	5571	72	3019	2300	1941	2167	2554	2763	5091	3525	3798	1588	614	4429	3788	5035	5238	4922	1971	4764	4565	5109	974	3225	2308	1013	2801	4292	38	5128	1110	5608	5200	4128	1908	1140	295	4462	3903	5385	1986	1700	972	2599	128

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.