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	1826	4635	2357	3402	4493	307	237	5355	2795	292	3489	2384	5359	3908	2004	3689	780	3857	245	1392	4508	1740	276	4701	4956	5671	2215	1743	1095	519	4768	872	4675	3264	2417	2430	4301	1291	312	1596	3159	5166	1742	826	671	4303	5301	1937	5855
Row 1	16	2283	1846	3945	205	2642	1759	1118	1225	4242	5289	556	2184	290	1881	5812	3654	3890	274	1609	4613	425	4912	4649	974	5883	4720	137	2285	4560	2085	5605	5234	2069	2917	4356	5914	1224	53	4825	1399	5326	2075	1440	3633	4472	2640	1676	2829
Row 2	1829	5598	423	2841	5124	5886	3440	4880	2068	5371	3198	5309	3510	1641	569	806	5292	3151	1970	5250	5782	1285	658	940	3552	1982	5504	249	5951	2645	2742	3945	5852	3271	4578	1921	933	426	1576	5650	4088	5	5478	4740	1788	493	4057	1805	2968
Row 3	5072	4741	5088	4108	773	5171	4640	16	2766	5212	5901	3784	5777	1642	2841	5738	1256	402	4034	1576	1828	633	3997	5247	1716	661	1728	576	2494	4943	1463	1860	5442	3562	1196	3912	2636	2799	4404	3522	3062	421	2175	3836	2983	1724	3291	4024	3801
Row 4	3273	4703	1670	4797	2621	2875	4605	3272	898	2366	4801	1892	4837	595	448	4401	5043	5995	3125	3833	2241	437	2580	3299	3684	5650	2136	5470	224	814	1192	4532	3966	1920	4859	5420	841	3692	2001	617	5150	1331	3586	3670	3456	5192	4114	605	368
Row 5	2209	1659	4342	3873	5469	1948	3420	233	2033	1776	2615	3787	978	2460	750	1887	457	533	5988	2758	2428	158	4927	3973	1698	4075	52	5808	4137	982	3787	2365	2424	756	5739	5700	2081	5876	3273	2034	1275	218	3552	5282	207	1575	3260	2649	3820
Row 6	1621	3507	1842	4091	5167	999	2799	2743	1001	998	2802	145	3921	1699	1197	2855	1625	4667	1705	2214	870	5866	1612	4656	4256	3767	2597	4652	3630	1030	3206	913	3107	3810	1555	4326	5382	2713	1638	1805	5387	4193	3189	2700	5551	2589	4051	1050	5124
Row 7	1390	2087	758	3458	5640	3505	1032	636	3706	416	76	199	3648	2783	875	1712	1818	5497	3850	2552	696	1419	4352	844	5565	3045	5010	4285	3656	4454	5656	3079	2150	977	1509	3027	2646	3515	2893	5919	4036	4168	5354	5471	2593	1686	3951	2782	2856
Row 8	3215	3983	2581	3626	2851	4177	4277	3814	4617	5481	1747	3915	4092	3352	2985	641	1548	5573	5061	5235	1997	2110	5658	4123	5410	1489	2286	2208	3603	3672	2128	422	3659	2071	594	5264	3942	4909	2699	2982	3368	1941	3768	237	52	2853	4227	351	2954
Row 9	2059	5121	764	377	5886	4891	1240	4258	3144	2849	3564	5525	3780	3517	3635	4572	4607	4941	2772	1566	1121	3083	514	774	2541	4004	1387	3542	1956	231	4107	1086	98	3851	2236	3675	1444	1189	2665	4799	1938	1167	4284	5759	2814	5747	3099	2341	1659
Row 10	5936	2424	4279	381	5364	3193	3376	4246	56	1533	1154	4577	2027	1248	1323	3388	4520	1558	4197	3595	4200	2494	2080	264	76	1939	4337	2322	4258	1548	3604	1071	37	1780	3179	882	2490	286	5662	4170	3288	4764	186	4719	5442	4293	951	5359	4537
Row 11	3860	3109	3933	3389	5046	2237	861	5304	43	3382	910	3398	4217	1693	3040	3005	4848	3823	2906	1673	3950	2815	3251	1730	3547	3516	1309	5887	3174	1204	1945	3071	4922	3357	5148	572	1826	4130	1845	2568	4242	4707	3113	2043	1724	4219	5436	5800	4719
Row 12	1758	3693	5173	5455	3480	3157	1728	3273	5727	5107	4282	5299	3933	3906	1058	2857	1542	2777	1395	415	5463	1668	1926	952	1616	1822	4526	539	595	2519	2629	5822	2150	311	1735	2756	3148	492	5727	944	5036	3255	2351	2562	2113	699	3621	4846	3417
Row 13	311	1254	228	5	2367	5703	641	5877	1913	4887	4982	2157	5830	3626	4028	5018	4117	4069	2470	5977	3467	1981	2698	3716	2743	1493	1499	1891	2385	4893	1837	1769	3881	1586	4749	2853	1428	2856	2358	4166	5882	4794	635	1788	523	2609	1075	2725	1445
Row 14	1913	3204	3943	3791	5658	1028	955	5643	431	4539	2023	3357	277	1664	2746	4366	5910	4227	1612	4355	2174	4414	3746	5026	803	4189	5909	3314	2103	38	2391	1934	745	4882	5508	476	5537	452	2225	832	2519	5488	2724	4137	3151	679	5624	3178	5072
Row 15	907	3587	2677	2722	2065	3410	5040	4993	1683	4880	4029	5830	2036	2700	1812	4274	3622	4577	4293	2199	474	5313	1449	4085	1700	959	991	2449	2518	4004	1410	1714	5728	799	5613	2500	2188	3017	1269	3964	5579	3454	5326	1294	3206	3848	3796	2367	4058
Row 16	3625	93	4279	5007	776	5517	5852	1086	2393	274	2582	5319	137	1312	5478	3802	1695	1005	3136	4756	25	3881	3660	5736	925	5866	5548	4157	5132	1497	4893	2187	2780	3491	3260	1319	544	5241	4692	5106	5399	983	3336	2497	5970	1466	5534	1575	221
Row 17	3637	3930	2694	2213	5459	2583	5211	4796	3806	5525	5070	5792	5348	2589	1704	333	4432	1285	2050	3217	2410	442	1244	4612	5376	1520	2749	3005	3843	3819	4494	5287	4871	463	778	2151	4109	1449	2990	2476	5029	3374	2565	4522	715	5680	5813	2882	2862
Row 18	722	1820	4812	5506	1927	3558	5312	4577	4569	4216	1450	2037	3391	127	5139	5647	5083	1662	5900	141	5983	2178	3294	4807	2884	608	1623	1900	5304	3553	1318	1117	594	2743	4973	2027	4127	1134	2624	4488	4041	1062	2546	674	5630	2541	4260	5274	5373
Row 19	988	3020	5126	292	5848	1567	10	1112	1677	5226	1224	2582	4733	4650	3807	5387	1075	430	1038	842	330	442	4021	288	1310	2774	2793	1835	2713	4796	2238	4006	5908	1042	1602	1936	5759	5655	4445	1325	4214	3921	4781	869	3626	1809	5602	1169	5079
Row 20	3153	1713	3569	3970	1555	1689	5580	2421	5659	914	1975	5124	1028	5536	2886	2128	2733	198	5349	1220	5594	200	925	2179	2397	1911	1293	3490	2156	5014	5197	730	1366	972	2747	3441	3582	800	1288	1336	1136	2242	295	4864	4569	1794	3512	3929	5964
Row 21	5073	2281	4793	4380	5337	3219	1147	2898	2729	4644	4955	2427	4807	3697	5864	2792	2053	2429	5010	1983	713	5505	1358	2420	4756	23	955	2036	2546	2554	2734	4402	3986	2121	3871	3175	1574	3048	1706	3079	2026	2719	2541	2782	5819	3621	1574	455	3023
Row 22	4665	3315	1453	3257	2955	2508	1554	5328	5057	1110	977	2205	1619	5999	5313	2355	3683	1041	3396	5485	5315	1974	712	627	1945	4166	1028	794	3185	872	5149	5102	1454	4625	5061	681	5989	257	5112	3486	2924	5192	1368	5426	3268	3486	4580	2102	1248
Row 23	2584	5934	3089	4870	5820	5997	950	5465	5847	812	4290	5574	408	5879	2913	3174	1354	390	3487	4872	2149	2802	2176	3978	5761	3837	3455	5078	5572	5847	1027	1857	5470	2731	5044	5463	1293	2642	1491	3664	2721	2982	5903	2995	4392	558	5511	1214	4666
Row 24	1865	5478	3943	4226	2900	1467	1945	2907	5322	2111	4310	2514	885	5103	8	1468	5194	5960	3165	5571	5392	878	3270	4021	3150	5581	1670	5984	4454	2186	4969	4301	5503	2684	219	2089	5873	2241	3748	1196	1937	5750	318	5295	5135	2956	3954	2534	3636
Row 25	1653	408	4598	5369	4861	5434	4887	5540	3198	3446	4934	3092	3107	2207	2401	1819	2342	5628	4607	4691	14	5601	4569	564	2422	1020	4758	1280	2421	836	5636	202	5823	1791	3086	1719	1799	2148	1285	1224	609	2782	351	1582	2420	392	3458	354	5808
Row 26	3814	519	2631	2990	3677	1601	2790	5174	5493	5925	4735	4864	5246	3812	3157	5947	2308	2619	5500	1545	2384	5323	1343	678	3091	3804	901	5204	4984	5079	5611	1152	5993	447	234	1738	189	4753	5592	3250	419	5790	5814	1724	1266	4905	5888	3431	1408
Row 27	38	4233	2649	395	1164	2596	841	4516	5784	5742	2765	362	2361	3604	887	4618	499	5195	1335	2397	4952	1647	4230	2892	5676	2276	5587	5979	608	743	4081	4231	2891	4878	3325	1667	52	4977	3621	12	4566	4686	3007	3811	3913	1220	854	2465	317
Row 28	5249	2511	4327	5639	4354	5574	4981	4606	4104	3088	5427	411	1796	2958	558	1509	2137	5639	4112	3785	2671	4694	4953	1547	2479	2041	1404	3681	2846	5684	2205	2578	4397	195	1017	5279	2359	3045	1798	210	2006	3627	5234	1876	2044	3040	1558	4603	4898
Row 29	3538	234	3562	4092	5013	219	723	1924	3741	2735	2944	3086	2849	5802	4354	3580	3065	4089	1142	369	1333	5692	319	2811	538	4725	536	2836	3696	5516	5565	3291	4197	5431	5240	2570	4411	2470	3824	89	391	5297	71	4121	792	3229	3447	5374	1588
Row 30	618	3234	5804	4291	3347	3960	3989	280	5787	2932	1973	5733	889	2337	1907	1913	3584	2010	887	4596	5729	4957	2576	5043	2629	2773	1911	5806	2672	4739	1702	5465	1064	3813	1856	550	3838	3052	2070	1634	3594	1745	27	204	200	3784	4225	4915	1765
Row 31	4516	3403	3463	706	824	5860	4218	4382	2240	4416	2680	1665	4770	1369	2616	1483	4286	486	5267	2263	1921	4594	4510	585	2135	4338	1363	4072	4846	1885	2300	4602	5517	2084	157	1030	3033	1726	966	5743	4924	4512	1313	3075	5426	1528	2362	3758	2614
Row 32	1847	541	1472	4837	5947	762	300	4981	2139	2451	375	2436	2960	3443	520	3784	3844	3868	549	1188	5227	5160	3406	1115	3122	3515	5932	1021	3616	5288	889	128	1529	1701	2362	1320	3134	4370	5987	5359	1915	4256	1102	2635	4639	1578	1047	4791	2710
Row 33	4946	5735	200	1811	3472	3012	4502	1669	3854	4033	1825	2028	1720	3855	3528	5243	1615	2467	195	462	1021	42	1692	3725	4402	5519	830	2058	261	2654	3997	1540	4009	1482	4137	525	1317	2883	3589	3680	2729	3900	4410	2847	3424	947	2651	1717	3138
Row 34	1158	2933	897	2228	2965	2274	777	3130	2432	3326	5028	4525	4443	3377	3718	908	1544	4999	2618	1340	1895	515	2750	5650	2531	4717	3853	5636	5308	2048	2026	5387	2401	4984	4543	2851	1298	4123	2525	3830	5827	5323	1116	333	5708	2644	4604	399	4007
Row 35	1325	3130	961	480	5592	55	1118	5513	4999	3763	4776	2436	2583	2954	2338	4608	514	2233	456	281	4223	5129	2467	3089	3893	3600	929	2986	2744	3919	3931	621	4118	4101	515	3369	4569	3099	1139	3356	5418	3481	4335	2878	3443	2284	3797	2958	221
Row 36	1618	4602	22	308	1543	5277	1152	4037	1142	2640	1506	5462	1778	1878	5844	2861	4941	4348	3459	4335	3310	5352	4630	4912	3916	5116	2083	2057	3821	1257	1869	1505	386	3187	2942	1999	3420	2837	4599	1876	2926	1918	57	2385	2776	149	2479	5599	2750
Row 37	1388	685	5350	2298	3020	5706	372	5577	2995	2961	1726	4492	4424	397	2080	3516	3216	1892	2412	3404	2463	425	3020	3994	3768	209	4272	3200	3319	113	2301	3961	1044	5830	911	3306	4437	1680	5492	646	1107	1339	1822	1692	807	59	5638	3423	1365
Row 38	4445	4543	1857	4128	766	3944	496	5684	4362	3152	5576	970	5483	348	5857	1552	1634	2995	4324	2519	965	846	1305	3822	2402	3049	2953	4233	4066	5749	588	4030	979	1792	5018	5216	5085	5286	2602	5753	5156	3957	612	1636	1633	3913	3172	3257	3963
Row 39	5974	4643	1432	1179	48	1856	1190	2151	2350	1007	3691	982	3004	4929	1979	174	427	422	5363	276	1826	5033	3759	2858	1166	3038	3277	1512	864	4378	4962	4675	1265	5390	2079	1421	2474	5841	1950	3752	617	4220	1151	1317	1424	4586	1660	3560	1556
Row 40	3133	1155	3372	2773	2708	991	5932	3480	4224	1733	5493	4124	4600	1141	1742	1356	3229	1548	480	4133	1632	2404	2155	1813	1163	1395	614	3016	2594	3695	1820	9	3575	5962	3877	1925	544	4434	3562	2101	3723	4679	634	5196	1243	4582	78	1727	789
Row 41	2533	4035	4693	3298	4261	719	520	2904	3130	1879	709	3823	4155	3712	2397	2005	5191	3981	485	2	3034	2437	1315	2774	1964	3146	2298	244	1193	367	5047	3647	1624	5567	110	2643	3373	4714	5460	3117	3188	4770	2702	809	988	3472	793	1616	2617
Row 42	4224	4656	2425	77	4571	2052	92	1182	4747	4442	1289	4098	1052	1795	3573	5612	5638	5450	1538	1332	4793	756	1223	1177	1197	5898	5191	3461	3188	5610	4694	1591	138	2073	4054	3957	4879	3926	4672	3512	922	1585	3032	5518	2159	1774	3179	3341	24
Row 43	4824	2669	3670	3028	530	2014	1103	1542	852	4553	5506	3218	2999	3494	4211	3089	4142	4425	638	4115	1769	4277	2777	4836	5044	3417	4865	4116	4405	3725	1715	1250	1267	2204	3600	879	4300	2356	286	2095	4764	1265	1476	2690	4304	42	4130	1747	3290
Row 44	2871	925	5826	1091	5932	367	539	1694	2668	4522	1672	2555	1265	3008	2988	76	3	4524	5157	5730	3052	52	2778	2671	4788	204	1261	2553	5324	1659	4772	2535	289	3588	5877	5787	2925	372	82	1236	2098	2219	2154	2290	3548	393	3854	3590	4850
Row 45	1623	5268	864	5731	2748	3978	2210	3195	5473	2836	5110	2512	1825	5920	3952	4893	5304	394	1944	866	4288	4675	1407	5144	2276	4887	1678	2903	1011	1024	3976	4477	847	2791	4131	1756	2829	3091	748	5337	5248	4566	2246	3839	4824	5188	1801	406	2945
Row 46	1367	3626	4871	5544	2735	554	5308	3918	2241	1256	583	330	5449	4513	2515	837	2569	4723	5106	4628	3781	2183	5368	375	5606	217	1403	196	3752	364	637	380	4536	3027	2107	2655	3893	5208	2076	5440	2096	97	4779	4925	1214	5587	5046	619	1104
Row 47	3431	4215	3331	3489	5023	4060	4035	2548	2726	955	3056	827	4570	3789	1478	3932	1329	1763	95	4563	22	4002	1890	2933	3563	2487	4081	4518	4599	5011	1300	5085	1036	5487	3056	5315	1120	3653	2526	5295	3824	1081	5507	5077	4885	2550	4260	711	1119
Row 48	5388	1000	5967	3967	3071	1622	5898	2177	2317	720	2598	1458	1421	2827	3416	241	5440	2676	1340	55	974	2761	253	2423	862	5667	1701	4637	2483	1384	5759	925	4372	3116	2697	4959	200	276	5916	5709	2314	879	2985	436	1884	1495	3914	3615	3446
Row 49	1409	766	5717	4201	5063	2813	235	2232	2893	2705	775	3692	997	3156	2982	3215	4209	1989	1325	3099	3893	3779	4607	469	4755	4665	5637	4664	295	4537	653	4843	3713	539	2495	3768	2362	71	4043	4198	4861	5531	1208	5525	3824	2286	5201	3526	536

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.