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	5480	1741	5222	1723	1907	4615	1586	4897	737	5048	2990	3150	2171	5423	5430	4008	3503	5129	2699	4466	2132	1220	551	5636	3375	5191	3032	2871	435	3919	2091	2622	1720	2124	1973	795	1065	5472	1724	4808	112	5774	3399	3472	1435	4895	3378	485	513
Row 1	321	1829	3463	3206	1033	2330	3720	1912	4631	1931	810	3002	188	4998	5819	5056	4072	289	2038	4853	944	4730	1679	1421	1069	2218	3480	2502	5535	1539	4889	3584	1237	1916	2657	1822	2255	1023	5758	2696	901	5294	1015	3149	2649	4896	3363	1166	2096
Row 2	5790	5986	2758	5678	2673	1517	4100	600	3176	1992	338	1812	3026	5841	1555	2527	1330	4901	5423	1084	603	4278	4086	1328	3911	4900	3869	2398	328	1110	1340	2367	2581	4555	4651	5067	5050	2106	5726	1061	273	2711	5311	825	1521	3504	3586	2489	3231
Row 3	1162	4267	1236	3161	5951	3120	4051	431	3685	724	193	2596	4811	1917	5368	4595	2202	5681	2563	5202	1623	5160	1778	4296	620	5665	2941	3510	5357	688	503	4389	5729	504	2336	5992	1178	1177	5020	5506	1116	1595	28	683	812	3664	4119	5923	460
Row 4	3010	890	3854	5679	2343	4455	1059	4871	4049	2769	4509	3111	4168	211	5269	2632	2282	998	1088	1402	1383	443	914	5135	3555	4848	4549	2375	2440	3891	291	5988	5680	351	4850	2187	1058	845	929	6000	2335	421	5919	5846	1053	5038	2599	4596	2498
Row 5	4222	887	3453	956	2439	5017	3331	692	5911	750	3550	5611	5716	5585	734	455	4613	2183	1585	3750	4339	2007	4758	948	4215	4574	2539	1933	1446	5460	2949	4865	186	576	4509	4743	5592	303	3238	5093	4215	716	1354	919	3465	4866	5011	863	3584
Row 6	2490	1757	2690	1835	5189	5127	59	1927	34	2031	1559	5447	4175	1098	2311	4332	3499	1908	3051	1364	3484	1827	2398	1341	2060	5004	4204	361	5170	2396	1271	912	1275	271	3858	2477	3246	2324	4259	1492	1794	132	4786	5200	2513	892	444	5226	2157
Row 7	47	950	3481	357	366	3453	5731	4545	3536	4615	2749	3580	5436	5514	5577	365	3391	4911	3651	3848	3276	4945	1485	5931	4106	5255	232	2338	5973	3387	5174	4403	4815	2862	4270	863	3694	5755	4577	5265	4294	2615	4237	1990	2374	4589	796	1124	3050
Row 8	1821	479	2723	3282	2571	5752	3069	5586	3255	359	2991	114	3765	5937	5956	3940	706	5532	1407	754	595	2693	4233	5770	4759	2707	5540	3788	5684	3097	5932	1178	5100	4936	5341	307	3710	1306	799	4097	4284	1216	10	873	2952	2428	84	1284	33
Row 9	853	1925	3564	106	1542	5688	1562	1891	2887	1893	4033	465	2925	4205	5293	3870	5221	4442	5101	2547	3079	2057	3086	4625	632	3738	4134	1315	3311	1325	2678	1232	670	5500	1579	1798	5387	4669	2370	1489	5843	1333	5175	3600	3255	5627	795	1806	5170
Row 10	3620	1115	4691	21	76	1695	2038	1308	2233	1223	1179	2834	1601	350	1997	3468	5500	2781	2591	5572	4466	4294	3401	2711	4036	4536	2532	1932	2537	5015	1519	4988	5036	2905	3648	4097	3058	12	4340	5536	783	4579	2081	2837	525	1004	823	1611	2826
Row 11	2907	4886	1869	4266	5694	5617	115	3831	35	1622	2168	3621	5734	1974	4631	3594	1577	2393	2056	2382	2918	5549	49	2144	3336	532	3879	1195	2458	5153	2844	2163	899	230	2743	5359	1565	4670	4339	2354	874	3762	3079	1971	5905	645	5617	2769	3749
Row 12	5591	1916	5778	5857	1921	5627	2087	3366	442	2646	2082	3113	5734	5567	2345	488	3814	2033	4502	310	4436	456	3272	5132	1261	2253	4773	419	1810	3865	3047	4005	997	4386	390	2470	4157	1313	1890	3004	4503	4142	660	4040	2324	1935	1226	5646	5966
Row 13	287	2612	4674	1330	4714	692	1222	5401	1589	5915	1943	1544	5572	3380	741	3495	359	5931	404	5043	3332	4064	2679	147	207	3947	5489	5423	4845	2696	5384	3920	2797	2715	2193	5556	395	2852	3925	2083	2667	896	5179	4268	3316	3845	579	536	1340
Row 14	1065	1186	154	3892	1063	3313	5552	454	2369	4613	2546	288	3091	1418	4043	889	557	3258	171	4156	2811	4389	2774	1867	1609	4337	3519	979	4196	5915	5055	5816	5262	227	4540	5301	2689	5881	1232	5024	2403	5888	5521	5774	792	2028	3644	2265	5447
Row 15	4734	5636	233	3357	5028	3722	5577	1662	851	5302	2246	2597	190	929	4462	5044	834	1167	863	1367	2670	1491	4373	5201	275	5985	2576	675	4631	577	5899	4506	3372	1098	1509	3952	2986	4012	3905	3320	4685	1420	4259	3291	5931	4685	5752	2820	4552
Row 16	4221	477	2082	1644	4012	3353	496	4182	5067	1722	4688	5792	861	75	4657	5903	3672	4317	2361	5543	4965	3225	473	1573	3033	3644	2101	3815	2779	2743	5808	2164	386	1641	5314	5594	2272	1222	2743	492	2713	3348	4118	2455	1808	4304	2613	513	5624
Row 17	1762	3906	784	3122	1954	3844	2332	1749	1391	601	3593	2577	2529	235	5284	3760	4182	1483	2965	960	2998	37	5216	4778	5589	635	2422	3869	1248	174	1273	1561	3044	4440	5289	5583	5400	5103	4012	848	5316	5527	1784	3478	1274	3566	2744	50	4612
Row 18	5143	3682	5643	3917	817	4311	1368	5156	81	1072	1457	5341	2269	800	1340	3972	491	1731	1468	5986	3816	3574	5136	2440	1155	4408	3657	4113	526	3369	5374	1326	5427	4871	2750	3904	4013	5669	2543	4366	4853	7	64	382	4444	5456	501	5433	3249
Row 19	5852	5037	5078	1481	5445	3509	2809	1669	5160	5005	900	1667	89	2045	3907	4693	2245	2855	1222	1113	2748	4503	3469	3368	1962	4957	2205	3643	2230	3812	3742	3955	4054	477	5082	5313	4318	991	3208	1179	3600	3118	1083	578	4987	1508	5610	3735	872
Row 20	4292	4207	2553	3443	4444	5319	740	1334	3177	1240	4667	3954	1528	2559	4686	1780	5031	5177	3969	818	1710	5415	4603	5669	2433	5249	3851	3155	4834	3424	417	3207	3211	3853	5346	5141	1781	2676	720	5002	3606	4750	4906	105	1118	4463	2959	5939	3835
Row 21	2556	132	4138	4423	2844	3176	4454	660	5565	4625	5910	2878	28	3697	3372	10	971	532	303	3028	401	5641	4250	785	4749	985	4021	962	4814	689	5130	3965	686	128	2310	260	4893	4154	888	1586	2047	323	3400	3383	1113	169	1007	5529	1789
Row 22	3691	2324	1774	1927	1819	5558	638	2673	3391	5123	5461	3456	689	778	3019	1770	1507	4210	5064	4226	1744	2117	3986	4776	3766	311	5105	154	2868	2360	5065	2141	5249	852	665	2700	5684	2452	4744	1374	977	2377	4555	5606	583	5083	438	4620	5184
Row 23	1953	229	2345	553	1598	3098	5042	1409	4886	5196	2675	5400	697	789	2237	4399	1867	4591	3463	1902	2451	471	2452	186	4372	5294	2897	457	667	2879	4594	3742	261	3796	4005	5992	3740	4304	3947	643	5841	2827	621	510	2128	5908	1308	1451	3651
Row 24	3909	110	2828	1337	4009	4506	2809	2923	1186	3550	4010	5611	4831	1005	256	5145	3737	3471	210	3235	5984	3695	2154	2193	744	4191	1820	4900	464	1917	895	2205	15	3376	3539	5213	3031	4040	1222	1327	2510	527	2493	1353	3622	1318	3569	2054	2859
Row 25	3333	4590	508	1246	695	5025	4409	3470	3535	1703	4172	2397	5300	5880	2926	5822	4755	5506	4864	2587	4180	2318	4851	291	5333	3600	4634	3500	3138	3184	237	5638	307	5059	1149	4857	3719	4905	4090	3460	5826	3023	5527	4490	4292	2979	2841	5864	638
Row 26	3906	1205	756	1908	3733	4493	4093	3137	1123	3536	279	2497	4258	4260	4035	1812	3723	5836	130	284	896	3807	5398	705	4328	3806	3235	5352	1666	3639	665	5297	4497	726	5328	1845	4080	3339	521	319	2514	447	2462	3861	2968	2219	2648	4221	1497
Row 27	2558	5719	4466	99	2353	4604	4052	1887	1562	1960	4850	4954	2955	2464	5404	5251	4642	3240	3810	4867	3441	3396	5317	4844	5315	4160	1713	5980	1810	5343	3732	814	2506	1899	4166	2609	1455	5167	2903	2984	2195	689	3557	2215	1939	1578	498	5103	4098
Row 28	4853	4740	5077	2130	5929	3311	226	2072	3835	1176	2206	4017	3029	5591	739	4628	4837	2377	2843	1234	3419	699	5472	3767	2927	1789	2461	579	598	4606	5255	4694	5925	711	2528	3911	3858	4654	1784	4394	957	3002	4539	4074	4207	2457	4725	5536	4323
Row 29	5477	1590	2686	5482	2981	928	2696	4968	5028	228	510	942	4216	3866	3309	5844	5464	5792	3333	1478	226	1256	1332	1881	3423	2006	4322	2205	1961	5459	1286	2056	5670	197	645	146	642	4770	2672	4179	1716	2604	624	297	2630	3998	561	5215	2777
Row 30	4848	1229	2292	1136	2015	4523	5357	1782	4154	4158	4306	2666	3671	367	1650	2628	945	573	5901	5989	5232	5301	17	4142	2669	384	426	203	1424	5085	3994	2603	5047	5841	2108	5601	4193	303	1824	1311	5340	1152	234	822	2058	5583	5040	4773	4957
Row 31	5285	3830	3323	866	1739	5701	3518	2340	5744	5781	2264	3934	730	3473	100	4786	1028	2597	5557	389	580	2847	4551	4732	2059	4744	4111	3356	891	2952	2774	733	3839	1411	4034	5347	187	2996	3799	3902	357	1631	4687	5542	1912	5030	5636	3889	780
Row 32	595	1643	1755	3220	4408	1016	4923	4346	3531	2699	4493	4279	2207	3736	3801	2429	704	3025	3284	4813	680	62	3103	4073	1954	421	2292	2187	5897	5538	5381	3829	1857	660	4580	2632	4296	2747	1115	138	127	5346	4836	3627	4573	1267	3609	1922	2677
Row 33	5093	880	4607	2713	606	5106	5501	5146	5292	3770	1687	5687	2711	2823	5330	4377	4614	2174	265	127	1270	2621	3546	1155	1748	3246	3824	1769	1924	609	2183	1222	3304	3500	4968	808	5327	3199	794	3565	4421	1471	1346	505	3136	5917	3791	5739	5238
Row 34	881	2536	2503	2471	1102	2239	3507	2202	5112	3031	759	174	3212	3033	2243	2564	1075	4573	5248	4780	5283	1155	1091	60	3132	3710	1760	5475	2501	5628	2774	3512	1550	3626	168	302	5401	743	2804	1723	3182	1252	1940	3445	475	385	5906	763	4410
Row 35	5972	5404	3398	4574	5414	2212	5752	2820	5761	4380	526	106	2289	5663	2403	3403	1678	1499	183	196	5791	441	2970	1301	730	479	2956	2483	818	260	5631	46	3737	3256	3518	5919	3207	2501	169	2210	4332	943	345	1760	4105	602	3300	68	1669
Row 36	1168	3978	5076	4297	4336	493	3532	4470	2833	4373	4429	2258	5079	4403	5854	1183	2749	5033	5631	4138	4594	2722	2412	853	332	5618	5432	1899	619	368	5431	4646	5348	4623	1973	1723	883	5469	775	4377	2061	4573	1483	5077	1331	1085	2124	1263	4691
Row 37	1011	4073	1056	4750	5952	5719	1135	2684	5042	3469	5693	3054	3258	38	5512	3476	2382	4643	1882	4865	4889	1748	3800	1990	4333	3294	4336	1775	1724	4028	5035	1727	3634	2650	5867	2791	286	1207	5973	5157	654	3418	5021	5742	5267	3406	2865	4786	5406
Row 38	1571	460	5180	3418	1837	594	4259	1111	437	4005	1389	1404	5849	4572	1957	4266	4432	1036	462	2487	5019	224	5975	4363	370	3008	5767	2963	5602	3811	1294	2658	2122	5991	4610	2115	1770	3514	5614	127	4229	2297	4583	219	5621	2289	2198	3923	3481
Row 39	581	3879	5321	4033	3385	5048	754	1633	3561	514	4216	1656	1345	5507	5102	2081	1089	2093	358	2936	2604	4759	666	1689	2674	413	4884	443	4776	4787	1533	5242	491	2910	2685	4489	4096	3550	1970	779	1287	3923	264	4867	2737	722	5076	4769	5582
Row 40	2426	3029	1837	4326	2798	5778	268	1684	2047	666	775	2314	3050	4804	5071	4892	1506	4549	4256	1024	559	4772	3651	5460	3373	2316	2885	757	882	94	568	4843	3052	3048	1448	3558	4651	4995	856	714	4904	5011	5091	1793	105	5833	1553	107	5831
Row 41	573	2968	588	947	2074	3281	4880	4624	2169	5080	4074	2002	574	4616	1785	69	2179	4478	2525	3767	3874	3873	5583	775	4702	4625	2691	1551	5921	4898	2684	677	5759	2906	3884	3411	96	5620	3633	5913	4805	3544	3079	4112	4294	2647	620	4762	5006
Row 42	2543	1025	1717	408	5706	2704	4164	1940	2102	3348	1263	2270	5691	2898	3041	4255	1074	3487	4048	4751	1741	757	1947	1087	1824	5236	95	3177	789	2886	177	1959	4277	869	3422	32	5402	3168	3355	2343	5296	3823	5990	2728	1012	4392	5753	2745	1694
Row 43	3700	5385	5946	2816	4972	2286	621	2219	783	5555	2784	5119	4185	2667	3708	106	3587	5937	2091	1913	4959	2314	4577	5728	4988	3985	1547	2803	636	4493	2112	305	742	2675	1179	4935	4263	3117	2989	570	2486	5914	345	604	4677	1460	5501	3450	1438
Row 44	224	3401	536	4451	4194	1285	3502	4382	4218	219	1445	2269	5749	319	4725	2354	2624	2978	4137	3299	764	173	5357	1989	2196	3389	307	1804	3750	4347	2175	1262	4228	1439	1996	788	1310	5148	5740	1455	274	5267	5226	5197	1070	2711	5698	5825	5582
Row 45	674	5875	5559	4976	3178	1620	4924	2252	2298	5333	3976	3153	2090	4394	5325	3926	889	3065	4074	3772	1569	1174	4166	2482	2478	3302	1617	2357	4916	4828	373	1725	4420	621	418	925	4798	3386	2907	4494	5448	601	2075	302	65	2804	4490	2283	2954
Row 46	1828	4474	5739	1753	3222	470	2442	1954	5811	1322	5785	3113	4223	1637	821	1317	4971	5548	512	1508	5229	2029	1384	165	2246	3657	1298	4615	6000	2916	5154	3556	4419	4004	1732	981	771	5731	3141	1985	1209	2519	2504	3780	3966	1425	3474	2548	1325
Row 47	5096	3283	5835	5595	928	1195	388	4834	1601	4190	1205	4806	5866	2038	1725	5257	5692	4710	4849	704	3721	88	3563	2438	5767	2517	1069	3909	5501	5469	5818	863	2921	2538	418	5595	2185	4136	494	5059	4867	4724	3530	2085	1251	2717	2708	4686	3780
Row 48	5701	4728	287	3716	4628	5144	1793	1960	2877	2462	2618	4347	4056	1446	5668	2516	2234	3993	1310	3468	5902	2670	5717	1260	1347	1906	1735	5541	1128	2035	3292	2021	3732	5456	4661	4623	3295	671	4139	1906	1252	953	1877	5902	5538	5289	3134	2016	3376
Row 49	4556	5454	4575	4094	1787	1503	1502	844	172	253	1501	3431	14	1815	496	5839	4041	4871	3187	5318	5358	1504	5542	4976	3984	2869	959	3420	195	1143	2340	2906	508	1845	5261	2413	814	519	4037	4868	284	137	2481	1644	1744	3309	2624	4845	3981

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.