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	1087	5194	5848	4111	645	3143	761	5520	2559	2650	595	3694	2159	650	5701	1215	1584	1102	488	2156	2100	2476	3805	439	2243	4081	3604	5496	5286	4513	2324	3016	4535	4435	2203	1459	5396	4992	112	5668	4618	4254	4863	2448	3849	5814	2810	1523	3929
Row 1	1654	4456	5912	2140	2762	3100	5	932	2292	4468	451	2930	2997	20	3102	18	3129	1096	1578	1339	2247	2894	235	5295	880	3049	2224	2453	1554	2483	4353	5288	950	758	1975	1060	957	5664	4524	777	783	1729	4465	3213	5739	5490	5243	5140	2736
Row 2	1616	2751	3929	3002	1734	2817	2028	721	1863	3859	1980	1975	1586	5059	5467	1844	2550	634	2773	280	2054	732	1475	1888	5035	206	4188	5468	674	5063	5655	802	1623	5414	4487	2426	1380	5224	3888	3471	3199	5870	1338	2669	1567	256	2558	1999	3122
Row 3	5716	2073	5788	4144	393	124	1441	5681	3795	701	2804	5946	4820	733	1510	4455	52	1761	4725	664	5496	1686	5073	2363	2163	765	5544	5130	509	1385	1151	4895	5936	2652	2084	4223	3982	4731	4063	1371	2438	4856	4852	3588	5607	1484	2248	719	578
Row 4	529	2936	1475	2702	5852	852	4232	2355	300	5698	757	1875	1535	4804	1160	2314	2474	3813	1732	2676	5582	4198	2229	5196	3686	1466	1143	1586	1309	5780	1620	1009	4006	3746	774	1028	1638	1315	3135	5290	672	1986	5130	2507	127	3674	5966	1850	4068
Row 5	1806	1998	3678	421	1464	5443	5232	3651	1715	1337	857	1897	1315	4451	3954	4726	1903	342	1691	1853	2664	4916	3188	2331	1910	2366	3539	4510	1976	572	419	2228	3304	3615	5544	3905	4196	5487	5740	356	1869	5239	4480	5730	5263	2840	2316	912	2639
Row 6	4049	731	1230	5967	3320	5337	4719	139	4521	82	128	5724	3802	4806	2927	1155	1844	5662	5923	444	2900	3181	2884	1918	2863	205	2005	5954	455	5906	5607	5758	3852	2663	2896	5715	5274	5114	759	5589	4077	2977	1533	3200	2262	5849	3137	1239	3384
Row 7	2059	402	5412	5059	1920	5103	5837	66	4012	5434	976	2726	2279	2537	4221	2718	1258	3400	2529	4577	5189	3182	943	3321	4497	2900	3367	1103	4395	2916	4996	1135	5237	2093	2840	2702	3255	2177	313	2413	156	4369	4089	5012	312	225	3178	3948	1209
Row 8	2173	3957	3158	4036	3413	5709	2738	3664	3831	382	97	1373	2809	809	5089	1147	4832	3390	1445	2441	2909	3138	3067	4531	1590	2402	403	4108	998	2356	2266	5620	1816	3007	4009	3515	4685	1009	1337	3911	965	440	525	2705	4996	2463	3355	4253	1563
Row 9	5603	316	3735	1288	5072	2479	3432	5256	337	3007	5937	3673	4251	2650	412	3141	1182	5346	1747	1660	5779	3119	5811	5226	5553	4900	5527	3938	2330	3513	5272	237	328	2650	911	496	2304	5678	4554	1363	5928	325	641	2491	3553	2125	4379	5536	701
Row 10	1244	5571	3653	1069	4646	4385	5999	2622	100	1948	3153	4461	1910	613	4469	4511	3753	1418	3738	1832	4058	1773	5458	4114	4163	322	4258	469	666	968	2999	4908	332	4015	3892	2959	105	4928	3273	4226	5627	1713	3511	1985	2741	1708	210	2019	2374
Row 11	1581	5965	5431	4018	1389	150	3552	2052	5871	4724	4897	1207	731	241	988	877	4887	5987	5528	18	3342	114	3385	3031	5403	4288	3278	992	1728	2491	665	3452	4037	3937	912	5118	4117	1809	1226	4991	3038	5327	1308	1932	3226	3322	263	2425	5136
Row 12	3962	1336	4061	5688	1176	5677	5238	245	4391	2730	4500	5689	2802	3348	1038	3492	5531	3534	4549	4230	4827	3071	3222	5241	429	2236	5899	5920	3765	1713	1759	3438	572	1687	4591	1584	5143	5978	3084	3727	3874	20	68	218	4291	5877	3330	2887	3100
Row 13	210	2818	4631	294	3350	4610	5677	4830	3334	4794	2571	2076	5215	3850	1830	2051	5304	2282	3645	1428	538	3446	3019	314	2389	2876	3738	1438	5964	1434	5728	1810	5724	901	4830	5311	5290	4339	4865	5338	1190	152	735	382	4028	4626	4369	3229	3491
Row 14	5485	375	5379	4162	916	5801	4410	2090	1866	5232	5971	1817	5115	2268	2939	1508	4950	4546	4661	1619	1052	688	5708	352	5946	2915	4740	2628	5567	232	3694	5756	1349	5765	2053	3060	2474	608	5038	1288	5642	3526	1362	2310	1217	1753	2777	4659	1928
Row 15	2705	2381	322	5353	1010	5419	2223	4543	5426	2499	1964	2175	3832	675	4995	5072	4223	1492	5851	4344	3649	4832	4885	1794	1330	4721	2502	4366	3088	5911	4412	3116	722	486	81	3444	1332	3748	1715	5309	346	4839	4941	228	5127	1921	1544	3842	5592
Row 16	4239	4387	4776	2736	1443	4763	2640	3964	4914	3440	3666	3115	4543	1956	4823	1433	5384	1540	5617	3777	1124	3434	1168	3767	113	3246	3993	398	5182	2241	2206	4400	4540	2253	2873	4394	408	4115	5542	781	422	735	3011	2280	3652	4587	698	2287	3660
Row 17	3344	4274	1585	5693	4932	5407	2065	603	5688	1969	1001	3239	4087	4321	2088	4827	1435	3726	27	5927	1199	2157	4648	2679	692	5396	1772	2488	4767	1297	4832	4286	1964	3138	3603	4544	2575	1018	2435	3984	973	5194	313	1558	3596	1450	1098	2954	3630
Row 18	1366	4097	4009	4883	2085	4509	727	2872	4951	4877	200	5670	4903	3832	2466	2089	4704	5763	4120	5339	5683	2658	5754	949	1401	3983	3253	1938	2496	4044	1522	933	4707	5395	459	3365	2529	1182	5367	5280	4215	376	198	3800	1114	4287	2377	5354	4458
Row 19	2070	5563	1540	3429	3830	5056	3974	2410	164	3164	706	3601	4346	3767	192	4150	171	2139	4313	5059	5825	227	690	4635	2241	5547	2634	816	762	2105	5110	2441	967	304	2049	4329	272	5924	3478	3097	4650	1266	4566	3489	3775	4576	2580	4149	5445
Row 20	227	3016	644	4503	378	608	124	4370	3559	3120	4362	1012	246	5368	4088	4143	3865	1233	5018	3501	1096	2112	939	2086	2927	386	5025	5452	462	3612	1698	691	2613	4406	4778	5924	5140	5180	372	1125	5311	1659	2711	5561	4488	5981	4098	3586	3914
Row 21	1556	5625	2827	807	3996	4184	1888	4301	2991	3032	3112	5994	5423	482	898	2503	2813	849	4995	5805	233	4145	2896	4687	1723	3632	4207	3449	4203	5584	4696	3155	1447	2203	4133	2838	1998	425	3491	1756	3704	1918	5746	5271	831	2631	2336	1526	338
Row 22	3553	2818	1072	2958	4440	5496	3683	4886	1843	232	4243	2235	4977	694	2488	3031	3921	4807	504	29	4770	1115	5315	3199	5019	4227	3775	3623	1256	5616	4651	3020	3579	3728	1566	1651	1981	3389	2142	318	2614	4300	105	5212	4322	5231	3965	1946	181
Row 23	4647	3668	4625	3892	2857	771	3664	1881	5092	2400	1055	81	3249	5840	3099	3328	2164	4489	1861	5223	3826	4893	2842	5999	4381	2181	5673	4653	549	1788	1469	3368	1231	1283	2582	1879	4882	2034	1455	4296	2669	4543	5386	2808	1949	751	4823	5155	4023
Row 24	1879	657	4705	3247	1614	4454	2426	256	4379	2689	1497	3854	2432	3037	1647	2597	910	2799	5585	2991	4659	3510	1235	4776	2484	1299	4241	2194	4791	4997	2263	2	1078	5732	5969	3184	3562	294	985	4470	5813	1626	1879	435	840	3557	5191	2845	769
Row 25	1048	931	2412	5306	1035	4499	841	2888	3534	3394	693	1916	2395	5535	811	1322	4571	4861	4807	5644	1068	3152	241	1702	4762	3971	3862	5962	3388	27	5367	3466	2668	5659	941	4870	3026	1430	896	3411	3477	4482	2782	2974	589	5556	5737	5540	5668
Row 26	3184	1914	3106	2017	3174	174	5972	4445	122	2417	428	2159	1511	5226	1030	4458	2677	5569	251	1070	2519	4166	5627	1152	281	3218	4336	372	4632	5318	5337	3311	2178	442	3772	745	4940	216	4874	3282	5847	1448	559	3674	4225	2452	4712	5740	3221
Row 27	4697	2228	197	883	2482	2011	2844	2142	1888	332	3354	1588	448	5963	4492	3002	5852	837	424	1245	3841	1148	5501	1601	2595	4840	420	5711	5998	2242	1823	3217	905	2587	2909	302	695	3294	1397	4536	4115	818	5697	1830	4371	180	1964	4591	4567
Row 28	3943	4477	1699	4138	1537	1642	3951	2682	1664	5910	3833	4609	5372	482	3344	1182	4184	4909	2945	4012	142	1056	5629	5593	1127	5464	1414	4887	4718	259	5152	68	1351	3089	1591	2635	2751	5257	64	2799	4489	2998	1220	1347	2292	5505	777	3259	628
Row 29	1828	1385	2800	509	2212	3138	3987	4325	1309	1868	612	513	2671	5965	1972	4927	1858	5287	4360	2683	548	4663	1	874	5710	5027	5455	1339	3923	2681	1731	1230	3062	2967	2158	2131	3905	5863	3583	776	2382	4591	3225	5644	5132	2876	5155	3178	8
Row 30	1713	4526	1542	4665	5417	4543	1494	2214	5571	340	1732	1272	4363	2951	5985	1382	2351	399	1117	5610	4064	3668	898	2631	891	4897	798	2283	626	5858	2419	3665	615	5601	2316	1227	3417	622	680	2465	2085	1120	1264	2200	3615	4492	2615	2699	3527
Row 31	286	4901	5679	4287	4780	4898	5954	4733	430	2997	5592	5034	3155	4326	3148	5581	3198	4650	3483	5571	3485	3349	5504	3370	1355	2213	1888	1446	4302	1332	5964	1178	4331	3226	2285	5075	5944	2663	326	4861	3170	164	2757	4766	961	3469	4865	4282	3039
Row 32	3254	3602	2381	4383	1006	2833	4920	2866	2955	3337	4012	2991	145	2814	5398	5729	3938	4937	5160	1057	2162	1797	5283	286	5027	5976	2453	4190	2001	4028	1735	765	4853	4128	1206	1112	1610	3126	3227	1642	4621	2498	645	4808	2735	3860	5031	1277	5323
Row 33	1984	4158	3165	2373	4077	437	3029	1083	2249	2433	2025	874	5359	4873	1406	2922	3779	2570	837	5405	4622	3758	5733	191	4883	562	2678	5033	2312	4069	82	4504	4107	3449	5043	2233	2329	4792	562	3880	4561	2825	2524	5440	2242	2984	2633	2095	2971
Row 34	2165	892	2579	4580	130	5097	2116	5560	3251	1446	4582	1507	4	5810	4889	155	5625	1168	5761	5881	1356	1449	3653	5215	540	845	4199	3761	2743	5222	5347	1269	2203	4815	254	5742	128	2907	5971	3080	4528	2858	5333	137	2248	4387	2366	1088	2620
Row 35	2444	575	1613	450	2248	1377	2254	1728	2951	2686	2256	4865	5122	5852	4516	1410	3473	1510	114	2069	2295	1632	2540	1841	1102	1520	1400	3825	2084	934	4736	2672	2190	509	368	2522	1025	2796	2079	1615	4900	895	3889	2025	4016	3310	4009	4704	1094
Row 36	1105	4203	4073	149	3323	4874	2825	6	698	46	349	3626	5055	3253	5049	5321	146	5844	999	5820	4971	3217	4851	3514	3541	1918	2582	1670	5384	905	5976	5229	5492	1128	756	5341	609	3893	1424	4695	4712	5791	1775	2118	1928	3102	5927	2792	4107
Row 37	4236	1893	4999	3445	490	2086	4335	5968	3664	3758	4804	354	2830	152	1208	2911	5459	284	5569	3995	1236	691	3179	5764	3583	4605	5669	3160	408	1266	2384	1717	2813	2556	4959	3959	4395	3366	4389	5023	329	739	2402	2253	2638	5367	3820	1160	2907
Row 38	1816	4566	2777	219	1107	3809	1919	11	2461	2341	2570	4381	4474	3015	4851	4700	2416	656	2914	1963	3177	2278	3474	5417	4697	1604	4552	351	4016	1123	539	3900	2788	1771	1207	747	1496	5802	2868	3683	4133	4012	3946	1267	619	2016	3809	240	1155
Row 39	2184	2612	3171	5163	5670	1541	2685	627	5876	565	4793	4084	5728	3987	4076	4807	1510	877	2028	4072	5673	37	2980	439	1754	5177	4588	4624	5026	5974	5283	5614	2104	105	3347	2451	5515	2817	5010	5820	4543	5189	3841	3604	1969	4217	1017	1909	1274
Row 40	1971	1170	2838	4391	3790	2266	3493	1754	3216	1828	3374	1005	5241	4789	4449	5430	1505	5489	1177	5795	835	3121	1200	5504	1153	3354	3979	1134	4812	2299	5742	4695	1418	2274	2970	1773	4353	5123	3026	3640	3696	3238	5555	4724	5615	3402	4557	3723	2685
Row 41	5914	1914	2770	3693	153	2485	4466	2243	2861	5073	1362	3687	5569	3041	4786	4231	2128	3000	996	410	591	2795	4874	955	472	5220	2771	4992	2235	5557	5405	1367	4315	4426	5334	232	336	5052	3721	4490	259	732	2769	700	5070	1224	5869	3704	230
Row 42	4536	2403	2911	1511	32	711	5346	2996	4898	1946	4684	2834	4762	818	5113	5532	4821	1406	1100	5062	4285	4424	4720	1864	4953	2449	1764	858	3734	1563	5585	5074	5170	3351	3994	5534	2020	5995	5867	2112	2401	5776	4825	704	5658	3325	2464	800	562
Row 43	683	1060	4475	4032	2918	1347	2673	3290	3584	104	3102	4293	1277	5443	928	2726	865	52	4094	473	5648	4050	2852	2137	4820	1627	5507	1817	468	3120	28	1164	3706	411	622	156	5222	623	57	2839	3116	4747	467	3602	918	5232	2549	3769	4394
Row 44	905	5629	4041	5531	1832	4188	1401	4599	3606	4278	4021	5256	5298	1829	5239	1587	5192	1955	1427	4306	4959	2657	1907	3410	4934	422	2663	4432	5046	3954	5825	781	854	5563	5205	583	3765	2072	715	3032	3501	3984	3944	753	5001	1055	5229	36	1884
Row 45	5416	5178	2607	5254	4286	5780	1519	508	5885	1778	5853	1073	5281	206	3530	286	117	3307	80	175	2384	1477	1983	2718	3325	2498	769	5888	4666	4448	5032	687	4151	4742	1986	3466	1817	5809	83	989	5786	838	777	1811	5430	2548	4646	17	4135
Row 46	2273	759	4584	4062	2419	5772	3038	504	1762	2380	1121	3220	5455	2220	1146	2269	5571	1966	293	1244	644	1784	4353	1241	288	704	250	4132	4411	1668	4835	5257	4828	5922	1839	619	621	1843	1369	3202	1770	4893	5207	2978	133	2254	5022	2620	1363
Row 47	5232	1788	3393	4962	1506	1636	464	5943	4769	1085	1475	1827	197	1913	2951	3071	4440	1490	590	801	3820	2800	2666	4680	1626	5385	4425	1183	243	4434	3831	1865	2430	5458	1381	2834	3473	3477	5365	4565	4666	877	812	2135	3669	1162	3512	1454	3472
Row 48	1309	4689	310	3682	4149	5761	4023	1262	5321	107	2351	5987	1401	4441	821	5666	3678	1970	3399	4027	689	2464	2789	3630	4830	3880	3147	3332	790	369	4700	2925	2492	3270	2397	2304	4463	5772	5681	5861	420	5797	1627	372	2218	5266	4140	544	2970
Row 49	3440	5673	3393	2704	1236	2749	5654	2742	2355	5342	48	1810	208	4658	808	991	1813	901	3439	353	4831	3606	1524	1668	4583	2033	4155	3587	4338	2272	1903	947	1271	1496	3649	327	3187	4328	1515	4376	3702	5841	2795	5355	4227	4313	2583	1465	439

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.