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	4609	2101	710	3491	4097	1218	4155	140	884	973	879	4961	2691	4453	1756	2262	3369	4520	415	748	4508	2044	2655	4618	1621	1682	3469	2326	4329	5553	5352	1086	5842	3146	4624	3331	851	3255	4991	5270	2786	3868	3196	3576	3851	3435	5356	2046	3259
Row 1	4010	2819	4107	4839	1848	1204	4942	5567	931	2946	4253	3211	694	3090	4911	2555	829	84	1881	1839	1111	2466	229	2547	5419	5185	1572	2361	2971	5334	164	2522	4462	5126	4847	258	700	5434	882	1812	1201	273	22	3188	2008	1496	4235	468	5891
Row 2	3664	4463	3894	1224	3393	2113	5360	743	3457	3196	5707	5522	4047	841	5452	1592	4746	1195	1830	1574	2745	4653	4394	298	2842	303	4365	3374	2666	4058	5683	208	5415	428	3520	4950	3359	5703	4816	5196	714	251	1158	2109	5995	5791	1342	2165	3544
Row 3	3770	374	3246	3370	3141	4962	3758	1435	524	1091	2706	4735	3231	1001	5204	5565	2742	741	3869	1021	3951	5231	1269	2550	554	4248	5824	1453	1620	3437	647	383	4492	3125	1937	597	5908	985	614	5343	5628	2793	3624	2318	1603	3087	3577	3228	2909
Row 4	4016	3727	1555	2985	4587	2762	3513	4951	5041	3569	2780	3845	925	1812	3005	2881	1569	3462	146	4303	3759	4297	539	504	161	2299	5059	4992	2705	2718	853	2875	4683	4005	5432	926	5696	4887	4862	3236	3927	1160	3291	228	2754	5959	1885	3999	2052
Row 5	2784	1543	253	3039	5780	4771	4335	2030	1390	2865	77	5392	158	3838	4284	104	3057	2268	5740	4252	4060	2716	2935	1833	5777	5757	2722	4522	2576	2264	5768	2422	1904	5766	490	3846	4385	1509	2825	5603	3451	4997	2987	5811	5224	5107	3875	126	4273
Row 6	5668	4857	648	1257	380	3095	4779	1372	3249	2392	1566	5532	5676	1566	3800	4104	341	5771	296	5677	5900	3119	976	1231	122	3670	4419	5496	3079	1078	4796	2911	1916	5799	2136	985	4768	4717	3372	457	977	3521	1818	4044	5598	387	1878	4955	4057
Row 7	2843	3630	629	1435	3425	3832	204	1760	1994	4422	5558	2840	2934	5374	3009	2245	1810	1191	57	2441	305	1146	1737	782	1320	1583	785	5012	5967	1781	222	2639	666	5955	3326	3755	3830	3406	2466	4275	2498	4997	5375	4572	4189	4889	3758	3260	2384
Row 8	3733	4035	2846	4095	5666	736	5662	563	5391	593	1748	1234	3054	350	2895	1899	4101	4985	5588	988	5566	2322	4907	1542	1738	4679	5034	448	1436	5880	4608	1715	1634	1772	239	2491	3134	1024	5592	4553	5401	2642	5370	5864	5387	5929	3293	2511	3829
Row 9	5530	1475	214	3322	946	3133	2497	1979	2868	412	4413	3295	2776	3136	2837	5682	1175	136	2766	1516	3069	3366	5208	5003	4418	4833	1594	1745	2066	1274	1977	485	73	5708	2088	4464	5773	3806	5302	3986	3681	125	3927	2525	2949	2582	5807	4111	3555
Row 10	4514	2091	4805	3400	5162	1990	2123	5198	3881	1385	1526	751	4013	4183	1442	5669	2308	1648	4041	5158	3334	3038	5849	4069	5394	2899	2249	2430	1648	2600	956	1477	4642	2851	3483	1747	3557	1205	1666	770	5873	3786	129	199	5633	1720	4186	3509	228
Row 11	542	2728	1327	1395	2512	1857	553	1680	3036	5852	2545	4132	186	2271	4275	2801	378	2811	3121	4549	4506	1331	1061	2664	2083	1286	3780	2882	4862	1351	1108	477	881	1306	1135	5350	442	1523	192	1789	4517	384	1590	443	4092	5449	1557	2621	5509
Row 12	5851	5509	4430	1407	721	1068	2778	2955	3287	4538	1982	1213	4830	526	58	2747	903	5824	3653	4548	1963	844	1363	5423	2806	5470	480	4209	3281	563	3058	5770	3465	2284	2047	4175	416	2718	2610	4461	3244	1613	4265	2419	143	3784	2820	151	3893
Row 13	68	3344	5261	2880	5392	4244	870	1899	4340	5884	713	4217	2726	2497	3385	4164	934	1076	1752	4303	306	3461	669	2573	1937	5138	3538	615	799	4412	5361	1183	5932	1814	4871	180	284	4744	2488	519	4601	2427	5472	3103	2758	1376	4415	2689	2227
Row 14	2047	4859	1477	2621	3804	5467	9	3438	5912	2428	138	3760	2106	3241	5977	2973	106	42	1583	685	4057	4073	3818	1641	1101	5412	5756	1770	5861	1708	3287	1332	2580	4000	5479	5371	2940	3619	4624	4757	1211	1196	5969	4231	3090	3479	1375	4398	399
Row 15	3047	4184	668	3715	2630	1289	3825	4592	1378	4923	1008	2238	4562	3706	4371	1673	3407	5837	1701	3340	5222	2080	1791	3409	2312	691	5778	621	3058	4432	874	1865	631	2765	4078	132	705	906	4560	1250	542	2672	4850	3853	2453	1092	5394	2041	1326
Row 16	3671	30	146	446	5053	2949	2157	476	3715	5647	1341	451	5233	597	3664	4214	2558	5878	3042	5849	4824	3094	1702	4064	2172	2796	4411	1491	4280	2243	3297	1146	1316	2027	5291	3507	4175	1897	1793	892	1991	1707	5171	3437	5604	2598	1111	2517	2934
Row 17	1694	2508	5318	4499	2916	657	178	3675	4929	4881	3599	2314	3809	575	942	5769	2290	3956	1765	1969	1573	4028	2321	4356	3564	890	3053	5625	2953	800	5201	1544	90	5960	4668	5850	4785	4045	452	3585	1272	5311	224	1227	3495	556	494	3256	5888
Row 18	4820	5982	2896	4813	3075	5974	1237	3550	2036	3711	3178	2558	5896	2501	2634	1044	4355	2835	4097	2350	3785	662	2163	2651	3690	5441	1946	5985	3938	5171	5127	3727	545	2292	86	2235	4005	2265	1213	2557	5369	278	2502	5207	442	4754	1866	4967	2080
Row 19	832	534	5574	956	87	889	162	3826	2690	5373	2609	4647	4148	3111	3900	3166	4528	679	5424	5496	1794	1775	4380	1038	2600	4949	3726	1680	2251	644	4059	1717	2824	636	3262	3757	5584	4626	1190	4258	42	998	4509	958	107	871	3615	5719	4091
Row 20	5371	4840	2654	1081	5840	433	5227	4503	5790	4573	1171	5123	3678	4320	5839	2719	245	3308	3571	2606	3075	2248	2449	4387	1498	4049	5023	4648	4754	441	5933	203	1426	2705	4120	487	4222	3503	3011	1759	4519	1325	4047	2892	5342	3028	3918	4599	4969
Row 21	1815	2439	3386	4219	4318	5256	5819	3477	2708	2666	311	1749	3613	2787	470	3111	5943	5934	323	2087	2665	3562	4532	312	2782	3065	5483	2430	3283	743	1870	1948	5855	4438	482	2205	4357	1787	4738	1289	292	2509	3192	5122	4287	1500	3953	5910	1545
Row 22	798	5736	1856	2190	5514	2042	4100	3699	2925	3972	3242	2001	4890	2505	432	3781	116	168	2693	2743	5023	1976	4129	2664	632	2059	1439	180	5377	1492	341	4611	892	3587	4151	3663	2571	960	2062	1942	1551	5823	3160	4182	5448	3474	4358	2901	839
Row 23	2304	5671	5716	5149	5134	3665	5844	1796	4797	5607	1307	4116	3138	2697	1272	5863	3296	1005	3539	3923	5644	1708	5975	5727	1521	3583	4560	1124	3015	4877	5103	5512	1934	661	5024	4549	1758	5709	4199	4755	756	1520	4353	460	4606	507	5129	4799	3317
Row 24	3945	1248	552	1437	4134	3965	2769	689	5171	2320	925	4364	3409	1843	4858	1614	1007	1677	3375	3939	3591	3907	3306	3602	3671	5079	5724	2970	4930	3212	2814	5347	1048	2455	2901	2927	3657	3108	5625	1138	3277	2894	446	3663	1243	5070	1557	4547	5281
Row 25	5704	2097	4042	3542	1357	2308	263	3619	3638	617	5601	1373	3888	5137	3091	1763	1586	2779	5197	4792	1626	1897	443	1808	533	518	5685	3723	1758	2076	461	797	954	4273	4507	2962	4962	4786	5009	4300	2978	4495	5825	4818	5590	2743	2158	1507	2294
Row 26	2616	796	2574	1315	2720	5741	5489	2770	2349	3128	2146	5111	5170	4124	903	4372	1642	3508	2455	4286	180	2853	2062	5690	3517	5905	3774	4548	5324	5299	376	1077	5795	5281	2363	2436	5533	5834	5949	1292	4155	2982	5608	2320	1953	836	1480	635	344
Row 27	332	4712	4982	103	4041	674	700	1961	1409	3872	5159	5341	395	1360	1690	1664	5191	3163	2012	5518	1252	2983	2781	3406	910	4313	1452	3293	511	4231	2895	547	5979	3280	4700	894	5571	4713	5227	4798	1987	4749	662	5970	3468	803	3390	2991	1584
Row 28	4620	2582	4197	1097	5219	3931	5163	5832	2904	1511	2003	3770	3063	847	5202	3372	3465	904	2929	4622	4929	5733	3254	2368	2581	5678	5353	2096	4685	4474	4120	5197	3635	4876	5292	5644	3308	2165	1889	112	1576	4387	1625	3238	5147	3486	3286	3409	881
Row 29	1067	3226	4659	4100	3424	3571	4784	4266	1710	4962	3010	332	5440	4715	827	1213	916	892	1189	1542	3194	3333	2745	3638	131	3301	2227	3971	3831	3702	4513	827	3412	2697	4729	1277	4707	2828	3460	1047	5646	3141	4808	3977	1535	5604	4430	2236	1208
Row 30	1748	5136	797	1477	3653	3724	111	5157	4409	4895	4832	4366	2366	5184	3694	5286	2327	1286	5044	1868	5919	4171	2352	3769	3826	119	5661	368	1795	406	1749	5129	1075	2680	4406	914	4080	3810	1149	4562	4126	2484	1378	1402	4936	2200	3913	4012	4829
Row 31	4949	5102	69	374	4776	5204	3919	576	5868	1805	3931	4727	5342	3694	930	2062	2021	2814	5882	2356	4161	2499	5948	927	5961	3946	3649	1793	4839	3995	5460	2523	1698	2300	462	2366	310	344	2108	108	671	1673	2344	361	2832	692	4953	4712	1159
Row 32	1205	4059	2617	1534	4362	2889	5085	1741	4935	2259	4983	3904	565	3022	3029	5240	3388	3975	4395	5302	2192	5406	3119	3973	1766	719	706	3479	2917	996	5348	3617	5697	137	3158	3876	2584	2000	5388	4860	912	4482	4627	4882	190	4872	890	4491	2309
Row 33	1592	2580	1566	1615	4236	2530	2196	2841	3757	4934	1568	5894	1002	17	4864	2763	3949	5865	4868	1528	2224	250	5476	5897	2628	1691	3932	1383	743	1375	2222	904	1302	4369	4306	3826	2107	1595	1483	2952	4440	809	1104	2202	4087	3483	3761	3176	900
Row 34	4998	2575	5462	3524	2660	5337	3333	4598	2990	850	1187	4706	1640	1123	3722	2804	1513	477	1635	4019	724	4841	5151	898	3690	2430	3243	4226	2224	2435	3405	5494	1892	4777	2452	4763	5000	589	1996	153	766	3907	5908	236	1022	5863	3132	3917	608
Row 35	3374	3911	2163	1253	2684	3985	1635	1604	1886	2688	2421	2	4276	1374	1244	1014	2785	3736	2474	419	3495	3350	2571	28	1604	4539	2981	5064	230	791	1920	4942	1653	1649	2218	1823	3929	2705	672	4667	5163	2779	5882	2787	1155	2841	4930	5254	1569
Row 36	2828	5660	2870	1546	1357	693	5530	183	5700	1663	1583	3509	3713	2047	2146	5496	2842	4739	5302	5107	38	126	5228	2867	2985	3287	5667	4708	6	1645	2164	4610	4632	5126	4791	4038	155	5285	2399	225	943	4557	5318	2474	5649	1752	3055	3611	2605
Row 37	3946	3544	4968	5409	3052	5432	3533	4398	465	5195	2500	4125	4272	1676	3581	227	2151	45	5518	2442	2900	2649	3097	3073	4784	4556	4111	2443	3068	2153	4805	1497	5713	4380	3751	667	2258	2621	3443	1362	4076	5452	4483	180	1946	2388	2811	5192	4439
Row 38	2524	2654	1495	5979	931	4814	3110	1602	3381	5216	2834	4010	5660	1070	189	4068	2112	58	2299	3803	4028	5096	4951	5447	1214	5039	5315	1265	1864	900	273	5474	3643	4879	5570	2149	1539	4478	2999	4778	5586	1444	2080	4263	293	5920	2831	3698	3353
Row 39	928	3033	4899	992	4405	3147	1515	3622	2526	790	5254	5172	5132	876	5876	5785	3689	1300	2701	4720	2717	5939	2761	130	3398	205	2837	4741	4540	1794	468	3531	5725	2241	4056	1877	1207	2944	3267	803	2666	33	4852	4286	1671	2566	5829	3534	4454
Row 40	904	2497	4886	2748	260	5177	1846	15	1165	4752	3602	1519	4142	5943	2301	1078	5202	197	4033	4797	806	3585	3033	2502	3341	5266	4592	2061	2655	4857	253	3093	785	5674	5369	4221	384	3365	3281	1191	5452	5844	1637	1729	2781	2236	2559	2717	3389
Row 41	772	2478	2437	2172	1209	2405	5116	3036	4430	1623	3809	2711	1010	5960	2267	2125	4420	5500	4209	2074	620	287	745	2980	1408	310	4678	5897	1016	46	4075	1513	2835	950	967	1707	2363	1778	5239	3060	4481	2156	38	4525	2097	3531	1718	5830	2753
Row 42	2553	1961	1285	1709	4184	3344	1786	5205	4460	294	5334	87	1132	2567	5344	23	1208	2138	5695	5172	1569	3272	3732	1427	5232	1458	967	954	4298	2663	2812	5102	5844	2128	397	1480	2823	2713	1696	4231	1134	3411	4855	1947	2400	4786	4722	5222	603
Row 43	1275	1550	5538	3662	2587	4177	162	4509	5648	645	1491	5050	2492	5107	3921	5680	1429	5060	2337	226	3309	3474	5443	2920	278	2265	3027	3387	2969	4578	1747	877	880	4561	3747	5984	3395	2012	4693	2451	1782	3806	4880	3498	5047	4516	1117	2980	5271
Row 44	214	1632	4174	4109	4957	1131	1373	4963	4297	2095	5442	1306	1238	2442	4676	3439	1166	718	148	5511	4	4394	5796	1611	4670	2423	254	3867	844	5521	1188	2424	5981	5616	4962	2393	5012	5802	1973	5844	3721	1257	5067	4165	3042	4635	2217	3238	4675
Row 45	5752	2455	3297	1658	591	1676	1240	4340	1800	4521	1589	5167	5472	3616	5049	3077	3824	109	4946	3287	1958	3705	1580	5752	382	2314	4336	2130	4985	4420	2730	2872	4916	4973	5723	4590	546	2001	5632	576	3945	3360	1373	1234	4812	2433	5149	513	1204
Row 46	2756	4598	1193	997	763	3269	3086	366	3140	2743	2120	2579	3453	1266	2323	1331	5909	3637	465	2579	5460	5647	2844	1305	1945	2569	4268	938	713	4476	1190	671	58	3828	5297	4455	375	3666	1115	5539	2985	5721	1477	1334	2628	5231	3370	1131	2001
Row 47	870	5158	677	869	5736	4266	441	1328	3908	2529	885	4908	369	3458	342	2077	4614	3292	3908	5665	5068	1057	3720	4070	4436	925	5948	4276	4365	605	3703	2098	1693	2467	5458	3836	5008	34	2658	2374	1212	1719	788	1887	4111	5111	292	5313	1066
Row 48	5056	4654	4623	5641	2600	1782	2153	3428	3993	902	658	1556	591	634	1325	1548	4740	3282	4732	2298	1527	2990	5241	2610	5118	5933	371	1790	1685	5238	4211	5132	1479	447	4042	5854	5701	2422	5538	4676	1655	4552	5412	4587	2090	5152	1132	5195	3365
Row 49	5148	2206	1544	2000	2362	1345	2425	2924	1147	5521	5923	2558	1212	5857	2968	5581	1608	2416	1897	4707	2688	974	4825	3835	2262	4046	3146	3289	1515	1726	2803	2213	2102	4581	1483	2001	2482	1760	303	202	2133	757	1290	1994	4295	4017	818	5909	5190

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.