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	4921	714	3843	4441	188	2365	2980	4593	4284	687	2844	5720	4857	3910	1015	342	2249	204	4326	2060	3139	197	1405	1745	2099	4667	1470	2726	3960	3890	2782	729	1446	5996	4182	898	3922	1839	1125	4508	4767	1898	3054	2953	3915	2568	3869	1682	3040
Row 1	1762	1879	1390	1925	1543	902	5459	769	5169	1569	2137	3813	2230	3566	1088	3899	3919	5094	3807	3193	4292	4821	3216	517	64	280	5524	4063	5087	4606	226	4611	5560	4147	1932	5647	3497	3932	5609	4128	5490	5282	3200	5381	2370	4225	3054	5756	1986
Row 2	3515	5052	625	2717	2970	3469	756	4097	3206	320	1672	5956	5875	2292	2107	3956	3839	768	2610	691	3815	3121	2168	10	5693	3962	4343	5769	3628	3139	5198	781	3640	1618	477	1699	3991	1382	3119	2535	769	5459	5221	4684	3821	3646	1478	4218	3538
Row 3	1198	5047	3076	83	2303	4501	2928	1840	3003	3664	2670	2861	4579	2338	5240	3315	3066	4585	2232	719	3163	3891	2418	1979	4068	5181	5276	5764	236	2811	4380	172	5912	4548	3346	521	5945	678	5207	814	543	5090	5409	1970	5994	2550	4671	5376	5484
Row 4	5014	886	1750	3471	1493	1475	5378	4914	169	2811	2573	2567	3078	2582	3272	5410	2424	4266	5489	4485	746	5422	499	4696	1157	4109	4218	2037	2508	4798	1981	4720	1566	2435	3997	5421	1913	2015	5338	2120	3446	1474	694	5770	4593	5514	3939	2068	3992
Row 5	441	4574	3094	1513	4341	2912	1798	5978	631	1770	1247	1989	1021	5480	1282	764	5034	569	1018	1346	5763	653	5355	4296	981	4359	3697	5719	4504	1480	363	151	3920	3636	4822	4851	1838	3565	3894	4435	2154	2833	4199	5225	2411	2690	4729	716	2362
Row 6	1917	2173	5475	622	2826	2700	3070	183	1530	4107	1250	2170	2145	4533	1573	3433	5475	4355	1307	4989	1538	189	5138	3321	4412	5150	1841	3011	2245	2567	46	1960	3463	3474	3960	4966	1662	5702	866	792	1039	1063	2205	4781	1860	538	1923	4192	2035
Row 7	5517	3786	956	2933	3852	3318	5141	2898	1013	4701	5541	1644	5754	2064	5076	1733	5969	773	5267	2388	5162	839	3156	4291	5327	3629	2360	598	2955	2276	2938	5196	3712	5562	479	2487	705	592	3577	1536	1390	2863	2006	4126	3664	2897	2377	3170	4320
Row 8	4892	2443	3153	5747	1562	4420	718	2839	3862	3737	5174	690	2206	2119	3053	203	3814	164	1544	3350	272	2757	2839	3002	4348	5428	2434	2264	3018	1003	3092	1929	4500	2459	4132	1849	649	5374	4466	467	4740	5106	2389	3167	2713	748	2991	5243	379
Row 9	3961	2270	3338	607	3853	1136	5994	4289	3324	1487	2120	1093	2774	40	2447	2127	4607	1149	2823	4760	5727	2733	5311	3268	19	5542	1406	1492	3291	989	5468	1093	4305	1210	3596	3157	1612	3388	5399	5134	4142	2471	1434	3402	4296	2720	3954	194	2568
Row 10	3244	3979	2260	3301	4205	1409	1064	4060	4236	686	2508	3042	3140	3077	2106	5505	4784	5953	965	5863	2644	1966	308	2081	1198	1968	2128	2328	75	1462	1026	3334	2475	4506	1058	4133	475	4660	5710	4120	5703	3606	5795	3515	3539	4442	3043	4206	4175
Row 11	403	1260	166	2833	4695	4365	168	2772	4718	2181	1134	1249	5946	385	2737	1663	5748	119	3672	4069	3169	5539	1212	4199	1257	2494	986	3783	4999	203	4148	4500	5660	3129	4860	1887	5598	861	1749	1418	5235	4466	845	5295	4119	3212	3943	2935	3213
Row 12	1458	3514	5259	1003	5950	2986	4995	825	5615	2333	1132	3106	4913	226	4768	2543	2071	4603	5062	337	202	1642	851	1425	497	2699	3255	4542	1885	1785	2673	3040	2564	3302	5481	1786	494	1368	3379	216	1673	2981	2817	2855	3184	3037	3647	3088	1398
Row 13	1592	782	93	2948	182	4806	3963	2367	3352	4440	879	3264	3869	2758	848	3423	913	1192	5916	3542	3820	1510	1293	3440	413	2540	609	1207	4486	4641	4905	3079	2657	494	2012	3421	3635	5805	896	5777	2955	556	1855	2291	4426	3906	5649	1080	3893
Row 14	868	5257	475	2610	148	5696	5415	3770	5913	5846	874	2288	4416	2259	3132	3898	4313	3073	2929	3240	3579	371	3451	220	304	5656	2588	1634	321	5239	798	3024	2061	2209	400	5427	1659	2565	4059	945	73	258	3873	633	1112	114	4801	4551	3709
Row 15	5127	994	825	1507	1080	5845	2260	3597	1816	2743	5362	4365	380	157	5396	4156	2679	461	1190	5404	1129	2233	2159	3658	5822	1664	4660	4551	3839	5006	5780	4533	5481	1249	5627	1010	2522	3659	2764	2714	3774	4557	3780	5977	2941	5257	4350	1529	4922
Row 16	3611	706	4378	5341	3746	2684	3137	5534	637	5655	3014	3169	1541	3574	2896	2682	523	3697	3449	3757	5604	5356	1639	3794	4545	1336	3559	1853	2901	4939	4026	1741	2551	431	105	186	2422	4136	4083	929	4219	1004	1348	1217	2478	4671	108	521	3001
Row 17	4614	4501	1152	748	2427	146	1374	429	691	5297	2497	5961	676	4939	5661	4548	4653	5091	1088	499	3791	1190	1749	1661	5426	32	4626	2733	3983	5208	1334	3114	5369	1653	158	2548	100	4139	2399	2019	3039	1805	998	1075	4170	2198	1349	3351	1453
Row 18	36	5859	2505	1878	3660	4030	562	2016	3330	2929	485	503	3598	1858	1906	5961	5307	839	5390	286	5731	3372	4799	123	4500	2024	3504	937	3438	145	5387	2536	56	5489	5720	4098	3780	2677	4696	2959	96	5934	2759	2792	5187	2917	5202	3393	77
Row 19	3813	347	2565	1557	245	4276	4264	744	1390	2888	2174	2508	5011	5801	1232	2773	3427	223	3415	2816	4045	5778	5919	974	613	4255	5738	4816	5010	3496	2935	4385	894	4848	2364	3006	5062	4551	778	5585	4855	1835	3249	4487	5655	4214	1957	5114	4457
Row 20	1810	1814	4814	1382	5470	1079	5442	5532	1041	5732	1575	2358	1603	5036	5216	5707	2546	2972	283	598	114	3048	4194	5723	2067	278	1957	3257	2769	2755	1496	2476	5081	5041	3407	3246	5558	2544	4611	4713	2518	2478	5953	2879	5024	3701	4219	2079	421
Row 21	3661	3585	1405	5553	3080	436	2020	5738	2381	5550	1375	1097	719	5135	5402	108	23	1439	506	3763	3886	3281	3052	806	1147	1409	4044	5837	1690	3092	1345	2153	5782	4689	1939	4334	2371	5630	5280	2173	3404	2401	330	4425	3479	5117	2612	3423	5500
Row 22	340	4124	1346	5198	2010	2705	1896	3097	593	668	2003	387	2056	5328	5936	3957	4086	3282	2096	410	4951	3497	1220	1792	4749	778	1216	892	2660	4680	4430	1641	152	1693	493	2046	1012	3098	1806	335	3966	3961	4077	5477	4118	5418	5665	2962	1066
Row 23	2809	557	5743	5994	5947	4165	5850	5916	1534	4978	3745	1507	4296	2936	872	5200	1198	1006	5603	1682	4177	4110	5522	3968	4551	1280	902	5862	852	4312	4529	5497	3088	4258	3787	2580	5499	91	2369	676	4628	667	217	3417	1173	960	207	5242	701
Row 24	3996	5758	4353	110	4705	2997	4965	2029	2864	5682	941	429	3655	1371	532	2727	1795	2776	3336	1968	639	1093	4801	5514	2290	5681	5536	5268	442	953	5357	4409	3010	4100	4900	4730	3974	5779	1835	2983	3450	1212	3569	2744	1975	1170	5090	2086	528
Row 25	5995	1631	3102	4680	3529	165	4527	308	508	4854	3330	820	788	1064	1057	4426	136	2016	3980	1194	2142	5913	5645	2631	1415	2898	424	4569	4625	1919	5627	5735	4596	1289	2309	5766	162	1375	3845	401	5403	943	1042	3341	701	1093	5198	1741	843
Row 26	5782	5524	1602	3267	1745	3630	3602	5146	2234	1543	3443	2814	4628	4901	174	2888	4370	343	1194	5984	3204	2058	4040	5372	308	1237	1878	2091	5454	2362	1745	5216	5025	2295	3524	2984	455	7	3581	4766	984	3655	4217	937	1590	2407	3575	1617	4727
Row 27	3881	809	611	5587	1567	5092	2594	2734	4755	4469	2972	2087	1044	2277	4542	3844	395	3542	4290	1681	1054	3387	4775	4805	1325	1081	5587	5926	2484	3022	78	4729	5350	1244	674	1418	4506	2474	301	4389	5907	396	5787	1011	2907	4307	1229	3494	2707
Row 28	4863	1778	4808	414	824	878	5257	5571	1911	175	2796	5829	1275	4555	1445	404	849	2570	2527	806	5694	5137	5454	4166	529	4790	4879	5279	3033	2841	4837	3098	3173	4497	3083	3023	482	1377	3216	3542	258	4251	3806	2967	3811	4966	5874	3246	392
Row 29	955	3532	5499	5852	980	1999	1075	2480	3608	81	2316	64	1946	294	3992	4652	3265	5459	758	5044	2035	4044	1377	4660	531	2003	867	4784	230	2527	2647	965	5816	265	3307	4101	2109	1380	492	4334	4376	5287	3195	711	630	5180	3441	3997	5242
Row 30	5385	2818	1837	464	906	2818	813	4877	953	5764	1388	3257	5561	1400	5065	751	4113	2929	1299	5524	1764	2048	3296	4891	2526	2807	3281	1837	2407	3247	4742	1943	5067	2278	879	2558	3719	3194	3333	3657	5407	4398	5039	4234	5450	3859	3882	530	2304
Row 31	4748	5638	2394	3195	1244	1050	5247	4884	524	2921	5787	4858	1639	5820	2361	2590	3029	5582	4838	841	1737	1926	1854	2226	190	5462	1104	3316	1330	5935	1665	182	841	3447	376	3262	579	82	1817	1550	453	2637	4312	2209	312	511	5890	3822	5108
Row 32	4950	1764	1441	1812	5069	4542	2684	2759	5955	327	329	3930	133	1888	337	2367	4320	4063	2903	1072	5745	5456	4573	4406	5987	2321	1033	4008	5244	4464	900	3244	345	1358	1818	2570	4492	991	5213	1854	4059	5190	2726	1573	3289	2286	2531	3602	3475
Row 33	1968	5426	3976	3814	2562	4673	1446	3066	1427	184	3301	4131	3671	2049	4873	1262	1017	2767	3245	4307	496	4837	5913	2174	3919	3187	3027	5503	1451	46	534	5746	3528	3631	3972	3761	3545	2368	5423	69	1886	3748	3659	1364	1259	3618	1918	5351	5913
Row 34	5953	415	4960	5371	5320	692	1261	1658	2190	574	582	2080	5521	5953	1235	4620	799	2080	4379	2613	5510	2231	4271	506	3330	3258	1424	1573	2851	264	2635	3680	1026	4826	2231	2351	3770	4835	613	2177	5940	484	1791	2472	2750	1990	4781	2545	1961
Row 35	4950	562	5563	4019	4242	1838	1142	1137	3341	4440	1764	3454	1061	4522	3420	3016	883	5450	5835	290	2488	1756	656	686	1172	4572	39	4187	1340	4077	4437	1874	1983	4632	3583	773	3750	4334	2786	615	627	3207	4811	4439	3610	3703	4702	2415	3068
Row 36	4760	4439	3783	1187	4657	3638	4612	2584	3363	3180	631	4823	820	1547	2361	732	4716	2214	1718	5226	612	1413	5049	4057	5283	5864	131	3831	2786	2504	2263	2537	5213	5471	4381	4406	2814	2482	4141	3654	5894	5176	3438	4948	1498	1137	759	3327	4360
Row 37	2119	1997	3265	2055	5528	4487	2113	4484	1990	3427	3111	5848	3043	3582	2882	377	4962	1190	5131	4054	3502	4409	3339	5436	4308	41	426	1208	403	2815	604	912	1577	2498	4567	2686	4727	4527	4781	4222	5637	5979	4208	4713	277	2230	3884	5760	5122
Row 38	2454	2890	2595	1974	3588	4203	1836	1660	3711	1621	2473	3836	1044	1049	884	1374	3483	1800	3143	240	646	4850	5180	5389	3910	1503	3401	2622	5787	5478	5798	3638	3169	1926	3503	128	4438	421	3484	2940	942	1299	5958	5244	2532	5420	2244	5888	2008
Row 39	340	1805	4761	2683	4280	3422	4170	5944	2596	4781	1058	5466	385	711	233	1864	5579	4720	477	2152	4654	167	2319	4929	3446	3921	3715	2382	4314	1587	3945	733	5456	4152	1366	1833	166	165	5439	2391	701	4943	3064	437	1206	4751	405	361	2508
Row 40	4119	4620	1720	2189	5406	3137	3441	1112	4460	2688	5581	83	6000	4499	2816	4432	4776	5124	5900	2001	5423	4687	415	3129	4617	3377	1916	4802	1729	2279	5889	274	132	1645	5651	4041	5062	1974	2041	5816	1398	5297	3834	1322	2778	1412	3945	1700	1277
Row 41	599	1938	5763	2527	2851	3638	2472	2128	3648	4818	752	4347	4446	4626	2608	2466	228	2038	4875	2076	7	748	4289	3039	5717	1065	1738	480	5080	5636	5421	835	3694	3557	2374	1829	446	5810	1340	1914	5447	2742	127	2001	3611	3611	5886	4779	3062
Row 42	3820	5150	3959	1512	4859	5256	5074	2413	1418	4170	3086	5352	180	4168	3692	290	1682	2762	3842	1302	655	3577	4960	3786	5909	2770	2476	5580	3718	1185	1781	1665	5109	2781	5449	3077	1192	5569	1708	3577	4991	5510	920	1798	760	3770	1666	31	2344
Row 43	1085	290	3790	3785	3783	3225	4663	661	1217	1256	5678	483	256	624	5694	4556	2669	1639	2693	2913	4594	1290	2178	4431	3901	2117	4614	81	1270	2747	4082	1233	1882	3656	2524	3462	1139	2500	3	5328	3882	4601	4051	3099	515	3867	658	21	5534
Row 44	5728	5809	1245	5608	2425	3913	2945	5793	2726	3596	1681	4861	1894	3690	2736	371	892	1852	4012	5752	2621	4822	4797	5805	18	501	1545	858	2373	4344	975	2273	3432	532	1486	1120	3133	5505	3037	1303	4530	5995	1607	2105	2992	4494	683	935	3559
Row 45	1668	5736	890	1956	2784	1237	5675	4977	2952	622	3192	2843	2947	5761	982	1627	1129	4904	5985	4659	5208	2599	4955	5044	3444	587	427	5286	2292	1922	2220	1812	4759	4895	5223	2154	1678	2319	1754	3136	3234	3255	4572	3629	4629	1700	2876	4237	4291
Row 46	3876	1135	3439	4674	3806	3091	621	305	3601	4555	4334	5443	3204	3484	4906	4254	1770	3351	2987	4238	395	5731	5837	850	2031	499	1312	3539	5551	3590	1894	3759	3475	4329	512	718	1482	1203	4252	2141	5552	32	5931	5878	700	2916	5642	2788	781
Row 47	4203	4548	3132	4890	47	5976	3313	227	5920	1653	4232	5601	5362	2043	586	1315	933	2031	839	3063	4830	4790	3169	954	439	1458	262	1819	799	1294	3233	4552	1713	4907	5412	4741	864	2305	1027	5974	273	5581	1092	3187	128	281	2293	2636	2457
Row 48	3679	3577	100	3736	1309	3789	5142	3253	2101	488	1091	2918	5533	417	3876	3060	5098	1477	3831	4349	3918	300	1008	4778	5663	2875	3982	1299	3673	321	4797	705	3126	5241	4608	4887	792	2844	3421	4325	5117	2430	1598	3178	5341	4944	2138	2294	5280
Row 49	1584	2867	629	1897	4328	2688	1960	3990	47	1682	4068	1954	5378	2034	485	4543	5766	1564	5298	157	217	5229	5485	4255	249	4232	1254	1628	5585	5688	3184	5507	98	1934	2559	5321	1714	2803	5360	5758	5774	482	4224	2979	977	4086	4037	5883	2441

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.