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	5170	5986	3523	4191	114	2130	1125	72	5630	1724	5536	1775	3412	1931	3847	5850	4502	376	3800	5348	4091	2729	2942	3589	4385	3287	2315	2048	1621	4241	5338	791	4227	2860	4981	4340	4989	105	4412	4619	1828	3947	394	5240	5878	4240	5090	4379	4615
Row 1	2890	3727	2705	5618	668	294	4002	3954	2608	49	5575	849	5387	365	5075	2246	5345	3415	1235	5450	1826	5854	1278	5772	247	518	5649	4486	5608	4028	3101	2497	1754	5806	2115	2421	99	116	375	2706	165	5949	3554	5551	313	2628	1797	5658	43
Row 2	3031	5107	1868	2884	384	1639	3131	901	1288	1616	508	5315	4716	3005	1068	4521	5119	3489	4619	5235	3863	1325	5400	3811	4878	4951	4123	1506	747	3780	1548	3778	2886	3416	662	3270	5055	3792	4171	342	5408	4679	5657	4123	1683	725	2644	802	4213
Row 3	1263	36	2076	2587	5436	5886	1465	4386	4009	2971	5132	1788	4519	2910	4674	1934	3571	1944	989	1363	114	1331	770	4793	987	4893	475	1712	1536	1277	5925	2799	1313	2000	5386	748	1885	851	5133	5893	3821	4265	1681	2340	1174	355	4274	4745	2298
Row 4	5262	108	2412	592	877	1204	1579	5770	1679	3290	1306	2955	3214	4104	4268	5213	3490	5015	1098	4340	4148	991	2160	2412	2672	4500	3586	3026	2773	2330	5324	2034	2438	1735	2625	3314	2939	4204	3084	4618	1493	4389	1573	4707	2493	5840	3920	5982	4854
Row 5	5018	4321	3002	8	481	5413	2679	4980	2999	5705	1752	5329	5028	3785	1766	763	410	5080	3702	4614	2163	2319	106	551	3891	4813	3044	3730	2732	3025	2584	1749	1346	5585	1757	1826	4998	4436	806	1996	4140	2558	1324	3168	343	3090	3930	753	2169
Row 6	1631	5366	4331	3950	5471	4882	1840	4284	1925	5570	1016	4950	2154	2765	295	1739	4521	2121	736	2956	2927	2732	1096	5484	4056	4263	5826	1145	2193	578	3314	3823	5944	1645	1772	5415	526	3612	3698	2451	3181	4713	1401	5334	1477	1696	1072	5998	3817
Row 7	1808	2954	743	4540	4049	227	2596	2311	53	3741	4503	631	1054	2326	574	2698	4098	5988	3224	1709	3685	5675	4890	2398	1075	4224	3875	2771	5296	3872	587	1104	825	1330	5643	4873	1556	2238	1184	1608	5979	5687	2238	1032	2013	2812	3730	110	2799
Row 8	953	1819	484	628	708	2881	1702	4932	755	4473	4227	4627	5059	5330	5451	388	4973	4324	1944	1211	5508	3551	1189	5194	5789	2220	1207	2600	5949	1316	5398	902	3135	5882	1529	3842	2763	3231	2774	3517	1703	1000	2144	762	330	1594	1150	5302	5918
Row 9	3093	512	5426	643	1700	4620	432	3920	5826	3031	3869	1141	2429	4770	4275	2311	298	2117	5073	3529	4891	2589	5231	5890	4733	5993	220	327	1142	5521	244	4234	33	5669	4877	1733	4288	5308	5652	4113	2339	3520	5254	4768	2290	3529	1078	2587	5646
Row 10	150	116	4536	2739	5347	4426	1471	5339	4645	1797	480	4166	2041	4714	4199	1710	3590	5931	5997	2897	5583	4110	5236	3102	3364	4003	5392	893	5080	1979	538	5229	2094	5074	1967	1440	3500	3437	779	2144	5234	1258	310	1274	5972	4508	2983	3561	4438
Row 11	2980	458	4021	1090	5693	1123	4454	3695	514	5346	2775	2492	5884	2003	4585	4958	3969	25	2457	1406	803	4601	639	2061	4910	1913	2032	3417	4895	5592	1855	1875	50	5875	2964	5742	997	1418	3437	1511	764	211	4002	647	2213	2587	5605	182	2611
Row 12	2061	1588	3414	661	2227	5474	5570	4139	1505	2987	3034	1097	4842	4908	1146	4716	1872	887	5713	3290	4324	1223	4053	4534	5225	4699	747	1811	4304	929	4421	364	2516	1835	1025	4742	1308	595	2881	2813	3581	5915	3909	2422	4822	5054	1138	694	5941
Row 13	851	3984	4265	2073	2036	2798	1298	735	3545	3108	5038	4473	1529	5401	988	3363	426	5730	4671	1020	2610	1483	4600	2524	5391	1022	1346	4445	2159	2040	4386	3010	23	2650	5082	2058	5448	380	2792	2992	3487	1830	1464	5016	1231	2451	2378	1656	2180
Row 14	1049	2675	4790	2531	1274	1314	1921	2295	2660	366	4454	4699	4751	1463	4722	1400	545	780	848	924	3572	3839	4411	5401	5302	3427	631	1753	5805	2286	3933	853	4960	2722	3383	234	4036	5303	2529	695	5668	983	5393	4419	2446	4114	5819	2990	4893
Row 15	666	3914	2465	4504	2325	1865	3805	5751	2495	5558	5555	4781	3490	407	3741	211	3790	3974	4246	3093	502	4940	2761	1485	4333	1179	3930	2447	997	920	1340	1662	4833	3804	166	1158	5668	3971	909	2163	3528	463	943	1017	870	4683	1228	4660	2657
Row 16	5474	1752	3159	4414	4512	4643	2746	5690	2572	5193	687	3491	532	2349	2324	4336	2514	3482	4003	484	4390	166	4011	4853	1109	5028	5723	5792	255	4382	2448	5728	133	5607	4141	4645	4250	887	4334	822	79	5021	4313	610	1369	636	4946	3883	4118
Row 17	2948	4366	2507	3114	2377	1359	4222	1404	1082	4014	1658	5463	462	1386	5596	68	5526	4240	4317	412	2574	5138	491	1594	3450	1101	2963	4086	46	845	2203	2994	5211	4710	107	1587	68	4329	2991	1150	2342	4649	612	2803	34	208	2871	5559	4447
Row 18	1187	5971	1021	325	461	2615	3775	1562	5577	1860	1607	422	4063	4600	5632	2772	4707	1219	2840	3035	4209	3989	5377	2857	4601	2180	2890	4808	5050	2449	3255	237	2420	4275	561	2881	889	4336	4442	466	195	48	887	4257	4648	519	1029	3354	1737
Row 19	3868	388	5945	1857	5765	2801	457	1944	5691	5265	993	2140	2519	1230	4559	794	1791	1440	1682	126	5881	2148	320	5929	3034	4577	4576	3552	5606	1929	5289	3473	2317	5233	5330	2081	2034	5787	4025	1725	5051	5018	3864	1569	247	2423	2362	2037	3862
Row 20	4044	2162	3742	192	2482	3670	3226	1058	2246	778	664	4174	66	4137	491	5298	3466	2572	1332	3252	596	3056	2302	5614	920	3871	5860	3342	233	1897	1203	4277	4058	4944	4468	539	2614	1693	1597	4859	2470	2260	3033	2535	396	3523	1833	3862	95
Row 21	3165	1113	690	220	3415	304	1139	1285	163	4481	1517	2059	5683	5794	117	4627	4261	656	1241	5953	2253	99	2423	4512	3132	4957	4908	655	790	2770	749	3954	3882	1439	4173	1297	1742	5312	2581	1904	3792	4098	3963	3475	3891	4079	2101	2152	4735
Row 22	3341	2104	987	3440	4526	5498	571	3483	4406	1226	4272	1175	1974	2225	5057	3412	398	353	5153	5710	2934	1057	3501	1032	5020	976	4923	3098	3076	1074	1832	417	3178	2818	3857	1704	2316	4427	5186	722	5653	3458	1897	1626	5683	954	5037	80	1307
Row 23	4190	5789	4241	5247	3290	5272	4266	4265	4194	1364	1341	5268	3195	1757	2446	13	5613	4149	2329	4040	3335	3051	3692	792	4947	5318	475	5901	4354	554	1207	2544	343	5447	1790	3632	4719	55	1897	2913	1418	3238	2180	4613	4994	4626	4626	4607	2774
Row 24	955	2647	109	4005	339	901	2952	5656	1375	2852	4010	1928	4059	553	2271	3506	2343	5903	2225	2398	1799	5137	3816	5036	1317	2428	4030	5942	1054	2637	2716	2008	5283	2824	12	5621	3724	2964	5277	5098	5816	3286	1026	3875	3839	3296	1380	182	3198
Row 25	3604	2579	4997	2741	394	4033	4057	2822	2062	3998	3875	4698	714	5883	3981	3537	5894	3602	1260	2858	2878	358	2673	164	1383	547	4002	4678	1927	4183	1876	5530	762	872	2270	1155	4904	327	3977	966	4325	1851	5664	5038	1733	3645	2574	1627	1246
Row 26	3834	4485	4124	4191	1157	4288	5573	1704	2290	4251	3630	472	127	3160	1234	999	5430	2389	5903	5756	365	868	4080	2215	532	3117	3948	4176	5691	5575	5422	3524	4059	3545	1715	5216	1833	1288	919	4122	5539	4549	4593	5665	1708	5827	663	1138	2215
Row 27	565	893	2579	1433	4973	4794	1964	2090	2742	139	1781	2316	5561	5304	375	3106	1019	5591	4938	2306	509	3059	1844	5058	1652	1508	766	1478	2171	1903	3692	2735	2796	271	4167	1769	5064	131	3858	1806	270	5638	4122	5830	4942	4496	2935	5960	4086
Row 28	1872	2265	4595	4930	4108	3652	581	5616	4418	2059	1786	320	5751	4521	3116	21	2688	4884	5085	2818	2741	890	3087	2379	5011	2916	1320	3507	5850	1280	1593	1722	3544	187	652	1652	3839	1233	1268	2257	3291	3053	2576	3041	1574	5692	3062	4261	4575
Row 29	2146	1078	1316	3035	4164	3694	2046	1080	5014	5552	930	293	1145	2651	3836	1331	3303	5488	5170	4535	755	1426	1826	3808	4002	4866	5381	3693	1927	3641	2267	4073	4718	3582	1108	2882	1276	3153	3961	289	2705	4890	581	3849	1541	4417	5180	4843	3904
Row 30	4350	3378	4658	5776	5203	2466	3777	4069	1846	1470	5996	5487	3737	4068	4205	1319	5175	1086	2594	2328	5047	2883	5032	3937	3463	2881	5477	1879	2061	4320	5783	410	1697	4441	185	899	906	3962	4967	2751	5432	4962	2237	3168	3030	441	4486	2204	1527
Row 31	1080	4532	573	3962	3564	4509	1425	444	3986	3303	2505	2306	3086	2914	4003	1526	3099	4901	2431	1061	3868	5181	492	2830	1418	3659	5860	1858	2145	2064	3384	3225	595	3957	1186	4158	2466	2611	4602	451	5914	1106	2757	2999	4019	759	4524	1118	5660
Row 32	954	2178	3528	135	2669	358	1552	328	217	3410	2473	2280	793	5697	2874	4750	883	1032	1215	3493	5633	1665	3406	738	4421	404	4757	5180	4928	5875	4839	5882	2052	2366	16	4721	2723	1568	5049	2939	4977	1521	5219	5770	1217	2092	4519	2099	3124
Row 33	5733	5592	2756	1398	2997	3494	5819	3401	2251	4998	2329	2125	3837	2210	4177	202	2226	2898	2925	3793	1946	5864	2769	3466	5082	2539	4682	1174	1058	781	4297	790	373	1052	2188	3369	4546	2006	770	796	1004	3098	2921	4840	5307	1098	5042	1533	3995
Row 34	1966	5325	5940	1829	2094	3405	911	4632	2087	2084	5689	2868	380	479	3240	1432	2667	609	5977	4673	1378	773	5676	4476	3694	4516	3783	4791	3558	5315	2786	5524	4639	2725	1352	733	130	2262	5365	2217	4346	5053	5084	4725	5532	2324	157	2198	2932
Row 35	134	870	4310	907	546	2785	4600	5062	567	3391	2619	5882	176	2142	4521	2901	3494	5253	3031	5756	4617	5247	4101	3670	4331	2826	3201	654	2982	5399	3586	3115	269	1895	4021	815	4680	2621	5876	5247	11	2494	5128	187	4636	3648	3088	2129	2900
Row 36	118	1884	1516	5365	5985	5186	3696	2810	2386	4349	5791	1785	1935	2906	2054	3829	926	2868	2508	3546	2743	1754	3557	5237	882	3744	3872	4529	831	6000	1429	949	1884	2945	314	1868	2130	4009	4677	4516	2357	4468	300	4291	1373	2354	2120	2298	5221
Row 37	4628	5844	1963	382	3400	1199	1263	1143	5070	5792	1974	5070	1221	2922	953	4165	3236	2820	294	1244	1497	4809	3600	5964	5109	1891	1336	1462	4011	3634	682	2638	3477	2645	3019	877	3844	4282	2020	2914	4074	3993	1983	5294	915	2936	3458	4150	5756
Row 38	3752	5393	1252	2560	2993	1216	1669	4884	2552	3131	2894	185	3813	5532	3662	457	2551	4539	4301	833	558	1214	4906	4551	3197	4200	5466	133	1657	3616	5888	5408	3009	1140	1968	2	2355	3637	4886	4906	767	1780	5091	4579	1311	2753	5036	3862	1291
Row 39	3336	4694	1849	4550	3600	400	1747	1799	5866	1879	3456	3481	1767	2864	490	2906	4831	491	5261	2468	5376	4167	3234	1156	3258	1813	2466	10	848	328	1301	4184	5022	3150	2734	2621	3549	4480	4419	3414	359	1875	895	2126	4738	1384	5031	3569	1875
Row 40	4292	36	1251	2458	3269	2406	5715	5082	4872	5725	5930	5199	1026	4114	4220	4175	847	841	1724	5327	5260	5138	5686	1134	32	1811	5871	1416	842	3439	3291	5133	3474	4542	1591	743	948	1306	5825	5819	1031	5754	5018	2056	3867	3238	230	4714	4079
Row 41	1953	4040	3338	1091	3725	4472	1122	5536	4342	2538	377	1781	5828	5510	5255	4369	1100	5998	5316	2405	5822	5135	3435	5576	4153	5491	3442	1391	5720	2155	5469	1673	195	2807	2763	3919	1278	3885	3455	5619	422	3831	1400	250	3340	654	4619	4440	651
Row 42	3935	845	473	3070	4280	48	1222	3770	3489	2613	3490	5644	2081	5163	5838	4887	1925	3757	164	5810	1211	5783	232	5042	1182	481	2381	1835	5100	821	2486	3035	1665	2958	104	5944	3005	1326	3713	494	3938	1203	137	19	365	5975	4905	2290	3732
Row 43	5069	2099	4942	4851	2330	3984	33	2811	364	1868	1911	1185	4353	4945	2849	1311	5049	2792	4315	374	505	4809	4311	1708	4946	4330	2072	4920	3234	4361	2651	2303	460	1593	1153	2789	5576	1186	5600	5940	3053	1511	1124	1406	455	3972	2716	5503	764
Row 44	1031	5877	1269	5839	4188	2976	4784	2517	5047	3703	5750	3408	354	2052	3867	1946	3205	656	1522	4391	256	1461	1443	1766	2584	2848	2220	556	5563	1723	1319	593	1599	2588	432	5786	5563	5215	2302	4610	2918	2052	2017	3272	4104	5883	5218	1309	539
Row 45	739	5699	794	2199	1142	2559	4783	3989	4779	5338	3552	501	657	4145	2100	3244	4576	1886	2806	3791	4188	1415	709	239	3432	3980	4343	3314	3197	5651	3853	3935	5350	4646	134	491	1204	4917	4480	5983	4254	2031	484	4910	175	2583	2154	4751	4469
Row 46	4959	2541	2656	374	3249	2895	3805	1229	1237	1119	4425	888	4971	2360	238	3617	2494	728	4820	1410	5207	4803	5664	1238	5286	4574	1412	1869	727	162	337	5686	2703	2993	59	5952	5887	3864	1180	1123	4983	5605	2011	3954	1965	2248	1570	4458	2976
Row 47	390	5868	2183	5192	5531	3420	4478	4104	4832	346	4831	4994	683	4516	1697	3675	4575	1648	3561	2438	2827	4684	1421	2431	694	5374	4395	2942	943	2853	5917	1333	2720	2100	524	2251	5520	5001	355	4351	5347	5185	3345	29	3700	5041	3703	2275	688
Row 48	1263	4713	3515	5946	133	5946	640	5507	4341	3581	450	1193	3498	1782	3913	5598	2306	163	5117	1307	517	3468	653	5701	812	682	3401	5853	4384	5676	541	5647	4388	4055	5593	4520	4000	232	4027	2340	3813	4476	3533	1311	257	1445	908	2562	1607
Row 49	24	3868	2124	3492	4521	1825	4303	5202	5226	4156	3586	4901	4696	3232	3288	2750	2824	1808	750	3056	5834	3090	869	4309	622	2180	4566	2067	3088	1128	3674	3112	4995	5797	603	3516	1622	4906	2717	847	3061	303	5748	1756	3534	3035	4506	358	4843

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.