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	5021	104	120	2157	4709	5260	4383	2072	3839	717	2171	4915	5024	2993	2255	2921	4652	4874	1595	976	3196	3649	3951	1011	3828	947	5924	2827	698	5615	1660	5740	4955	1021	3670	3726	874	1910	4502	3967	290	3105	629	3399	3523	5607	20	126	786
Row 1	2229	3648	5586	3643	4579	474	1524	5624	4146	520	5312	5349	3637	3161	3068	5567	4613	5030	4786	625	469	4658	2188	1019	2352	4973	5933	2586	4313	5410	5793	4471	4855	792	4546	4668	2526	2886	5287	3494	2833	5276	3396	1308	4664	253	3213	5224	800
Row 2	2570	1849	1041	1563	2679	2105	845	2086	3320	4169	4060	1304	5562	1189	303	4589	364	4989	5017	555	2147	3939	2414	2071	1105	4459	3645	4166	1300	3527	2548	4738	1835	5916	2162	1028	4801	3384	3251	3785	697	42	4309	2344	2001	4727	5220	4901	5729
Row 3	763	1761	2007	1997	790	2355	3312	3451	4429	1411	722	5076	4065	2280	157	1895	1675	553	360	2834	3709	177	177	4295	4439	4920	5609	4211	645	739	5622	2980	4484	37	4769	5640	5970	5952	2680	3667	3726	4066	4786	5001	3860	1083	2550	649	5332
Row 4	3368	3364	352	3435	5	719	3003	4380	4938	1691	3165	1676	2380	4188	4045	2026	3729	1201	1516	3001	3622	4121	4559	5457	2461	5276	5464	923	355	2383	818	3178	667	519	4255	1550	255	3085	585	4941	3648	1949	4047	3303	4410	438	1123	3878	4256
Row 5	5129	1206	3553	53	597	742	2634	2015	258	2866	2655	2069	5411	1725	1734	3758	907	5646	3401	2591	2053	3296	5979	3332	5536	3300	5380	3825	1842	4583	5036	93	5612	3526	2310	2381	3372	4646	5692	3239	4456	3681	102	4919	5201	4848	240	772	3844
Row 6	5408	4348	1452	3840	4436	2592	1879	2957	2503	1481	3473	5611	1210	3413	3888	4413	2222	3986	1561	5425	5279	593	1270	5221	4109	2760	2513	911	4672	3806	4443	1395	5194	4990	2173	3758	2873	5753	4465	82	4669	4090	4730	2669	2554	78	2872	57	5160
Row 7	3964	3833	5848	2657	568	1054	4285	4799	1575	2836	2917	235	4159	4635	3711	2435	1124	4583	2453	3731	2231	1860	714	5209	455	5818	5733	3315	104	957	5013	5917	1829	2837	4276	2299	3545	3154	2289	1158	1297	4770	2428	5612	3198	4858	2737	3766	1862
Row 8	4144	3326	3943	2914	1356	1229	4230	5417	2112	5627	2203	5268	5843	4397	667	1882	4801	3098	846	4093	4163	3979	2207	2387	5460	3918	950	1544	4873	5675	2117	531	4257	3877	710	2322	4492	2136	5435	2912	3948	387	1705	1036	4240	2113	1465	4028	559
Row 9	3493	5071	2266	657	3815	363	4898	4982	1137	2371	5236	808	3813	2623	743	582	1160	3280	2950	513	1280	4196	5266	2864	5006	3040	515	740	4021	2245	4192	1720	2485	1717	89	1523	1639	1234	4022	5537	3758	2981	2449	221	1607	4307	2751	4885	3017
Row 10	1257	4470	559	3403	1458	4778	780	4773	5447	2584	1592	2524	3788	5165	3947	4071	3905	2615	1208	5406	1823	2431	208	3023	2789	4199	4030	1799	2720	33	696	2449	342	4445	3467	3310	692	3865	2887	2005	3390	4706	2819	3158	262	2928	2778	2308	5928
Row 11	2269	5663	2139	2422	383	4606	1663	4902	832	2910	5691	4227	1541	5119	1574	5847	3123	2091	4703	2512	3693	1590	5312	4618	4831	5762	5381	3429	4167	5830	948	3699	3237	5006	3553	3283	3533	1021	2046	5520	3903	1830	4030	2141	3928	5996	5036	4407	131
Row 12	3226	5857	518	3285	2473	2057	5755	2346	3223	5253	1828	2632	4593	188	3443	442	2054	2071	3005	942	175	4852	2268	3339	1038	1525	2201	5195	2156	3363	4219	1129	386	5833	4196	5341	5366	227	539	3842	5585	5092	5042	5679	3501	5817	4092	3082	5523
Row 13	1653	4101	2803	4595	4621	3127	5601	5224	4758	2964	1212	1927	2995	2747	5222	1875	4380	5477	2585	4398	4903	373	5438	734	1032	3054	5935	3467	3132	5198	3737	5253	3434	3020	721	5381	4276	5851	1459	1000	4963	4462	206	1257	3414	3925	3843	3276	1834
Row 14	3299	3809	5854	3716	2242	4965	3502	930	975	3107	949	4773	917	654	2178	5961	2103	1540	4965	89	1820	3418	2650	960	3805	1721	3064	1362	3873	4334	2952	217	4743	4489	3405	1831	1998	134	259	4083	2192	4317	998	4312	384	2356	2371	1777	2289
Row 15	1385	1929	1794	2579	3863	5481	788	3769	2584	3970	5036	185	1845	3936	4764	3292	3169	752	3052	3077	2572	537	2109	4592	4996	5318	2281	5454	296	1466	2182	4469	4525	1627	4875	5354	3717	50	5864	4224	3374	4917	5677	3594	4429	3567	4875	2616	744
Row 16	5161	3476	4267	605	4293	4803	770	4877	4652	3781	1001	1086	3593	5550	3978	3421	3344	5820	5719	2161	2801	2424	1487	5853	5928	2484	5360	1319	3442	859	4855	2273	4943	3230	4388	5249	521	5689	3162	5846	4467	114	2855	582	448	3269	3223	4493	940
Row 17	4570	2815	4497	4968	353	2535	946	1635	53	3266	345	2089	5037	5883	1490	4953	1813	3019	4463	1734	1128	4816	238	653	625	5466	15	3199	413	5491	2393	2082	2526	4484	813	5888	2311	1390	3236	3206	2982	206	1502	2213	4410	3678	5873	822	4348
Row 18	3671	563	2876	5411	3779	2681	1105	3036	5432	5517	2247	3761	5226	2522	5433	5375	3557	2615	776	1455	2831	2464	3244	277	5276	3852	2139	4907	5753	1583	1752	2886	2700	425	1175	4493	3079	5727	946	3446	3306	1235	4330	5682	4449	2806	2315	2496	4194
Row 19	5776	298	1481	2188	5690	3747	3721	4384	4005	5526	4767	1972	1970	1583	1685	2264	2802	4285	4344	4992	1496	5460	1907	3557	4567	4502	4386	4281	3033	219	2651	4347	2813	1537	1533	5148	2056	944	5036	4234	637	3104	2558	1981	3882	74	3460	1539	901
Row 20	2773	1065	4133	84	4598	4118	4020	1871	4179	5342	4176	2605	1095	1939	1136	1643	5344	220	4287	5466	5105	4794	5439	4655	3996	5493	2364	2591	428	5538	1773	4229	5930	5405	5759	3542	1335	1832	4917	3190	937	4678	5504	2992	5326	5944	5706	215	4770
Row 21	1786	686	2574	3256	2719	4185	3677	3019	5291	197	4946	5356	5291	3763	3684	4500	4042	279	1611	69	1180	5811	5954	1008	5819	5792	1789	2447	3998	4975	3740	2120	3792	3745	2462	1829	161	5569	2348	2084	1951	1179	5290	5680	5645	3538	3814	4604	190
Row 22	4065	3914	2216	5028	1759	3092	874	1452	745	4071	585	1569	333	489	3683	5616	3720	3882	565	1904	1976	5176	2222	636	4234	3539	1411	3909	3493	4124	3304	1307	4833	690	4408	1996	973	5520	4256	4099	3077	1167	2568	3328	2854	250	3050	3876	2846
Row 23	2261	5446	5571	5968	5889	942	4134	3781	1776	5278	2346	1559	3482	5935	3328	1707	888	5181	613	2359	109	2591	1927	334	1750	3978	2307	2914	1513	1362	1644	3867	32	716	1496	77	3780	3684	3590	2773	2228	3544	4411	4587	2000	2484	1615	1292	1533
Row 24	2835	2025	1563	1313	2391	2148	1235	5646	5519	5628	1864	950	4451	3872	3830	2879	2050	147	3701	4537	3096	4435	5331	2006	5732	362	5298	320	3611	696	4802	2626	2857	970	1328	350	3738	5906	5364	2178	706	3922	840	4349	1822	3963	3257	5541	4299
Row 25	3088	1221	3954	2438	3435	4170	3870	2057	5006	218	1132	2946	2013	5111	2482	5050	1133	4922	2384	4408	1841	1383	1792	5687	659	3828	2084	4770	882	3652	1482	3252	3797	611	3250	5373	4723	4020	3746	5937	4094	983	1792	1727	5225	1705	1531	2177	1870
Row 26	5354	5729	2671	4130	5306	4215	548	5601	4376	5557	1720	4326	3941	2512	5908	5284	4283	3717	3168	4357	1472	1995	3373	1519	660	4477	1999	1396	1311	4203	926	4957	4317	3876	5173	2650	1139	1786	1519	1671	5876	5981	3899	841	339	2799	1111	648	5366
Row 27	5620	4174	941	4334	1236	1496	3752	4681	3264	2828	2774	4724	5658	5646	1193	2356	4135	4270	1940	1374	141	2632	3603	359	5428	663	2611	1258	3802	2138	5138	5268	3846	541	3262	2356	780	4244	2526	1081	4872	2643	1719	4220	3214	4486	5781	2591	1032
Row 28	2475	2842	2568	451	1183	4617	1494	5224	537	1542	1001	1630	5573	4905	5880	5159	2998	2560	2621	5053	3734	5086	4369	1107	4242	2426	1157	3144	4629	709	4631	4445	2518	4715	5945	2531	2165	4265	298	1113	3043	2335	4102	3984	1045	1714	530	4170	1926
Row 29	5937	1396	1894	5677	1734	855	1501	267	1960	3612	4387	1848	78	5958	2055	2385	1848	2908	1075	4761	3829	5260	1715	2723	2645	1716	5600	5933	4057	4466	5623	3139	3303	1364	265	3393	3145	5863	320	4076	1389	2841	3847	5559	2117	5298	5097	5742	1383
Row 30	4932	5784	4800	3200	4368	1756	249	784	345	3589	5866	3160	5306	4070	2839	5829	140	3956	3213	5999	2734	2776	3986	348	4870	1659	9	4142	3500	382	551	2880	713	811	5370	3802	1752	5526	3218	5178	3621	4768	5956	1264	2683	5028	1101	5185	5697
Row 31	2109	4596	4941	3210	4452	3440	2989	5450	1	4517	3455	3572	1552	1326	4364	5359	3284	1649	4244	2328	3628	4685	2267	4154	2905	4431	1318	3234	4580	5252	157	602	2538	4032	3300	1726	5406	1825	1467	5387	1805	292	702	1539	271	5412	5456	2404	684
Row 32	3377	4771	1499	4929	4560	5502	632	2035	1389	5712	3753	4355	1239	5239	4184	470	3672	1577	4546	517	3957	2602	5469	2707	3418	4782	4132	4900	5455	1635	1655	3776	4344	4340	1955	4429	185	2996	1738	4969	1283	2380	5530	5720	670	3290	2105	5422	4149
Row 33	3000	4067	1122	2473	5034	3969	4129	3735	3104	4489	5664	3087	3144	2689	3277	1833	1873	3088	4581	2719	5537	5596	5504	5554	110	3364	2508	2908	2623	5739	5030	584	2803	3318	3196	5518	2746	5108	3658	818	3255	4531	3253	1030	1607	4365	2008	3543	2907
Row 34	2081	2778	5073	3521	2220	5384	850	2575	4687	5088	4942	1602	5142	2101	4294	2168	815	2659	2063	2901	1939	2088	3148	971	1192	2752	194	737	420	879	1265	1446	2256	4428	2876	3243	1818	5843	1936	5845	2248	409	1888	4040	4612	2747	5715	5294	2937
Row 35	758	5622	5574	3659	3051	1642	4010	1963	3171	4996	5561	3158	4220	1158	5839	4518	491	5924	3230	1486	5747	5985	1209	4474	3051	4036	4032	1876	1651	3659	796	5081	5598	4017	392	2976	834	3870	4860	4557	2533	4860	4251	2803	1560	3754	1590	1972	1877
Row 36	4550	1062	4301	4257	1904	4543	1326	606	3515	3094	1535	4177	5757	5998	1082	4726	5690	2152	1092	4351	713	5596	210	27	5564	381	1750	3199	2326	2291	4464	5863	2899	3048	4071	1384	686	5763	5959	4610	3531	1400	2674	5889	5627	1885	1063	2475	2693
Row 37	3994	1569	264	1921	2259	5727	5053	983	2263	1948	2097	536	2526	1797	2764	3644	726	4096	3776	862	1884	2068	4921	2928	5992	603	5724	4898	1262	281	5558	4947	274	266	2654	5721	2739	633	4021	1833	1585	2404	4015	3153	461	4959	9	1956	4656
Row 38	1918	59	2826	881	5459	5151	1470	1535	5376	3230	69	5715	1896	621	82	2842	727	4172	1820	5571	4949	3749	5536	1672	1821	5145	3781	251	3707	2425	1527	3366	2358	5943	3587	1261	3000	5342	1869	3170	2415	1323	725	1613	1377	355	3945	2241	4599
Row 39	214	1419	377	252	2219	195	3732	4121	447	3436	5221	2218	2652	5582	42	311	1819	124	1828	5881	4571	2392	3849	1007	227	1724	1893	5961	3764	3721	3946	2468	3831	5281	2561	5528	141	4413	624	4903	4650	5996	2260	5791	2351	3926	315	4801	4831
Row 40	624	5631	4238	4433	1224	1057	1249	5265	3355	4330	5715	5110	4742	3897	1005	225	4373	5496	2642	3340	5940	228	5914	3834	3309	4705	1360	1089	522	403	1514	423	5889	1013	4817	218	5630	2503	1253	3481	2653	1140	2076	2667	867	3132	4739	672	4891
Row 41	1165	1568	2067	5960	2663	3794	5012	4714	1380	2098	4345	2458	77	961	3330	5793	5082	1697	1979	1812	5822	2854	1397	1386	172	3081	4490	2186	142	3619	2594	599	3430	885	131	3295	306	5287	5082	5363	4052	4042	2526	4243	5792	3207	4378	1193	1617
Row 42	228	2220	2057	5034	5015	4032	5935	1978	1580	3968	3062	4406	542	2628	5392	1748	2295	5655	923	2262	3298	4350	528	5672	181	2141	5022	3676	2424	373	1855	2557	3551	915	3088	3150	5782	5558	3985	1727	133	4926	5795	2475	2662	743	1947	1323	4746
Row 43	1669	1540	3194	1476	5465	5663	516	5770	5796	2654	3271	1967	3965	2532	4894	2240	2754	1561	1489	5889	1913	4489	2756	657	5975	2498	1884	799	820	5308	5684	4201	1033	944	5816	1258	4551	4814	4211	3048	3306	1410	4656	5146	355	5983	4854	4565	1812
Row 44	1122	2175	5839	5929	3206	4209	3307	5317	1169	4496	1065	5321	4767	17	4037	5678	3044	5905	2867	1085	2958	2362	5456	1155	787	1827	4419	1254	1959	2556	3154	4226	1005	5883	945	5971	5674	2804	2771	1698	3380	1053	4331	466	2811	5385	2706	4486	1295
Row 45	2535	3296	2930	1338	1112	4964	4948	5432	851	3127	1176	5675	4665	1816	1054	1669	935	2015	5533	5880	2376	2142	1389	1836	1137	813	3717	1571	2227	4598	2314	3691	1113	5004	3155	2624	2106	2637	3988	511	2723	1008	2187	4456	4650	2196	1987	4782	5487
Row 46	2993	4667	5126	4469	4425	4989	1541	4662	346	5489	2391	4850	887	3873	5855	5613	5070	4792	4330	4099	5874	5478	3185	3959	1089	5870	2396	186	412	3536	5635	4615	747	4540	3559	676	4501	3358	4222	4513	2304	4735	1331	1955	4411	1255	3004	5782	2811
Row 47	2098	4375	537	633	3423	4856	5494	4112	5185	617	4006	1650	5270	3346	217	3651	3050	5962	3146	719	333	5641	1374	818	4900	111	1754	2644	4930	1262	466	5639	3425	392	4705	5717	4565	1870	147	4511	5912	5336	3103	2735	4459	848	1534	1045	1362
Row 48	4860	3883	1657	4188	3401	199	5032	3340	5073	5776	5294	1765	3665	219	3327	3396	1315	5079	5222	4521	957	5034	2095	274	2581	1913	5503	1903	2024	2932	1475	204	2641	5894	500	1172	881	1696	756	4384	4480	3750	3267	910	1861	374	4510	2945	4533
Row 49	5070	729	5777	1491	4005	1151	2707	248	608	4227	1027	312	1990	1113	5163	4040	5401	3985	5524	3996	1697	5913	4680	1554	5414	849	5204	5487	1860	3639	3350	4599	1326	4697	3860	61	2340	2103	2253	4082	5879	645	123	335	251	1100	5054	2943	59

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.