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	1627	5146	3068	1812	796	4311	3834	12	3247	1997	5311	1711	5549	5401	4329	1997	4034	4141	1198	2237	4128	1213	3085	3540	4907	5441	4690	5902	5484	697	3268	4867	3528	3375	1115	5186	4288	5325	3420	1621	318	5922	5980	4643	4020	4079	185	3379	3671
Row 1	614	5539	816	5366	3670	4544	1081	5937	5648	1140	5266	2910	5083	1820	5144	1741	3144	2503	315	2571	5756	4601	889	4006	4835	5381	2689	1164	2726	4490	2928	1624	757	3056	1095	2876	3312	930	3130	460	1228	4814	604	3519	314	1263	2832	3025	1646
Row 2	1246	1963	1030	5027	4277	1777	2522	3471	3662	949	3512	2635	1267	5872	3923	455	4921	5302	2578	4972	4105	531	894	5252	4208	5197	4374	4472	1382	205	2258	638	5817	3179	2486	129	5830	340	3728	2435	3861	4041	506	2590	1304	3690	4740	4148	2991
Row 3	3411	5335	4353	2556	1879	830	1832	1287	139	3764	3058	2920	335	3539	5871	4790	4996	2089	4508	1129	4204	4107	5493	818	841	2066	2957	1935	2388	1193	541	2424	1425	1495	4018	1900	3915	754	3836	3944	567	3272	4727	1034	1300	4556	2909	5840	73
Row 4	2511	3967	2344	2138	5626	5954	4271	943	248	197	4386	740	557	3210	3579	3280	3575	4918	4829	5571	4560	4675	4138	3768	1380	2057	5502	3261	3083	5636	4453	5626	2014	5509	4790	1662	604	4489	3291	2074	4375	181	3136	5076	5961	1406	264	4775	5351
Row 5	4943	4082	1087	722	1693	4733	2081	1941	707	4230	821	1685	1419	4371	510	665	4825	3277	4906	2959	1065	5364	5717	2601	3167	798	919	2566	4993	3633	3316	1927	4968	4011	5289	1855	1987	79	3949	1932	1172	66	5612	601	1000	1865	5426	1851	4896
Row 6	5550	175	2854	4520	2405	4031	2676	964	2488	2332	3052	143	1537	5280	3348	1127	157	410	3146	5878	3760	4903	3226	2712	1569	377	1028	3070	4815	2856	4756	5651	2869	2359	5919	3693	5694	4049	2563	3671	5714	2294	992	5374	2478	3017	575	1531	3920
Row 7	4761	5153	1321	152	29	93	5115	2338	5734	2752	5321	3003	256	404	2324	5552	2886	3359	3805	2609	1759	1532	5737	41	2886	5740	4650	3416	3730	2366	4400	4675	1540	3678	4234	4968	1416	2024	3116	518	2571	1638	3871	3198	4808	3947	5689	2771	4016
Row 8	4502	1570	3214	882	3188	2854	2839	3154	4911	2758	1716	157	2355	2312	3928	1475	511	1156	4861	4889	1641	5039	3840	5776	4053	3026	2338	2651	904	5141	1738	5866	412	519	1890	2077	4362	3589	3074	1653	648	4647	4405	3352	5141	4644	2650	3952	2839
Row 9	5094	3735	5382	5141	321	3995	1345	3886	3417	4612	4482	3338	2428	1889	714	5872	2552	2944	326	5978	2230	1869	1869	2955	2370	3643	219	1900	3642	1305	5810	535	3903	2700	1163	4912	4318	627	4213	244	4861	4177	4504	1319	5982	1112	2558	1035	3897
Row 10	3525	2714	4219	2888	1414	4702	1799	5563	4507	4108	3145	5473	882	2617	3970	3334	5526	4931	3944	2928	5530	5401	1627	2759	1308	3672	3773	2658	1700	3260	3456	5139	5499	3641	1088	5080	3159	2548	770	1585	5440	516	1539	1500	2505	1458	3627	4251	16
Row 11	5436	3749	2572	4098	2588	5216	289	1441	4923	5261	5900	4560	2744	544	4466	4503	338	179	4030	1912	1890	5117	5403	4768	1276	845	801	2867	1342	3416	2144	2407	3656	3562	5992	950	1730	1548	5949	1714	2822	4657	104	4227	2393	3779	5321	4920	3225
Row 12	913	1619	2703	4061	667	884	1378	2718	890	3830	4208	3484	4664	4560	1752	3584	5649	1093	415	445	3504	3632	2221	5522	5566	1683	928	5908	5477	1886	3273	4395	3788	1440	1717	208	2969	3782	5477	2502	4636	422	2661	4057	3442	391	1892	4669	5337
Row 13	4457	4837	3920	3141	1481	1971	552	2650	3798	1679	5061	3019	3088	1834	4602	432	2054	3442	828	1198	4063	693	1548	1630	4687	5274	870	3336	3865	5249	138	2849	3877	66	225	5502	3442	4395	5976	4798	5774	3487	4963	462	800	222	2932	1565	2377
Row 14	1599	2157	2267	5622	2912	4913	3407	1095	2058	3235	3905	4194	2532	5777	1777	2244	484	2455	3767	4696	1803	2736	3323	3337	5463	5274	1493	4058	405	3804	5508	4105	2658	2044	966	4802	807	5273	1236	1346	851	866	1552	2237	2680	2096	4769	4983	5621
Row 15	2551	5005	2561	4202	2301	2527	4922	918	5346	618	2070	255	3626	5974	4283	1532	3082	923	1342	2745	2201	998	5290	390	3222	4474	35	3440	3794	3719	1333	5224	1868	1831	4016	1077	2764	4307	1612	2188	3543	2836	4135	4339	163	2712	4838	4382	3882
Row 16	3009	4267	5391	3499	4395	2526	5043	4543	3445	5949	397	4800	300	1562	4005	2224	2677	959	1104	3888	5043	5763	3688	2441	4937	3414	731	1630	5874	1136	5814	1595	4504	2628	3605	4118	1550	3578	4849	2143	5493	1669	5676	2309	2579	2043	1329	3460	698
Row 17	1374	4170	964	4154	3779	3351	701	1460	4090	5373	3596	2603	858	4453	5753	2824	5642	3271	3907	326	1445	4284	1331	3898	488	4080	5389	4472	5310	20	4695	91	5475	2524	2674	5285	3088	1737	25	5154	5447	4414	301	3651	2477	811	636	1125	3597
Row 18	1016	3397	482	360	5141	2903	1444	2581	924	5450	5963	1018	1648	1189	5144	562	1769	2119	3913	5813	4304	2365	901	4345	407	4826	5685	3806	3233	754	5863	2784	5883	3866	2040	3451	4823	3296	1182	345	3394	5886	846	4441	3844	1702	1300	2636	4109
Row 19	4115	3571	1350	903	3484	779	69	905	503	2635	1324	4862	1893	3459	2178	4844	5787	3096	2603	4153	5889	2323	5500	2385	126	3204	1451	1690	4636	1470	4647	1113	1394	2421	1458	3079	651	473	1477	2237	900	5484	4761	4967	1604	1268	377	3269	3213
Row 20	4314	3570	1491	384	2623	3437	4815	2756	5100	5218	4509	490	966	4911	438	2618	2583	2587	3836	4148	518	4211	348	1061	5288	3116	2346	5381	3228	1429	1697	4851	1996	293	5248	5740	451	3394	991	4508	2446	4727	1805	5733	2221	2117	3544	3167	5829
Row 21	440	176	3874	5046	955	4921	1790	5553	4699	1206	5162	2111	5290	3973	326	4803	3095	5200	1326	4566	1442	3134	3107	5850	5655	5268	271	3450	1212	1712	1659	1766	4864	4198	2078	1278	1005	554	3327	4224	4147	2800	1876	1073	2497	1284	5839	382	4115
Row 22	1979	859	2327	3372	1994	4528	1800	3172	2442	378	1306	4499	383	2776	4550	5115	4718	1460	2424	5618	480	3653	3935	2628	2196	1437	4421	3908	1417	1054	1671	5391	2296	3092	1008	4151	3964	486	398	320	235	4797	3052	5789	1581	2360	476	4043	4425
Row 23	2774	965	231	1918	930	1779	5151	319	5307	5680	1951	5093	3801	2309	4526	2515	3634	5333	268	2826	5740	582	2596	2396	1868	4054	1825	599	1289	1796	1770	4366	3421	1412	1194	4256	442	1867	5449	2008	5677	3497	5993	2974	5756	1684	5039	4649	5206
Row 24	4265	2013	4751	3194	2051	3078	3035	5428	196	3987	3877	4530	5473	1113	4138	5175	3620	5640	4394	3512	3303	2547	5434	886	330	3779	4226	5293	296	5973	5828	4703	3879	1880	4250	2787	1225	5273	4942	1614	5337	2489	4144	4311	5570	4539	559	2524	4625
Row 25	2452	828	1719	1770	4804	5635	4652	4183	4927	3902	3398	5810	3950	1476	2467	2906	2790	5966	3876	1077	249	5503	3934	5555	2175	4230	634	2440	419	4035	1727	928	1313	2212	627	4226	3320	2735	5124	4358	1626	3817	5179	2367	30	2496	4956	4871	575
Row 26	3103	5042	1061	5751	5322	2845	4702	2200	1318	1763	3188	5907	3056	1010	1142	2107	2543	1125	1214	1587	4788	1048	4837	2725	3063	836	5850	4240	146	2227	104	994	1501	1270	1587	5876	1169	1767	2669	4272	1644	4439	3588	5101	2709	4983	5864	3016	4780
Row 27	2911	5960	3842	4386	5288	3687	2884	4836	4195	190	3737	320	5943	2320	782	5850	773	1950	4540	5163	1468	1066	2604	3520	4772	2286	1626	4098	927	1491	4264	4656	1500	414	3492	2974	320	3643	832	214	280	4636	3797	3481	171	5576	4148	5191	3888
Row 28	1234	1590	4308	5028	4770	5279	5016	5115	2606	2500	4594	4659	3575	4586	1229	1322	4676	1122	2167	2731	2261	2793	1572	4887	3923	5545	2470	2598	2880	3878	1277	3120	4453	4267	3011	3328	5708	2430	4372	1417	5242	744	228	3820	1655	2238	4774	3268	1246
Row 29	2391	1369	751	3580	449	4874	3416	992	5084	4223	3754	1147	4153	2397	2423	4134	4829	3047	1663	2628	5081	3719	3928	3680	5001	4064	566	4952	3742	4956	1095	5076	2694	116	1703	1780	4383	823	4182	1423	2360	4174	5116	1640	237	4201	4531	3469	628
Row 30	1848	4594	2254	1850	5747	3659	2556	2337	1433	5580	704	2637	2911	3741	5265	3404	4912	4176	3480	1730	3277	5672	4535	91	897	2545	5087	4335	1691	4253	1095	4206	4173	587	534	864	890	1396	1202	2123	1012	2970	5676	2401	3946	2951	1979	1485	3466
Row 31	1169	957	3457	3000	834	630	3882	4400	2333	195	2606	683	4495	778	4067	3293	2048	2594	25	1117	4528	4777	5291	3648	1541	2495	2411	4136	4349	2874	1035	369	1746	1052	3322	5829	4923	3794	3076	4344	851	1148	529	1732	101	5473	3058	3402	1673
Row 32	3447	5824	5446	5313	756	2927	3728	5271	5051	2905	3171	3727	4080	3120	3441	3909	1106	4757	3952	248	234	3071	2899	1715	4328	2323	5321	3273	970	5643	1175	1861	927	5877	71	601	1187	4344	2076	753	1168	1527	259	2729	2291	1133	5451	4138	2758
Row 33	1224	4917	829	735	303	791	2616	5030	815	773	3908	1382	812	2299	2950	1652	3168	958	4196	5569	2142	3697	5024	1667	5211	3217	3389	698	3166	1440	3415	2401	1143	3663	633	551	454	3132	3432	5969	5778	4226	845	1994	2252	4140	710	5173	4633
Row 34	1207	2014	4618	2438	539	4170	4963	4714	5969	1348	3318	3927	4144	3758	3889	3950	3217	5827	5678	2309	4297	5950	5531	3430	3234	306	457	4409	5843	2944	5130	1520	5350	5154	810	3456	1087	70	4093	1871	525	2523	93	5146	4591	497	818	4200	952
Row 35	1313	2357	5201	70	1978	3973	4899	4913	423	967	1058	2357	2094	4221	1997	2027	1266	1363	3265	3462	1750	3915	1813	1440	5550	2943	3907	4763	4714	4944	222	3129	42	2294	5503	4489	5407	127	5675	4991	2651	1311	5089	5649	4420	692	2745	1601	218
Row 36	5966	3824	5264	460	2843	5307	362	635	5926	2897	1268	5574	754	4252	2983	2729	1129	2694	3595	4686	5323	3702	1315	5329	1122	2917	3738	4384	5615	5555	425	2194	4836	5575	780	4184	3519	4447	1094	250	3295	3777	5068	1745	4655	3032	1916	4505	5699
Row 37	1195	4335	2042	2090	5785	3296	1103	3354	392	3722	1728	5125	3134	142	4183	5763	4033	4437	4677	330	5813	4112	184	3692	5466	1351	2202	5388	1905	2752	2444	1233	3632	2691	3139	1869	2989	4989	1562	977	3319	5352	559	3224	270	1829	3707	2250	3796
Row 38	4618	1151	5402	4497	688	3474	1619	5166	4773	2586	468	2637	2133	4104	2992	4785	493	965	9	1127	3624	1965	64	3253	1595	4017	3626	341	3180	4060	5638	5837	3334	4965	2988	4913	4493	4636	2380	5935	984	3862	5779	5361	4022	1802	2544	5914	3706
Row 39	4893	5811	698	3084	5023	4219	235	180	567	5558	1220	3030	4725	5382	812	5938	4047	4525	4625	5890	1762	3877	993	4085	1303	163	2928	3539	575	4829	4974	2798	3601	1132	3973	2088	4130	4319	4443	2844	4971	5443	389	5653	5904	2643	4924	5754	1995
Row 40	5884	2607	1002	4486	490	744	4536	5932	204	5773	5733	5849	1785	5006	683	4122	4578	5453	5089	2788	1442	3363	2720	3533	4110	896	3442	3019	2139	2492	5071	4298	2853	414	441	5828	5357	3559	1610	4240	2280	1741	385	5859	4991	4260	1926	5248	3265
Row 41	4686	4710	5806	4199	2893	3130	4653	3326	2552	510	1540	2234	5438	1391	858	4140	4056	1031	5324	4719	79	165	5821	4806	2614	5891	4941	1212	5239	1981	2766	5298	4340	684	2391	3256	4905	2803	2262	5827	5566	1632	3930	2468	5240	42	2579	465	5210
Row 42	2552	582	4344	1477	1543	474	355	860	1722	3563	4979	1953	3986	4195	1906	4198	1940	2130	2086	3842	2673	3813	923	4687	5029	2066	891	418	447	5021	2625	4805	3917	2868	1215	2044	646	303	4074	5354	4804	3400	3936	919	239	5866	3741	2563	4674
Row 43	875	655	4481	3481	3590	1571	534	3628	2179	3516	5931	3356	4351	1969	491	1901	408	5903	5859	2737	5412	5155	1344	483	2549	370	3556	702	686	2789	5406	1951	5209	5133	842	2290	2392	5210	1089	5726	2607	2549	3915	779	3343	4501	1530	1516	2612
Row 44	3314	1787	3844	5565	2952	2774	675	3470	3799	1011	3327	382	906	4562	416	4631	4633	2947	1091	303	2399	4275	1476	1018	1513	2067	94	322	111	44	5921	5497	1746	3972	1856	3891	3876	3016	4405	1285	1693	1245	1128	3657	1731	3225	934	1138	2705
Row 45	2422	5799	2656	3392	4105	4142	2886	2970	70	5957	452	1715	5026	1015	1612	3478	5596	941	751	1629	3698	5801	5477	3303	1513	688	1539	5882	691	5945	2022	508	616	5951	4213	2171	1594	4782	5147	2697	5781	2913	4774	1593	1161	424	4102	4114	1731
Row 46	4894	4338	4461	2241	5233	852	3594	1327	1051	4498	904	3160	4354	4022	3278	2482	1203	2574	2015	3724	5412	5927	4099	4409	5177	2216	1345	3897	2747	1047	3890	122	2403	4948	2212	5659	4726	3733	4210	5170	1461	5383	4197	2605	3575	5351	805	793	2789
Row 47	4072	2909	4313	1087	3827	1648	1054	2869	2409	2734	4343	3341	2761	2921	837	3794	130	973	5322	3494	4527	2014	4690	5282	4833	5497	601	745	5589	5873	582	1711	4289	4720	3118	643	394	4651	2375	4015	5623	1051	5871	2216	1489	4374	898	2906	1036
Row 48	3329	1472	30	5737	5314	5601	2753	52	5998	5517	3049	372	2995	946	5617	4391	4040	2851	734	131	3690	4082	830	4649	1599	4211	595	2947	1054	1472	5908	3859	2326	706	3464	1594	5735	2295	2101	3414	4836	1545	1736	2617	5139	5579	5315	4509	2916
Row 49	2616	4109	1296	2388	5634	167	1086	1519	525	5574	635	4940	702	4588	5180	3858	4046	1760	2416	536	2385	3775	4202	5617	4131	1298	2175	1446	1510	1211	4605	432	2617	1307	884	714	4103	2334	4825	4208	882	3305	4306	2772	5373	4490	1792	159	771

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.