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	4460	4631	2585	4359	5835	2073	4359	3292	1571	1605	1467	1779	2919	4641	2366	3826	374	4850	2445	740	3136	423	4316	3250	4818	5036	1142	3515	2473	3551	3743	2446	1593	3842	4877	3292	5615	2400	4059	3504	5852	5121	4774	3215	3110	1084	5665	3511	2806
Row 1	1910	3342	1598	208	1999	2059	4169	1242	1031	2038	5984	1472	1207	3115	3267	4558	1440	1584	5233	5534	4076	1392	1140	2719	53	284	4007	5399	372	5600	5245	340	461	1007	3646	2347	3788	2707	5524	5706	2719	2992	5099	721	1316	2299	3390	646	4698
Row 2	4735	3422	2214	3220	5975	1520	3172	3032	3428	1339	1707	5862	4523	1794	3454	1739	4892	1828	1635	4783	3350	4743	1556	5867	2604	5164	5250	1249	4418	5665	4390	2721	3165	5368	614	1954	1210	3879	5323	1000	4281	2215	1547	73	3141	2729	4381	634	366
Row 3	2417	3132	1121	2993	5814	3761	5732	2583	4545	3957	5719	2561	3590	5253	2668	5226	4612	1804	5085	1835	5748	4211	4456	2625	1129	5233	3100	158	1854	531	4072	1411	3781	5659	2793	782	5562	266	366	5626	51	5684	5877	509	3867	4072	3092	4255	3896
Row 4	495	2998	5128	1121	5769	3614	3011	5895	1923	4320	4818	286	2659	5520	1094	2435	4732	4797	3152	2785	5807	3074	1254	1035	5756	1274	1897	2848	5692	1866	4560	1889	4843	157	3019	1599	239	2345	126	3816	1658	4607	2509	871	5379	2919	5775	2666	3321
Row 5	1110	2181	2071	3820	2438	1900	268	3363	5266	3277	3101	2052	5970	2432	1268	365	4949	5124	2119	120	5600	4721	146	3283	2803	3703	890	4579	3920	4664	1607	4752	4151	3419	2731	583	2958	1613	3518	3532	4860	4330	866	4999	4620	4333	2226	185	3709
Row 6	589	1004	1536	736	4157	2020	373	3751	4553	1937	3051	5172	295	2168	1805	1576	1593	3286	2294	4483	1179	4006	3363	1780	3522	4559	5561	3244	298	5493	5061	3922	3401	3733	2512	3926	2361	5053	3706	290	4919	5053	4	1099	1921	5725	2567	1812	5538
Row 7	5299	1022	435	2223	1643	1183	3227	1303	5890	265	2997	2264	5461	4454	1751	5271	3148	4027	4668	2718	623	5542	1177	3651	5830	5614	1710	84	5202	4932	2627	209	3566	4869	4160	3578	4794	4140	5741	3171	4847	3750	1492	4068	2735	571	1523	1270	929
Row 8	5104	4621	1161	4023	4856	856	4789	3582	4787	4152	3830	317	2697	2014	5304	2471	1482	43	5273	1932	5280	5354	2570	5944	3334	1283	4265	4257	3622	125	1103	2199	5968	542	2254	3141	2397	2863	4504	4009	5006	678	5583	2400	954	4956	5373	3741	987
Row 9	1894	5037	476	1896	1951	2180	4445	759	1713	3804	1175	5517	3225	5776	664	2180	5154	2507	4561	3706	828	5159	2658	5255	4139	5768	5706	3292	4590	5074	2315	543	4874	1565	4646	5545	2906	3690	3546	856	1879	3297	3608	2655	1199	4955	4071	479	1771
Row 10	5778	5122	1623	4055	3721	3448	2324	3998	3952	2271	601	4626	1664	5075	3923	2315	2240	4584	872	5397	1645	4221	823	1668	3171	2293	159	5071	749	2047	5465	2361	2753	1665	970	1552	4731	3511	841	4655	3625	3396	5481	934	3464	5875	1659	3662	37
Row 11	2568	1862	235	3926	477	5555	1176	1656	3964	4146	4584	301	2361	690	4352	3410	5873	5496	759	5339	2999	3700	222	5480	547	701	5768	2989	1123	5388	4011	3766	1537	2861	1677	4184	731	667	2894	521	4865	3421	383	2585	3000	5605	3740	769	3465
Row 12	1180	1173	351	778	5728	4338	3884	2357	5133	5029	5533	1886	1934	2807	382	5266	4437	1227	3242	5137	3107	655	1741	2648	288	4236	2903	556	3254	4943	4215	4843	121	5944	5014	2450	3568	4805	5769	5021	4858	2258	1861	4102	5242	4823	2869	2247	193
Row 13	1875	4252	4776	3904	2364	2219	3770	2668	2497	2058	1098	3824	1615	1104	770	1111	4675	5820	4696	5031	5386	471	756	3924	1258	662	1855	1628	1739	5429	3501	1665	660	5592	5561	1037	4626	2858	5260	2534	4411	2935	145	3650	2810	4063	3585	4271	867
Row 14	5660	5870	4972	1982	5043	364	5811	3964	1989	2201	3083	4209	1579	4402	1463	3752	3004	578	4262	4167	2350	2990	5596	5820	5100	1063	3989	2345	3611	1423	4615	4503	1589	1967	3305	5617	887	4039	812	1535	1133	2580	1924	2302	3179	4920	1859	5000	2020
Row 15	314	5941	1013	153	2084	2956	1236	2466	3102	1627	5126	99	4233	590	4359	5868	613	4919	2378	5077	1179	2444	2367	611	2075	3621	2853	5116	931	1269	5273	4122	2759	4465	5665	3640	1440	2812	1929	4150	2813	513	2153	751	5909	2288	1378	4070	3783
Row 16	5508	5254	4913	5935	710	4036	347	2293	1801	5026	2884	5531	5553	2222	3804	234	5264	5149	5876	2946	3619	38	5051	3645	2569	5858	5227	282	2098	1119	1917	5756	356	576	2251	4513	4362	566	3325	4894	5945	3861	1364	4365	2929	1575	3702	2310	4557
Row 17	4547	576	4107	5192	5350	4895	438	3970	181	4746	997	407	1573	3448	3567	3427	132	3129	2207	2390	485	4192	321	1114	3153	4838	275	2018	1406	5375	4436	982	2867	5318	228	300	5244	3842	48	5008	2467	1883	2398	517	5507	127	3045	5025	488
Row 18	1087	4483	1023	5825	2634	3246	2608	4177	5848	2306	255	1312	1964	5349	336	3807	522	4345	3722	3345	4007	3101	5720	5693	1994	4542	26	1979	5651	1737	3337	1652	502	430	2429	5247	586	2681	1216	4809	1303	4060	1264	543	901	5764	3657	3401	1600
Row 19	447	4374	1226	5193	3625	5468	2733	2480	3734	5949	3761	2484	3156	4082	124	3066	3214	4035	1304	3802	2231	369	5896	2310	3298	5634	2469	2862	2017	4751	4895	890	4658	589	2588	3942	4387	2305	2664	4458	5357	4285	5174	5104	896	2164	4191	189	5175
Row 20	235	646	3725	1676	4948	3238	5225	5814	778	836	947	1267	5589	1612	5899	3796	143	3432	2500	2478	5776	517	2709	5287	3505	3485	5793	1698	2674	4175	1446	5384	1392	2507	5797	4168	706	4172	5585	1955	5952	2764	690	1282	2635	4037	2650	2025	5883
Row 21	5496	5027	1198	280	4770	4464	1112	902	295	1410	3725	3222	3769	1631	645	799	3905	2899	5837	1361	3766	5517	3473	4079	1913	305	3453	1880	3226	1761	2026	5165	776	4069	2761	1206	595	1911	4111	3242	4549	3751	698	4441	3829	2452	4605	1743	356
Row 22	1937	5304	988	367	301	5246	5212	169	1925	2688	604	231	3904	59	2786	2764	5237	331	631	487	4184	5645	1293	2420	300	5396	2317	677	905	3760	3331	1722	389	1825	4524	813	1128	4407	487	4591	4704	1847	1097	2284	3650	137	1864	1040	3977
Row 23	512	1461	2781	1901	5120	313	5055	2459	972	1266	3388	512	792	4641	3786	1652	5502	3589	896	2378	1733	49	388	1770	3126	2056	1979	921	5781	1108	4087	3773	4985	3882	468	3073	2661	4915	1634	5054	3493	1018	2588	979	4442	16	247	4655	4945
Row 24	5485	193	4049	3985	2455	3156	5476	3985	1939	607	5381	2579	5890	4510	821	973	364	360	196	372	5397	1496	4814	580	4317	5502	1396	4370	1413	3158	5850	1784	494	5090	4793	4620	825	2659	3173	3269	3575	2000	4148	5411	5519	727	2606	2386	2693
Row 25	1163	1299	2713	4854	1426	99	633	783	1804	3631	5010	5027	1206	4177	4462	2100	1880	2262	2746	4589	2192	1369	750	1429	919	2049	5834	5125	4904	3541	5287	1555	49	5418	3195	5590	5841	2501	1327	3680	2556	2850	3997	341	4878	495	4442	3320	628
Row 26	3343	2984	5252	5919	603	5359	1163	2567	5358	5233	4256	3204	4126	4116	4314	2542	5012	3277	4192	1141	2777	4218	5275	427	2024	1516	5122	216	5201	1729	4324	1681	1975	3827	5021	5614	287	1980	5927	3866	248	960	5616	5794	2924	837	2759	5977	2468
Row 27	4148	576	4680	1557	317	4590	2196	2552	3325	96	4157	2884	5229	4706	2193	3455	5570	4999	1370	3472	1691	1034	3160	3082	2082	1741	964	3387	5676	591	5370	4896	2866	5231	1872	3607	4035	3607	2386	5174	2667	624	5	5829	1413	854	1966	1563	347
Row 28	513	3038	4235	5200	3357	1671	4526	5216	2663	1868	4252	5334	4975	2833	5389	3257	3771	1297	4465	2512	5277	3433	3079	4185	1982	4276	4881	540	1544	2388	706	1484	5176	4126	4055	430	5722	3196	557	3067	910	5996	5829	1280	2950	4901	4162	2051	1953
Row 29	2048	148	5404	2608	5719	301	5459	5228	4934	5674	4689	1301	1332	2982	539	3752	1723	2487	5979	3957	3735	1124	5499	125	2973	1611	4966	3791	2701	4163	4618	5346	4539	3933	4722	4931	3087	5560	2330	624	4598	211	156	2558	1217	3349	4993	5551	2476
Row 30	2601	4719	3146	58	5351	678	4702	4378	4683	313	3141	2339	912	903	4990	153	3834	5124	2208	4543	992	5290	1669	3110	5043	5877	3050	4100	692	2981	2124	4315	4463	651	3564	1492	1506	504	4839	2070	337	1570	428	4722	901	3392	114	3695	3815
Row 31	3346	4054	2505	1042	5619	5983	5399	4835	794	4907	3023	1652	3838	648	976	712	454	2243	86	581	3488	3683	2619	5440	297	3810	388	785	792	4159	4820	2321	2311	5654	3657	5592	599	717	3125	5125	2550	760	5305	4966	4202	4448	1127	2978	4580
Row 32	4988	1982	709	5498	2125	4328	4680	3800	2808	3453	5504	4601	1124	4118	3080	490	15	5241	1050	3726	2902	1689	1164	1306	323	2470	3170	366	865	568	3778	2367	5043	1334	5224	5324	4878	207	5589	1383	4959	3072	2841	294	5513	3942	3800	697	2136
Row 33	4081	2192	1752	3685	766	5148	5703	5582	4869	980	465	4187	824	1208	733	4269	5079	3267	295	3462	5746	5095	502	1963	1264	655	4189	5724	1845	1851	5284	2649	16	3884	2394	3451	5179	2412	1399	5020	4662	581	3518	698	5125	974	369	4779	326
Row 34	2168	4666	4848	2735	3835	5269	896	314	1279	320	2389	4655	2465	5201	2879	5843	1479	5809	5494	4441	463	1424	424	30	1437	3459	3202	4874	5928	2244	2848	218	1095	4423	5914	332	5015	2928	2187	2031	2640	3628	4139	3060	1845	5584	1985	5217	1726
Row 35	1856	3581	3	3748	5814	3946	2202	5717	1069	3507	3415	2345	5850	2199	507	4323	5161	1590	2431	732	3283	5837	4574	5690	5686	4669	1209	5323	3804	2285	5140	1278	1400	779	268	5570	5872	3825	3245	5899	490	4874	5767	1199	1858	2854	1119	156	4460
Row 36	2563	5165	1743	541	4562	5579	5559	4449	3343	5887	3738	274	185	1319	5985	760	2906	3075	2039	16	2056	5397	562	4978	145	2963	2636	270	5411	3153	799	3303	1496	5381	626	1634	5519	1439	831	1201	1120	1419	3721	4129	5099	2478	1347	2234	727
Row 37	5532	4242	1597	1881	4627	39	2551	3111	3800	556	5406	2805	2219	402	4780	1300	1563	1718	5373	2185	5104	5370	4641	1250	161	600	5724	4635	1323	4322	2395	2182	111	340	5767	2084	4821	1959	3194	1972	6	1037	238	5433	3900	2315	4976	93	879
Row 38	1728	427	3311	1286	2801	5182	463	5179	5113	4528	1900	1116	4229	1411	5387	3992	2881	4426	5573	4307	917	2156	3613	3254	4438	3236	4806	810	4096	3763	1834	5408	988	4277	5955	3198	195	3304	765	5042	4835	1371	4978	1360	2800	5572	2845	2817	2823
Row 39	1738	1043	732	5415	162	5735	3343	5250	2854	2970	3247	1215	5884	5170	4223	5098	152	4180	5148	150	3736	4091	2247	2290	3804	4727	4288	1114	4538	3859	4103	4457	2284	1890	3860	546	3187	5709	772	5410	4140	5407	5766	241	5714	3431	4032	708	439
Row 40	4793	3986	1054	4985	2585	4743	1482	5656	4124	3109	48	2958	790	4212	1903	3555	3192	1924	4104	5756	3631	1095	5484	4900	712	5406	4750	5304	3177	2940	466	1358	3138	3179	1543	3911	4343	3269	2966	761	3451	4281	1563	3794	4798	2687	2390	1309	5988
Row 41	5811	4312	2122	5094	3197	2891	5084	4766	846	2228	3969	974	5067	1693	2983	3314	2645	186	3750	5937	5462	1793	61	1819	2853	5537	3607	4436	4337	1721	4872	3678	482	3209	649	1622	2406	1400	1578	4023	5188	2933	2403	4736	432	1274	4602	377	5777
Row 42	2947	5391	420	2499	190	3646	5293	4033	1983	5040	839	4911	1037	1300	2069	856	3458	2709	5511	767	4937	2519	2077	4110	4747	796	2171	4107	5683	4149	5842	3760	3926	5025	2647	4817	1203	3045	3101	3325	1969	3626	325	592	4353	2166	4242	5813	5279
Row 43	1518	2494	4526	5880	4836	2117	4939	16	1815	297	1259	1383	5910	2330	5311	2305	1789	1426	3711	1905	2706	4765	1174	3474	2677	1571	4287	3325	1107	522	1339	31	5144	5990	364	510	3364	1774	3894	2535	219	1869	3351	5475	4733	4727	2729	5774	3202
Row 44	5218	274	766	3992	5955	3211	580	2520	753	3090	3720	1149	2695	3551	1864	3484	241	2087	2214	3143	705	3462	1298	1001	3180	1354	2226	5392	551	4850	2642	540	1770	1851	672	5860	4235	5585	1598	763	5953	4028	1673	5938	1927	2737	1219	2969	900
Row 45	5353	4290	1285	4590	4762	1968	61	1723	2108	1732	5495	2772	4879	563	3311	3405	3627	5538	2069	602	791	765	5081	5146	724	1225	4527	4574	2458	4295	2275	5909	4199	3185	911	3373	2688	1281	4371	1542	2719	2211	3684	3120	322	2871	1768	2134	814
Row 46	2729	442	841	2711	753	5813	4416	4153	2988	2196	1776	877	181	355	2018	2125	4533	3744	2578	2206	2853	748	4257	4173	4140	4832	3659	4503	4469	2644	4560	510	1941	3561	473	5285	1470	3057	4379	4134	4365	1864	1606	2332	2156	545	3389	2557	2515
Row 47	1420	2622	4664	2909	1572	119	5197	2795	418	3609	5084	158	5668	2076	3153	2933	2093	5281	5944	495	1335	2177	5754	3781	5996	4385	2001	2065	2911	2957	3727	752	5706	1233	5398	5693	1819	985	4146	458	34	5746	4710	1886	1393	2575	5438	3021	5618
Row 48	766	1489	2620	3266	1510	3878	3229	4353	1274	2246	1793	2637	719	5766	3729	5073	4187	2450	5759	3412	1667	4023	3586	661	5482	2701	2951	5820	5367	4548	1552	3199	4521	5914	1611	4671	2020	1560	2191	3344	3326	2772	1884	3415	2167	2595	3628	1812	5868
Row 49	285	2033	4814	1129	4724	1076	4910	965	4751	5144	3776	822	5437	5208	2941	2719	3879	2748	5866	4691	1985	5126	969	3277	2206	199	5504	5211	3165	813	1128	4778	2003	1381	1906	3026	1530	1057	1531	5743	1559	2210	1858	2279	3366	4873	3398	2410	3633

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.