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	5406	2414	3837	1042	4963	4479	5008	414	1465	3454	5923	3294	5644	5414	4878	654	3299	1754	1608	5965	1579	3010	14	2086	1410	3899	2243	2002	3342	2316	5648	2748	4730	3485	3790	3692	1963	2797	4105	3427	251	4027	721	5894	3441	5598	547	740	1351
Row 1	2155	705	2930	5165	719	5015	575	4617	1258	2577	1959	3573	2224	4706	2302	5708	2496	5994	1671	5293	4098	5098	5543	2125	5818	5436	5566	5415	5983	305	765	2138	1009	3695	1303	1727	2710	1877	344	3967	4453	2302	1540	677	1007	3841	385	3503	3835
Row 2	2055	2795	1932	1152	2337	4057	969	1773	3622	383	1756	3926	1148	3893	4935	4842	5196	662	1552	1072	1005	5518	5525	3306	1057	201	4313	4898	585	1815	2732	2639	4610	4664	3790	946	2720	4758	2719	342	5141	4474	4268	288	2367	3202	5130	1562	3864
Row 3	681	2634	4868	199	2158	2173	1255	2358	486	153	2942	2301	2885	5581	910	1549	3370	1855	4269	2128	4574	4610	1268	3048	2877	1556	5414	79	685	976	3942	1366	3610	2810	1564	5767	4982	2819	2125	5468	2971	5067	1768	5856	4647	2677	1404	2017	4532
Row 4	5672	4145	3105	4282	5413	152	1159	968	5566	1238	1653	542	5179	3018	4151	1988	4581	3918	970	1399	42	438	4370	5108	2205	4225	3755	4881	5629	5772	3413	5301	3916	517	3582	3328	669	4741	4296	235	5978	5948	776	5157	2965	4926	1145	1546	2843
Row 5	2114	2945	2885	2551	1314	1992	4756	5539	5747	3637	5167	5518	1049	4467	3434	1566	2049	761	2235	789	5057	2469	767	5004	3244	5923	1969	2169	1067	3515	5012	3181	459	1896	5732	1772	3888	4487	1310	3634	2123	476	3152	3172	4943	585	4737	991	1346
Row 6	971	1780	403	3439	2546	5406	682	2469	1375	2851	3535	4889	1862	716	5347	3757	447	1118	1644	4933	2428	5278	1056	2904	2430	4227	1846	3014	2963	2837	4360	3934	4617	4762	1373	1162	4168	2055	3631	5543	4906	1165	4431	767	1880	3777	4524	2327	4895
Row 7	168	1259	1323	5446	2314	4226	1875	541	72	4889	3503	2908	3249	1437	1524	2011	2809	2686	178	4864	316	5720	3769	1481	4151	4536	3361	1928	3059	5687	822	3227	946	2144	2672	3260	370	4546	3800	441	3434	1303	3349	683	2739	4872	2693	5548	1558
Row 8	2870	4411	1873	2590	2180	3354	740	715	714	2667	3773	401	3489	1000	1346	5633	3671	4605	2	2217	2404	443	5650	3706	3791	332	445	2663	3025	5992	4220	5894	4403	93	2484	582	3446	3224	1296	4160	5891	5069	4560	3380	68	5906	3012	3739	4510
Row 9	3014	5955	914	3457	5605	4620	1247	5937	5064	3909	2961	5056	2129	2855	3459	2221	5338	4040	5667	2562	5336	3826	2452	4405	2386	5831	4473	2291	2843	2211	801	5857	2166	1714	3313	1770	333	4559	1706	5397	2468	4667	4452	4596	1521	1911	816	859	5951
Row 10	482	3420	5286	4308	5872	3691	693	5702	2163	2983	2545	4374	3783	2401	539	5497	5713	2308	5830	4272	4014	5226	739	2680	3678	5334	4201	5589	150	5059	5539	632	2478	4825	4939	2350	2515	5632	2052	4678	2615	4596	3052	398	996	3590	5894	709	5898
Row 11	5724	4980	3912	4950	5718	592	2627	5052	4792	2215	5202	3850	1754	5834	328	578	4773	2677	3092	4404	4728	1770	1018	3323	4821	1415	4319	2411	1309	5027	2309	1032	4007	220	5981	3725	811	2608	2777	5602	4823	1978	3452	576	1812	3779	1153	584	455
Row 12	4245	4987	5182	14	4	2505	4835	1419	824	1246	2727	5850	3554	3759	3857	3773	3739	1581	4584	346	4357	4186	5169	335	1637	5744	2146	5415	897	2729	5870	5141	1716	5052	5155	1720	1556	3990	3138	2379	5235	5865	2229	2788	3623	86	561	1362	1666
Row 13	5145	1707	23	3330	876	358	4966	619	2503	4381	1516	5232	4251	656	947	3302	5811	2667	4858	3801	5805	1237	3035	5669	3466	5823	3292	3551	384	4653	5217	5528	360	5239	2857	1235	5596	1823	1854	2099	204	3369	1330	4455	4025	2277	1756	3836	4944
Row 14	614	1636	4748	1851	4671	4416	5316	4493	1708	2866	4876	360	2082	4404	720	1321	1260	1955	916	3083	3808	3015	3287	1177	4344	1741	5202	621	3497	3037	5564	4110	4672	4311	5960	3343	2727	5276	1835	4435	2142	711	4795	4224	5114	5514	5544	374	1469
Row 15	460	3457	5276	3474	744	453	1818	2484	5654	2439	5980	2690	2003	4090	1362	314	4050	4704	3041	3326	539	1475	5467	1250	269	3690	364	5783	3234	738	1251	3693	4194	527	1167	4938	979	2984	1421	633	5423	1401	3323	1425	5491	4684	1738	3541	3388
Row 16	4778	866	3927	252	332	5176	521	4022	5540	303	1255	277	1553	4948	4471	2080	115	3408	3058	3099	4829	3691	2521	229	1013	3946	5720	5697	5683	3260	3084	4461	4125	1011	4713	4457	187	5233	2479	5726	5536	3734	3	1089	2681	4473	3168	2796	1880
Row 17	226	5894	709	3916	2415	937	4929	360	657	4625	42	3917	1709	4503	2041	2719	3215	498	2906	2448	2976	2631	1984	709	2633	3072	3390	1106	240	186	2986	466	79	3694	4382	2493	4631	3310	2852	5287	1934	2894	3203	3643	1396	5244	362	4611	5742
Row 18	3267	1059	2717	5898	3042	3426	2531	114	816	3636	354	1001	621	819	1080	4314	5200	3572	2945	2510	424	2231	4444	3318	5434	2086	4713	4677	2448	3324	4418	5715	4383	1135	5612	1425	4561	2143	1539	5376	5779	1892	377	399	2711	1456	4713	1911	5028
Row 19	1657	4420	5452	3888	2863	2769	3321	4949	1482	1998	1397	4805	415	1111	3188	1550	723	4612	110	2865	150	5486	2643	2041	5863	3042	4752	1318	1755	662	346	3412	5081	5797	1299	1944	2565	4620	893	4046	617	2289	2851	1032	3400	38	2581	4122	4649
Row 20	2690	986	4799	2176	3629	840	2038	670	5591	3356	2425	252	3701	5836	5332	3498	1135	1276	63	5754	2169	4108	371	4457	959	1402	1856	996	3983	5978	5645	673	963	4443	2848	4592	5282	4886	5262	4872	2241	1686	5123	5942	1521	4455	3439	2656	5731
Row 21	3501	2410	1899	1609	2780	356	2567	4182	2211	3562	2164	2189	3207	2836	3152	1649	5683	1743	931	4568	1004	5802	809	2689	4925	750	4210	3380	4189	865	3110	1690	3274	5008	3298	54	5363	5864	4235	1574	3426	399	3762	632	3234	913	2281	2917	2655
Row 22	3211	1485	3659	3013	2293	347	1937	3043	4557	5316	1231	5421	2426	2920	2695	1433	218	2749	795	81	983	2369	3507	1381	131	4139	4615	1043	419	1531	3698	3630	3016	1356	643	5308	1703	2579	2351	259	1895	3581	5680	4320	501	2374	5753	718	5122
Row 23	548	799	105	2916	4306	1486	3046	2444	100	4089	2863	1631	1787	493	4646	3143	1135	3954	4845	3713	304	5104	5608	3885	4783	3928	4386	1157	3680	5104	279	4227	5902	384	1143	4208	1869	4189	651	1969	2277	3513	3599	4063	4005	2245	1205	5139	199
Row 24	50	2852	502	5154	2460	4387	3936	388	2773	5093	4067	1876	5371	2294	1778	5755	3436	5985	1623	1624	635	3592	3901	4148	1191	1964	2153	3435	3169	1292	3633	3218	4144	4135	2371	604	2522	307	991	5294	5399	5058	1170	4770	1351	2947	4524	4787	2932
Row 25	147	411	3567	3738	4312	1714	4929	275	3867	2363	3443	5159	5996	661	3302	4131	3032	3906	653	3338	4896	5947	2737	3953	1116	1507	5304	4063	31	4091	994	177	4502	4561	3915	2813	274	2843	3088	4141	5206	530	3299	5202	1191	601	3333	4222	4506
Row 26	3985	1560	3402	3932	4297	1355	5047	5803	659	3110	5834	4749	4104	10	3251	2664	3925	63	2938	768	3151	1078	5974	3681	4377	5175	4871	4978	2508	3093	3483	492	4653	885	4423	2949	2239	3470	2752	2898	580	2585	1647	4683	2595	4897	1346	520	4960
Row 27	4283	1287	2110	5361	1260	5790	3738	435	4660	2715	2942	1753	198	3434	405	1082	1857	3354	3321	5327	105	218	5906	2690	1864	4589	5284	761	5934	5803	5720	4217	1090	1829	3578	2350	1618	1315	2785	278	4029	5726	2031	4226	3160	2435	5308	5017	5789
Row 28	2628	4344	5893	2846	4249	2583	4710	2838	1867	5470	2771	1669	5189	988	2759	1018	4565	5108	2636	5880	1892	2914	3908	1618	4944	2134	4778	1379	1441	3795	1167	4069	2138	1060	914	386	3642	5623	3223	5508	5093	5994	1177	4282	982	3935	5299	5547	3043
Row 29	1934	5426	4935	4847	3334	553	3790	5467	5331	5169	908	3125	335	4976	5262	1394	5890	5648	5035	5512	2871	4542	4605	2865	5719	2886	3846	3653	2184	3392	696	4118	2818	5631	2965	152	183	755	5618	5513	5923	526	2638	257	5501	1899	1650	5390	1546
Row 30	685	4902	4416	5227	3507	1280	4945	392	5126	2598	2576	2518	3293	694	5335	2924	3658	5486	3106	4412	5104	2619	4334	5630	5256	4591	5130	1155	241	4520	2700	925	3422	1116	151	928	2395	5096	1320	1521	1693	3895	4038	4986	4589	3372	1909	2246	2858
Row 31	5015	658	1962	1634	4992	1591	890	3582	721	2044	3822	5241	4743	4747	2662	5858	4898	3590	2253	3993	4909	3773	5686	2804	1811	4672	1392	5182	581	3638	2040	5595	4295	4002	1229	3286	5593	2118	868	314	4161	4690	5555	2904	3436	2217	2761	2334	5806
Row 32	5014	327	4715	2787	12	1518	4597	4684	2910	3779	5264	547	5819	4859	4841	3821	87	2127	3413	2204	2994	3727	364	1683	3281	3267	5119	5497	28	1453	5302	5042	1779	4017	1829	1791	5534	425	474	2443	4204	5738	2989	4022	4596	1830	1842	4682	3956
Row 33	5255	885	950	2981	1249	2633	262	4516	1752	5758	4544	3204	5060	3585	4983	3076	5413	773	2610	5838	1247	5053	4041	984	2041	2063	5579	3871	3904	4261	1827	3159	5145	2776	140	394	5408	401	4909	1160	158	3452	4363	5218	1037	3345	2294	450	4118
Row 34	4903	287	5364	3955	4328	348	5996	390	5927	3866	4294	4187	5692	1452	3332	2468	1591	3726	1876	1992	2634	3035	2150	86	1398	1367	1123	4743	3660	1572	2860	2562	1859	2224	517	186	2571	512	575	2498	4378	4868	684	4070	320	4016	537	1911	1741
Row 35	2412	3902	4375	5447	51	4460	844	1417	5583	5586	5077	1154	2446	1639	3012	4669	2155	3197	1240	2666	3772	3737	1043	2640	4421	5112	2959	2436	5649	4870	4176	2061	2771	2550	1507	2822	1010	2351	4239	592	1937	3315	1746	4383	4953	4758	3051	1107	1954
Row 36	4291	3773	5726	2027	4816	2365	448	3927	5323	2883	3576	4192	1059	5636	963	3608	1143	3784	4618	3493	2022	5210	5430	5337	955	3812	4290	5712	863	5396	1666	5153	3169	1391	1180	1984	3755	1627	5911	3078	4510	3486	1269	5568	3121	2232	3176	4263	15
Row 37	1793	1756	2037	1002	1185	1373	1957	4997	5662	1668	5859	5058	3334	5011	2226	4724	191	4210	2478	1817	4120	5556	327	1606	824	5894	4726	3056	3069	2989	3070	4862	4745	5107	5864	5929	480	1821	4926	142	3488	4784	5199	822	3795	1425	5545	3985	5634
Row 38	2023	5802	3754	1578	128	5359	2402	22	4085	5457	3091	1073	2527	1952	5818	1633	1816	5746	2112	3636	4671	2253	1124	3455	1452	1945	1249	2877	1490	5234	2511	3512	5035	264	5090	5163	5623	1492	5184	3707	948	2274	4780	3475	4226	4597	5108	41	4343
Row 39	1219	3677	3014	3472	4800	468	4924	745	1717	1800	2234	950	4311	5746	5985	4574	4835	5147	4197	326	4330	1903	1274	604	683	4748	4829	5279	3856	4870	3622	5074	2546	635	2546	1346	1103	1470	2090	2820	3269	4323	3769	1579	4068	3754	153	2903	2900
Row 40	4349	3229	1230	252	4503	1834	935	3251	662	214	1106	5532	3835	180	2077	4470	2725	3423	5573	4194	5512	2392	1463	3835	161	3042	1903	3914	3195	4805	814	1544	2034	2043	1796	536	3877	2730	3786	4538	2943	4891	4070	778	5070	146	5247	1795	3569
Row 41	4819	5989	3080	1211	1452	914	1371	4493	2817	5285	1688	1621	98	3232	3655	2141	5027	4190	17	1757	1975	4555	4699	865	2624	5476	5935	2770	4723	1729	338	3542	1717	3418	4752	3168	4332	123	1661	1148	5408	3348	2768	5506	579	423	1646	5606	4612
Row 42	1663	1362	586	217	61	1451	2841	5536	1385	5611	4259	3113	5948	1800	4830	3366	552	1997	1697	674	3657	2844	82	1005	5612	5587	1584	34	1232	1189	4645	2895	2551	5231	3112	2611	682	5952	2147	2067	5563	405	5179	5511	2205	4009	2876	2756	5
Row 43	4572	3430	3661	1415	3511	4666	1027	3097	249	1060	4329	1438	5705	1224	3988	4935	4335	599	5617	4287	2745	1683	3849	3150	862	3359	5354	4870	234	2110	4874	4806	5539	2535	221	3050	1200	1247	147	1449	2307	4475	2886	2011	5699	874	946	4033	1472
Row 44	562	2319	4217	2244	167	1367	3105	3526	721	1975	3760	2830	848	2565	2369	3383	2785	5418	4583	4032	5564	31	338	4039	2917	2348	3737	3791	3293	1769	5262	3855	4088	3479	98	4255	4845	3203	1780	5566	5177	5539	2395	25	2104	4763	3408	4889	4180
Row 45	1990	2920	3744	2021	3257	1782	4938	5604	5518	2728	2897	1287	1990	751	5374	5468	849	3628	4313	4052	5408	3878	3229	4947	272	3254	1051	5035	661	5939	3215	2651	2858	958	4671	114	2739	3609	5718	2257	336	2615	3543	2325	3366	2917	1793	4215	545
Row 46	105	2266	5953	3982	5495	4899	4254	2748	5949	3289	3408	5887	503	59	2745	1461	4729	2858	4199	2338	2576	456	2673	5190	3999	4998	2555	915	790	769	1459	894	3035	1411	4876	2529	310	3130	5276	259	418	2684	146	921	2742	2890	2381	1471	5747
Row 47	580	3808	2323	1035	481	1512	5033	5478	4066	5948	268	4835	1407	1162	1869	2818	37	4397	3127	3167	3673	3386	3585	357	3531	4505	3098	420	886	4569	167	1465	2377	2489	2500	2858	4000	1533	2336	2066	1480	2603	900	2886	3765	2769	5703	3801	1165
Row 48	2830	968	4838	215	4552	5194	3745	3057	2292	4165	3942	861	4331	5406	3238	820	1906	95	4820	3438	2431	886	4918	5033	1785	1804	2797	4554	1507	598	5719	4336	1566	4556	4551	117	3750	2296	3173	42	460	1115	902	4791	520	4139	5611	2426	4234
Row 49	4430	5863	664	5315	4780	5697	1100	584	2494	5654	2090	3092	5372	425	4657	3927	4976	4774	1677	1271	1947	1718	1731	3061	2619	522	3581	758	132	6	4991	4562	5869	5655	3877	4649	5351	4977	5232	1845	4630	1321	4936	4001	1746	3593	1928	721	2366

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.