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	5158	3884	833	5481	4461	772	1487	5395	4185	1555	5628	4872	2651	171	4864	2043	5232	1184	1818	4591	3533	1927	2189	707	2784	5440	2145	2220	5567	1704	3409	4729	34	5852	1362	2987	5284	2858	1881	3148	630	2583	4769	404	3195	2519	5873	1074	2982
Row 1	1928	1697	4485	2636	4734	3324	2955	5328	5744	5590	2498	5347	5399	5603	799	5809	4195	4029	3926	1319	4546	5925	1881	3799	3869	1875	3234	3630	3772	4304	2864	2944	1718	4710	4019	3790	782	3205	11	5706	602	4771	2717	2722	923	5921	4327	1715	68
Row 2	1713	1577	1761	1046	3908	4807	4728	5491	4711	2183	2543	4246	4338	5304	4245	1389	1899	4845	3742	2580	4099	1623	5348	3770	2595	139	2418	3223	3638	3366	3514	2926	5076	3729	1888	4800	5373	890	2925	4685	4509	1493	4911	5599	298	2988	3238	2567	3162
Row 3	3188	648	517	1676	3962	904	4445	2528	3386	2202	5977	796	3765	4161	2890	2647	5396	2623	5777	1295	4248	3661	5820	4177	2387	4560	3876	2159	988	3710	2442	3182	2358	4530	4812	371	2805	849	4748	2545	540	2699	1346	2849	1055	5685	1959	2802	1001
Row 4	2322	3550	3168	4539	5810	3819	1370	2043	4563	2397	4952	2578	4284	1900	3910	31	1255	1736	2323	3358	1223	1597	4169	4578	4064	5046	3861	2093	4186	3619	2721	5244	3567	671	4883	2988	558	256	1945	4005	558	4810	5882	2880	5819	1488	5330	5814	128
Row 5	5355	5922	5218	5712	1506	5692	5013	5744	251	5123	5844	836	2747	476	5538	1637	3062	2201	2516	1943	3000	166	4632	2821	4241	5861	2529	5262	4071	4311	545	1174	1464	2019	3528	2914	2820	2239	3794	3084	5084	1009	717	5846	5162	5024	4587	3860	5918
Row 6	3792	4750	975	432	3118	1114	4287	36	2755	2793	1581	2796	3184	5953	2505	3551	2818	4401	2072	1560	4994	5398	1893	4529	1748	195	1350	1782	1801	5188	4903	2062	4257	2122	2333	4098	4812	5415	348	255	4693	2394	1880	188	1415	33	1156	1833	5122
Row 7	1157	2687	3940	5228	4395	5646	2050	363	4213	3817	49	3303	3045	2555	4900	665	1636	3068	4657	4434	5286	700	5675	5817	603	227	3363	4039	3007	381	735	1886	3888	78	4867	5404	4873	630	3034	1917	4498	1759	135	211	848	2077	199	4376	3128
Row 8	726	360	2711	522	4662	953	1748	5762	2252	1902	4144	5249	594	4395	271	2423	4172	5501	779	4218	447	4359	754	5137	5140	1567	5291	5412	4448	574	1980	4132	2425	4896	4537	2913	5167	328	2895	1349	694	2757	2778	5593	1873	4230	2564	4859	3139
Row 9	4153	5345	2253	5317	4346	636	3653	5772	1994	4360	4498	2964	5627	5011	227	2460	5648	5260	2141	2794	2555	3805	1026	1153	3903	4096	1288	3703	1723	3232	4346	3634	1641	3944	590	2961	1186	5456	5968	5128	2964	3993	4752	208	2567	824	3911	4906	2385
Row 10	2788	2269	2940	3017	5329	3436	2330	4268	2638	1899	1245	3659	586	3613	2105	828	1910	2999	4519	3533	4232	480	4979	2701	3671	4999	770	2703	4132	518	5943	1475	1285	816	1152	85	4434	4428	4547	2461	2203	2086	2303	1431	3150	1808	5555	4971	4350
Row 11	4631	3685	815	2344	1355	361	5741	3400	402	5556	112	2701	5331	1781	5614	4481	5252	4832	5031	5619	4009	765	55	4390	3870	1272	3218	1729	3070	3729	4088	3248	244	1965	2641	2014	2543	1379	3137	3474	1072	2116	4820	1262	463	5015	1717	892	3452
Row 12	1012	400	711	5389	4581	3524	3987	527	4367	5127	4741	3268	3092	5819	2160	3268	2305	747	2576	3967	4905	2058	1959	1070	2416	2391	5478	184	5263	4137	2680	4747	3523	5773	3424	5797	4205	5659	2772	4485	4815	5802	5238	5707	4929	377	2814	5087	2016
Row 13	3154	4686	3422	2042	598	3807	1982	5616	5341	274	2331	2499	117	2283	3702	4322	5809	5515	3441	2916	394	5367	2926	5730	3513	5942	5869	845	4083	4252	5119	12	4118	1821	2450	5189	2076	4015	4102	5217	3227	2320	466	244	1282	5796	48	3679	570
Row 14	3511	4503	3784	5843	4371	2377	527	330	1078	766	4969	3153	4237	1113	5477	3754	2359	3982	2920	5197	277	113	5747	1946	5709	4442	1669	404	131	3775	5617	3573	4469	2927	4602	3629	5545	5576	4919	3566	1367	4207	4102	1166	624	3837	2863	2455	2262
Row 15	1011	4840	4674	4372	2307	30	5463	2990	4645	1318	1132	1428	1117	3359	3037	3776	70	1488	1029	3232	3426	4080	299	4697	4943	1593	4319	5502	4159	5013	4532	5354	172	5469	2844	4168	5841	2943	4899	2471	2455	2224	3456	1598	5690	3140	4770	771	3816
Row 16	2721	4113	2131	5495	4994	1225	880	2894	2769	574	5315	1046	2619	4065	2638	4069	2107	3271	2255	5450	3772	757	1657	3531	3214	4171	931	2780	783	1372	174	2681	594	5844	667	5951	633	4234	3201	4659	3153	3911	3561	1445	2555	3428	1296	28	4831
Row 17	4089	4837	4647	1674	2795	1063	178	4500	5331	571	5763	360	4901	2360	921	1822	5190	2149	3984	4613	3011	4989	5668	184	1191	1159	4003	5541	5693	5555	2710	3615	4275	3946	2285	2565	3611	5404	3461	4035	2904	5686	4580	3469	4887	4952	3672	4433	3533
Row 18	5896	1946	5590	3028	3069	5716	3834	769	4793	5865	5541	5398	5384	765	3581	286	5745	5174	4321	3565	835	2399	3482	330	2581	1584	4284	2950	4120	4767	1685	826	5498	751	2493	4141	4325	289	2202	1146	2628	1349	2757	2232	3968	1787	1550	409	1279
Row 19	2813	4189	1995	5838	5626	859	1366	2679	2035	5172	2574	3616	3233	1248	759	2797	4294	1289	520	5002	1635	1406	113	969	696	241	4241	4699	4732	5050	5550	3524	4738	3988	5089	1829	2013	3198	1553	424	295	429	2283	2305	2100	5911	4330	4895	2445
Row 20	3763	4108	3849	2565	588	1450	270	1996	1347	352	3476	1450	4569	4955	2264	3777	5309	942	332	3746	1505	1355	804	2053	653	3175	2185	5915	1927	250	760	198	167	1571	5335	2584	2952	4176	2531	5459	1996	5199	2232	5428	4466	1202	338	1965	2494
Row 21	3826	2353	5808	3156	1030	4404	1159	2996	3573	856	2076	2055	1742	2786	79	3960	5259	3897	5282	5922	6	4591	862	3407	2788	5052	3187	2687	263	5243	930	4785	5986	613	3428	1244	3325	5202	1587	4031	4169	5298	2872	4771	5557	2963	3896	1698	2421
Row 22	1003	5526	3668	2309	411	1470	5666	4060	4006	3216	163	4644	3739	2756	2793	5851	5681	1246	2202	150	4845	1578	3499	720	3296	2660	873	5912	4451	5259	3914	5368	4123	678	5638	2664	628	1715	4772	1852	4694	2805	907	425	2156	3659	5020	4548	1268
Row 23	3820	1769	5880	5043	5780	3915	3763	3630	5960	1474	3547	623	3314	5111	5458	667	2049	929	1367	1267	14	518	993	1176	4134	2669	173	5066	5468	3501	2063	1312	3663	4578	114	56	1141	3628	5463	1823	5625	2634	3555	163	5003	636	4786	5137	2746
Row 24	3421	1301	1043	627	5227	440	912	3052	5686	3216	1293	4667	3199	5019	5009	804	358	2854	2900	931	1319	4394	1607	5149	1081	3502	1979	1779	3814	5124	3191	3856	812	462	3329	3382	4140	2379	4604	4255	5139	5103	5742	1989	2070	4114	3904	1293	2183
Row 25	1992	3045	1712	5764	3879	814	2491	845	3059	5702	1458	1862	1940	1433	1138	4557	3382	545	146	4659	3604	3391	3738	90	1813	4478	3902	5271	4172	2655	1870	4135	527	4257	1308	5390	1621	3778	1897	2196	3639	4954	2217	3753	5912	679	3714	1135	1029
Row 26	1475	3763	1922	3851	4965	4894	842	781	5749	5863	2903	5877	3232	1066	2407	278	5756	991	1983	434	5937	2127	1040	2816	4830	4414	2492	1522	3340	4470	5557	5092	30	3212	5564	5897	5054	4535	3825	3846	2397	134	2900	5968	2392	5226	4114	2008	5093
Row 27	948	1610	3778	2213	1408	5167	5798	919	2959	334	3352	5335	5188	3969	2723	4788	1179	4952	2908	3651	1244	1312	910	3771	7	3083	5153	5302	3373	1431	589	2758	5520	4966	1703	803	2087	2859	2235	4260	327	5494	2123	3173	401	4236	5101	2316	2992
Row 28	3148	2988	4185	1837	3388	1743	1156	467	1750	5565	1848	5387	537	4115	2528	1183	249	1540	2999	2365	3257	4268	1217	2019	4794	4484	592	3803	2399	2928	3340	4426	3377	4234	452	1855	4789	4424	1546	259	5504	2326	1467	2437	1805	1254	4477	4661	3627
Row 29	156	2928	1834	5956	4952	3600	3082	580	2720	1784	4410	5060	1092	2739	535	548	1583	885	4200	1998	939	4396	66	4259	2683	5196	1950	693	2854	1675	4378	4493	983	5441	5122	3739	153	4194	741	1780	4688	3855	2715	3729	2920	749	2733	1822	10
Row 30	1508	5176	5029	2142	249	2882	2962	5545	4337	826	2914	1558	2264	2035	4492	488	2501	4612	5424	4830	5148	3778	4441	1110	4055	879	4806	888	5082	2453	2661	1557	635	2011	3121	5904	3265	4539	5274	5355	602	5906	4992	3819	3282	1228	3853	4841	5721
Row 31	4603	819	4331	5183	1427	5760	3834	748	3184	5662	1294	5971	3582	3108	5167	2961	725	5225	4700	1653	2910	951	1632	4094	1745	2293	4218	937	3112	2345	783	2364	2248	1469	4117	4819	5523	4281	1955	1016	4660	5949	5549	3303	2503	5268	1503	3279	782
Row 32	3964	5019	5216	4405	1865	4725	980	3211	4909	1847	3016	243	359	2746	2577	4333	944	4209	4504	90	3845	4130	3777	3926	1449	1639	213	2257	452	436	650	2110	247	1332	4414	5157	5097	2481	3435	5978	5112	5454	4940	2025	4835	3051	60	2422	3061
Row 33	2480	4227	4849	459	4403	1449	4278	4551	4573	5546	2454	2791	3295	1905	982	1784	3296	3675	1329	2603	4156	594	2808	967	5054	2487	4545	4598	3180	4818	4680	152	1	2066	229	1797	2832	4790	3525	1000	3709	1102	37	3848	3601	4606	2078	2427	4070
Row 34	3997	3868	2484	2534	320	5561	2243	3138	4440	192	4630	4474	3283	2521	3320	990	5872	4814	5896	5128	5377	3471	5324	5714	1940	4565	10	3237	5064	5777	3818	223	4238	4869	347	5546	3718	1703	1219	1711	3868	3752	4835	3378	4865	3560	2555	5647	1468
Row 35	1004	3198	4169	782	4983	2311	5394	2457	2957	4763	3660	3974	1725	2566	2788	3708	1648	890	4828	3799	2124	1834	1885	4582	251	4143	3831	5691	3876	3435	5594	1355	5335	4743	4124	5726	1887	2658	360	75	2758	210	1978	2679	865	120	2727	656	5786
Row 36	111	4600	1644	3529	5285	5942	4995	1402	953	1326	2301	2856	5658	2699	2592	3079	1315	98	298	935	4029	4032	4444	5560	1046	4925	1384	1919	1341	3786	5853	650	2702	4874	5167	1416	4808	4083	4942	5268	4149	94	3772	3015	114	3125	4509	827	3120
Row 37	1119	4527	3369	434	4482	4341	2439	2701	3899	858	4884	5864	2243	5712	1876	2348	66	725	899	1829	3776	3122	4176	2384	4682	3169	5196	4813	5450	1997	2686	5222	1390	2131	1181	2955	3199	4188	3801	46	4901	155	215	2900	3012	5770	2010	2623	1767
Row 38	31	2429	901	2873	4770	599	811	1836	4292	1105	1460	5823	3085	4509	1734	1680	1671	2010	4807	1535	5983	2685	2544	20	124	452	871	5145	1010	423	5269	3357	568	3617	5046	4589	1172	5736	869	1074	3282	4506	1278	812	4610	1271	319	611	4910
Row 39	2985	4193	4518	4687	1094	1156	5247	842	3882	1361	3828	2706	4332	4547	2181	3720	4559	1754	251	1678	2700	3823	2983	344	5534	4297	5542	3849	5896	744	1694	677	2233	357	271	1664	12	2456	905	4897	3322	3136	3315	2074	1728	5297	5693	5334	623
Row 40	2387	446	689	5289	3076	1723	3870	3801	5434	5977	4796	4197	1555	5230	4169	13	2341	3386	2882	146	3251	2943	2366	1358	1497	92	320	1460	2646	5976	3788	77	1580	5616	5	1076	5545	32	2698	766	3356	3680	1276	4845	319	20	2266	144	3417
Row 41	1831	2252	2715	2055	5516	1958	522	4220	4218	3841	970	3273	3646	1040	3202	5896	5589	4260	3122	2315	923	1457	3719	940	1725	2729	5981	4709	5149	5025	5587	3804	4599	3969	3865	5342	3521	775	712	4917	5324	5892	1253	2070	662	5784	2815	2022	3474
Row 42	4913	912	2850	124	1833	5110	3512	2158	336	986	4556	5927	2156	1031	2338	386	26	1469	542	4634	4692	5222	2969	2147	4286	2262	492	1706	5213	4238	3521	2808	199	1642	2270	5581	1434	5347	4322	2036	1188	5257	3006	5535	966	3182	4967	276	3359
Row 43	91	2043	2608	1642	2536	1420	1017	5435	4064	4000	2115	1180	2359	70	5612	5650	1969	3293	5483	1907	2400	1036	3673	1018	2767	4889	2828	2358	2211	5285	5955	5314	4010	1413	2057	2827	4271	4859	5433	4475	4478	2219	4899	4127	3877	4140	1788	4758	2395
Row 44	3751	3040	5147	982	5852	3418	479	3847	4482	3952	2592	595	5313	4452	2587	3715	824	4364	1659	3686	5276	2420	4749	1548	4758	254	5691	825	3024	854	1225	4512	1784	860	2919	1172	4944	4901	3465	5718	2518	2782	215	5800	2871	1135	5409	4957	2577
Row 45	5526	3387	685	5226	2005	4516	2128	4595	711	5777	1268	367	706	1180	4743	5741	3568	4239	5977	3253	5248	1253	3585	235	1166	3738	850	255	2383	785	3299	692	5404	543	3252	4734	2960	4456	3146	1649	753	1075	3501	3648	4996	631	3013	3171	2502
Row 46	1012	2606	4335	5833	3702	4460	698	3689	2448	460	4419	2229	245	1763	2836	3091	126	422	5486	867	1292	3581	1270	1785	1546	985	1035	3428	3515	5073	3712	4422	178	1529	5173	513	1976	320	1414	5404	2102	2042	2977	2290	4835	353	2795	5845	3243
Row 47	3431	2767	5775	2111	5457	4164	207	3383	2247	1648	5294	2703	779	4066	3352	470	709	1322	5603	3742	2591	2026	5569	97	2904	1330	702	1766	3897	4116	3768	4585	538	5329	1662	5761	1523	3164	2147	5664	753	897	2229	4673	5187	5486	5325	4752	1888
Row 48	4000	3057	672	510	4405	4879	1712	582	3838	3477	4465	1487	218	5577	3863	2086	455	1396	1668	1646	2101	5922	5679	4913	3249	2744	7	3267	3361	1366	2132	1730	4952	1424	1321	4763	2539	4352	5025	4705	4154	1329	4181	2816	5029	1837	2694	2637	4209
Row 49	2295	1021	3069	4853	1274	79	3114	1877	921	716	2858	2093	4157	1278	2070	2755	3743	4139	3240	4909	4038	2205	5431	5456	720	5030	3635	1371	5023	4369	2049	3854	3172	2049	2085	376	4550	2353	1780	2933	4901	4376	1940	2284	2785	2818	5028	5162	1655

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.