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	1901	2077	5737	968	5390	3401	5780	2565	3575	3845	4152	434	2315	872	3452	1503	1374	4295	5561	2638	3409	3603	27	3023	4506	3483	495	2304	3695	3153	5384	973	3597	3028	5694	4176	1043	2962	2834	2725	925	4568	5113	1279	4456	3262	5364	5269	746
Row 1	5939	2528	5383	93	1197	617	2581	5471	2472	5188	3918	3163	4735	798	2994	5006	160	3197	1081	311	3470	2574	2641	100	4943	5516	580	4382	3527	2721	3849	3260	5338	2077	3878	896	5838	1542	631	2089	2815	1406	424	804	1709	5479	4915	5602	1819
Row 2	1263	4929	3314	844	81	1280	765	3258	4168	637	1820	4167	4893	5301	2798	3777	2151	4536	1210	2598	4483	138	1687	2273	2091	3631	5456	273	4664	1580	4587	1009	2177	4551	1450	4042	5724	3967	3101	5291	5291	220	5219	2771	5514	4537	1422	2436	4636
Row 3	5497	3784	5000	747	5286	5642	1599	4179	1449	1819	4491	5859	1880	3790	5393	718	846	4669	5398	978	4777	4276	4306	1255	5425	890	3059	1279	636	1202	5977	2425	2246	5274	3736	622	5280	3367	4369	5218	3786	5103	3161	358	5941	5668	458	5459	5663
Row 4	3025	5535	3601	1390	4716	5715	2539	5284	1822	1637	2731	2595	4099	5843	3239	4242	3711	4866	183	4175	1852	5996	2138	5545	1321	3093	2633	5543	2010	5796	5237	33	2021	4521	4413	871	1191	3094	1068	1045	224	1295	2120	4336	527	693	4494	88	5463
Row 5	1352	3181	537	4815	3080	3491	4634	2165	3591	4275	1452	5747	1555	489	5899	1879	753	918	5942	2075	1543	1947	4679	4251	4025	4747	553	2316	3650	1897	2093	4836	5370	2813	2460	4866	5630	2711	1301	5182	508	5844	2998	2554	1131	1370	3471	3295	1138
Row 6	4338	3741	1429	5631	5763	4025	3301	3896	4236	3655	5220	5722	735	1346	5878	4082	3270	648	1150	391	5845	3397	4700	4561	4865	3556	5553	3797	4739	3260	5300	294	5801	3371	5166	5976	1157	429	2207	3085	4023	1143	4318	1774	4046	1116	1291	3151	232
Row 7	1523	107	3131	5456	508	645	4254	2688	1672	1552	1356	215	3004	5645	385	5282	5605	5513	4083	3940	4227	1198	493	1892	1485	4944	1224	421	5501	3269	5621	3434	4375	3529	5698	1044	4710	3162	1233	2178	1193	2688	3966	4891	4843	734	4466	3791	3185
Row 8	5491	1578	3619	352	4094	3159	1620	688	3047	4717	2519	5094	3872	4498	5400	3060	1238	1622	1532	2704	3730	1965	2276	1156	1277	410	3486	4138	1870	5960	709	4213	4534	156	5280	5947	5469	2396	1702	5798	2482	667	1728	4692	4272	959	5980	3680	5623
Row 9	4525	2187	3280	4726	3141	4384	4173	3572	1840	5119	4741	442	2414	1188	3199	634	3548	5254	4821	5822	5642	5907	2096	4760	3700	50	4380	3392	5298	1119	5908	4821	2619	5230	4862	4057	198	5020	2729	784	2887	4869	651	2436	4981	5918	5622	4441	635
Row 10	1430	2362	5027	1129	1674	5583	7	1487	3747	4351	2284	5478	3676	606	5848	4692	3954	2941	1926	854	1447	5594	2468	3400	305	3941	2404	4102	1136	5089	3548	2114	4283	1521	708	692	2944	2259	429	2625	1469	569	2838	3865	5649	3464	2430	5500	5583
Row 11	4887	4253	984	4602	3986	3749	55	382	1428	1073	1573	3116	3458	5151	5976	2676	5209	2196	2894	1158	4273	4766	2035	4786	5515	2584	2839	2618	4843	2584	5549	4868	3329	5082	4302	2252	4369	2511	5540	3183	5965	3497	1007	2291	4516	3426	4737	3455	1807
Row 12	3997	4454	3562	4634	2231	3934	245	3592	1766	81	1459	3480	5677	3190	3636	574	4078	5467	321	5220	5295	4470	4712	3045	645	1527	1925	2899	560	3680	4420	1721	3942	421	2306	2771	2866	1987	3100	1805	2698	5369	1862	3491	4395	3176	4870	5146	2281
Row 13	4350	87	1910	5385	1305	65	475	994	5093	4751	348	4135	1569	757	4021	2336	461	2282	3317	4692	174	2141	363	1740	3583	2486	3993	2397	85	1968	285	1021	3689	3387	3869	1041	568	1554	5378	2441	2105	1365	3255	4720	4668	323	1144	3732	3427
Row 14	2684	4564	5943	4887	2025	5487	65	3433	2517	3572	1119	4239	2602	3505	1931	4853	3372	933	30	4129	3380	2363	2293	5181	2677	534	5130	5354	1725	1400	3282	4591	3698	2809	926	2830	4212	4546	4857	5017	3558	5669	4961	1130	5351	5278	2875	745	1927
Row 15	4872	3956	4695	5632	4307	5390	4255	923	2476	5905	568	889	4315	5819	3925	3774	3872	5377	150	3969	4963	5230	5740	4800	3376	1772	2909	4722	2450	5802	1491	877	498	2907	2237	1969	4840	4729	1231	412	3638	4976	896	5417	526	678	5928	2390	5461
Row 16	2016	2333	2759	3088	3427	3056	1178	2560	4536	4521	741	4722	546	407	641	1072	3261	3758	1340	2506	5296	4473	2097	3734	3544	2905	600	1112	602	1417	4318	3257	3561	5716	5762	1017	3957	3893	2684	2365	3235	191	2948	3410	5943	5357	5288	3970	1913
Row 17	291	2441	3838	3771	614	5691	1342	3735	5650	5061	50	1300	1377	3271	3238	5233	3887	2793	4793	3705	1433	5072	3442	3532	1532	240	5383	363	5308	2273	3349	5224	3325	3946	677	4003	1900	1718	2800	1927	1318	1383	4419	3027	5291	5029	4927	411	454
Row 18	2582	4576	1207	1174	1306	2887	5680	3691	5649	3831	5517	2416	4916	530	1366	2999	2840	4254	2616	4008	558	1458	52	2056	3930	3526	2567	558	1836	305	3972	2630	4699	2686	5227	5716	4358	3235	1501	2912	459	3662	2076	4240	4501	4866	3087	3503	3289
Row 19	3166	810	5611	5289	4699	5768	508	2864	4360	638	2036	5541	1223	1685	3764	3273	5318	3109	4009	2619	3556	2367	3582	1871	4572	1961	1925	1001	346	3099	469	2964	2697	1269	2969	5186	720	2122	4489	4219	4135	2729	2677	3748	630	2271	5122	2392	4191
Row 20	5909	4637	4483	1784	1276	4950	3533	1516	3531	2063	4585	3075	2599	1743	5148	3952	3268	3781	4869	3372	165	251	392	5078	2041	4624	5017	1785	2905	2683	3154	2125	507	605	2300	1954	5284	5233	1793	5411	3221	4488	587	302	613	60	843	2451	3443
Row 21	4029	2471	2032	245	5957	3205	4954	3487	2717	3282	4433	4757	3607	461	1364	5345	3301	5661	3064	4085	185	5593	3915	1489	539	2912	2980	1460	448	4692	4675	3254	1562	3078	3698	3178	436	74	2282	3318	5606	1481	2473	1464	5049	2703	4336	3288	5209
Row 22	2246	782	2102	3346	3488	5861	3157	5779	3254	2759	5322	4238	1552	5981	5766	3456	3700	2119	4504	3176	2565	1164	980	123	3730	5979	1529	4884	97	4901	4718	4430	4993	3046	1273	1505	4718	4543	4817	4118	3610	1257	2421	1358	1478	1443	2497	486	5691
Row 23	5183	320	5823	5031	4637	5530	730	1789	1105	3149	4335	4466	815	1556	4374	1841	4752	1498	5141	3776	5429	2319	2771	3868	1689	2582	1184	3579	3142	1569	4472	937	5046	1717	1871	4158	3407	824	563	5376	450	5589	3438	4560	3632	4603	5528	1160	31
Row 24	1295	2534	1144	3965	3768	2253	3167	3421	3213	1903	1447	2238	745	4407	834	4771	1829	4454	3141	1383	3356	4725	3794	1723	4756	2604	1105	2680	2407	4938	3797	4551	4582	4550	2222	3181	1128	2410	4441	5730	1624	5701	3890	932	1362	2321	1259	4648	2421
Row 25	1526	1462	228	2347	4873	4345	2619	5982	4316	736	5857	10	790	1136	2848	2689	31	3770	3793	1810	5292	3795	3610	1687	2234	2836	1537	3233	2937	4205	1733	904	3581	4363	4350	2092	604	3162	5388	3884	5937	2322	4616	861	3696	5994	5855	3540	3918
Row 26	3360	743	5351	586	794	3289	1983	5926	5584	1348	4815	3064	2298	3190	3157	3091	163	1036	4281	2808	4433	1237	1012	4516	5606	3955	1518	3520	5875	3812	5528	1323	2474	1539	3974	2118	52	1673	2372	3896	1307	2268	4760	593	2460	3263	1510	5346	3238
Row 27	5007	5567	4806	2280	2198	5618	3291	3100	3591	3651	386	4797	5820	1922	1522	5970	2280	522	270	366	257	4426	2684	2909	2187	3729	2658	2370	3806	1631	2186	5696	3494	4917	4204	4042	1565	4585	1012	3056	5106	812	5878	1873	322	5037	410	3439	2720
Row 28	1806	1874	1155	4729	5903	187	4625	2762	1021	5143	5234	350	4390	5342	1719	2617	524	1414	4545	3239	2735	2150	5305	766	1928	5615	1840	4916	4319	3745	117	1082	2229	1379	2571	1611	1339	4125	5186	4516	2094	2070	5483	3336	3588	288	1912	5028	4230
Row 29	219	4539	5989	3923	5555	1372	605	638	5914	10	5034	4387	2270	4568	4797	4503	1781	3915	1249	3743	3563	1833	1194	4356	4766	3372	2642	3428	4688	5630	4900	636	1479	4758	2226	2157	773	4859	5089	2572	2295	2121	5383	4393	285	1856	667	5232	406
Row 30	2666	1408	1343	3315	4145	3058	3928	4256	5087	667	5052	1113	132	631	5085	1467	1320	4740	1360	5277	4993	4504	4658	20	1751	2886	1131	1038	2241	2536	5808	2631	1038	5076	1638	3038	3923	374	1788	1825	5569	2978	3668	2980	3084	5075	5223	686	5954
Row 31	4865	706	856	4519	1500	4535	239	3018	4033	1244	1694	1246	2666	4233	5651	3304	1595	2421	2551	5172	116	2138	5171	2019	2701	2425	1672	3644	1831	308	3805	358	248	5514	744	1468	3060	803	3394	5542	3220	4721	1641	497	1894	4714	5375	2888	206
Row 32	4102	370	5391	4761	1413	3376	3845	361	341	4467	206	4227	4861	2636	5600	4069	147	5193	3560	3093	3438	2811	4342	3939	1832	2271	899	2689	790	3319	2445	5343	3678	114	1847	5075	3699	2069	2934	1945	3727	3108	5447	4217	10	5259	1038	1622	5028
Row 33	4531	5759	2195	5842	3400	759	3747	4933	879	4687	3943	5753	3896	2434	3480	1300	5998	906	2106	4138	4320	3696	4259	3879	476	1369	3794	5652	325	5266	5187	2395	5703	3632	3427	1277	1784	1274	1880	2442	2806	5530	4329	3768	5019	3453	3993	2000	3103
Row 34	1768	5915	5613	2006	3015	40	2148	4583	4265	4962	5352	1297	537	3049	2061	3794	1094	1832	93	1201	2944	701	100	5313	2385	1287	3662	161	925	1392	2151	1992	2644	4231	3174	5448	5165	3055	4966	5205	3175	4116	794	5881	5276	5157	791	911	4761
Row 35	2558	614	4782	5356	3587	3945	3056	5411	2127	2362	110	3874	2267	2078	2060	917	1740	678	2499	5401	2361	520	2330	1587	4286	5536	5019	2279	1568	3989	2946	5305	4399	4780	2676	3317	4109	3988	4401	2572	430	1556	2338	4634	5427	109	2872	1522	4655
Row 36	1057	1720	2968	2110	5729	4070	5597	833	503	940	2619	2972	4423	2001	4628	2289	5574	5967	690	2649	5466	1416	119	3860	1780	3337	5292	415	5736	1471	5502	2666	3567	5076	137	1542	2837	3894	2830	3109	2261	585	911	1403	1306	3094	2227	1872	1768
Row 37	3345	2322	3821	5869	5007	5077	2401	2382	1056	3709	4922	727	5338	3578	1872	3869	3960	876	5935	5813	2343	5347	4476	3097	4367	689	1373	2822	5196	1583	5350	4985	471	362	867	5161	5261	2364	4021	1368	536	5201	301	2897	4169	5600	1765	4216	5519
Row 38	3771	1807	4587	4077	1747	1110	374	5095	2736	2365	1118	545	1216	102	880	5705	3644	4767	643	5301	1436	3577	5121	1899	2829	188	5390	3049	4576	836	212	2357	2231	5166	1439	760	2835	570	540	1247	4504	1269	4901	2145	2595	1381	5280	3544	1434
Row 39	4373	5145	1278	4722	2852	5127	4494	2784	839	4000	1494	4805	4084	3761	1397	5277	5000	2385	484	714	2922	2261	4376	1834	2459	3689	3014	202	1798	2513	1497	1467	109	614	1478	4024	2146	3763	4732	5919	4590	2946	973	4429	3546	5775	3511	3675	401
Row 40	1320	5533	1205	4640	4494	1685	892	2501	4957	3482	2495	294	1808	5904	4221	1125	1852	1694	5430	1177	3293	3648	2200	5780	5429	3436	827	1065	1331	2908	5946	4622	754	2031	338	4318	4907	3304	818	2094	5782	5761	1720	996	5965	1794	3445	2637	3658
Row 41	1929	781	4618	1300	2818	4878	5274	5158	643	5640	1365	2932	2402	5802	2638	4485	1308	4722	1575	932	5653	2077	3636	1221	3489	4596	4493	2593	3696	822	764	2739	2374	2271	1700	3821	2033	5072	2617	2810	3203	4692	3002	1587	488	1505	5598	3196	1424
Row 42	1053	4818	5941	1086	2379	928	3575	199	5740	436	3520	1169	3288	3688	2392	4991	4925	2475	4582	3862	4611	3389	1685	4516	4529	174	1037	3236	4708	278	1478	5804	2263	4148	188	2844	5358	5450	3439	984	2525	3548	312	1776	2481	2127	98	2295	2644
Row 43	1509	925	2084	2119	2478	2919	5656	4892	5931	5498	2669	1797	4287	5912	4286	2446	1102	3267	5578	552	5004	3093	4945	565	1073	2168	5224	326	688	3228	4918	447	5869	3837	2512	3760	1032	2639	5576	4791	1930	5468	1412	474	785	4149	2471	4592	1857
Row 44	5373	1344	2932	4098	5611	3488	1087	390	5060	5281	2793	1492	214	4223	394	3222	3195	890	4503	853	5254	1658	2205	3003	2290	1754	3495	1506	5692	197	2506	3383	3364	3679	5300	5083	5116	1722	5960	2333	1282	2837	3698	3838	3077	235	4772	1756	1363
Row 45	3737	4361	2658	460	1834	2766	3243	5072	4273	5675	5482	5728	3371	141	2358	4786	5750	3430	2642	4891	4891	5379	5939	1505	2357	4462	3073	1349	5091	3923	2412	5085	4015	792	291	116	2689	1978	3355	3052	1688	3978	1042	5852	1878	5401	1544	4052	1384
Row 46	362	5114	3198	4682	443	4977	2120	4406	1659	202	3712	5358	1524	2261	4457	84	1252	5712	3479	5855	5145	4427	1873	2006	2523	4202	2557	5581	5400	3436	5440	3314	1483	2349	5459	511	2783	3494	5673	3344	864	1113	3407	542	2971	306	3397	4869	1610
Row 47	1905	5272	4233	5790	4630	5203	4029	3221	5338	215	2624	4077	5723	79	2136	2534	4982	3691	2486	3082	2237	5300	3285	1597	4952	5280	2938	1952	5186	937	5618	823	5068	5020	1466	1702	2213	577	5446	5518	597	3049	3034	5030	4220	5403	3036	487	1275
Row 48	4168	3976	2552	1947	5626	4725	3686	2110	3068	5091	981	3107	2801	2111	5160	2658	3646	7	2200	4842	5869	5381	4109	2563	1606	4033	4933	607	1083	2746	3600	778	2723	2063	5000	1302	3565	5759	3173	480	1778	3966	1782	2956	3258	2644	524	5543	3096
Row 49	1778	5922	2657	5205	1859	119	1341	622	4834	2195	3017	4581	2588	4581	1195	3368	3942	4924	4451	2449	5257	2392	4928	4324	3867	5306	2597	398	5184	246	3703	390	1971	4564	4118	2195	3695	3889	5683	382	635	5247	2397	2087	590	5231	4516	2146	5902

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.