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	2910	520	5131	1831	5076	5404	2627	4477	591	2706	609	4300	1054	4143	173	1967	5984	4013	3543	2247	231	458	2220	75	1839	1573	4920	1583	2530	2999	1883	5345	4510	2489	4719	4624	269	4529	4572	771	5494	399	4718	5324	3309	85	4303	4640	1538
Row 1	4345	1459	5361	665	385	3000	589	2210	4761	1520	5193	273	4640	3348	5550	4945	853	3354	5579	444	1789	309	5540	1157	3807	4794	5817	1847	2916	2998	2004	790	2276	4009	4562	5953	1284	837	341	1121	5262	2899	144	5991	3651	324	3748	633	2012
Row 2	703	5205	1501	1629	3788	1435	479	387	2539	5079	54	865	116	134	2588	3288	1724	3956	1449	457	4470	156	2996	87	341	5071	653	3206	2798	1665	2986	4671	119	5806	2258	4879	4931	5989	5115	2882	1960	3571	5139	4811	3896	3604	3553	1806	5230
Row 3	5934	1928	4446	4103	2977	4302	580	228	5024	4279	3473	3026	3920	5668	4849	2358	1267	1399	961	4138	424	5693	428	377	1934	2922	790	4056	1799	2676	3084	2706	2934	3344	1792	3225	4548	1260	3899	4304	2333	4059	4823	4410	4240	5889	1785	1953	5736
Row 4	394	400	5716	1852	5495	295	4843	4560	5160	306	5059	4892	417	749	2152	544	4187	90	5734	5606	2193	30	4491	3324	4975	4533	4865	1984	1035	3216	1791	2492	1676	4746	3116	4975	2607	4664	4674	5452	5299	5556	1846	4510	5264	4629	4610	5238	5521
Row 5	4454	2525	143	1987	1714	4819	1537	2286	5948	3892	3162	5874	4653	1188	3372	545	2433	2450	1625	5589	2518	5063	5521	2093	2481	2058	2855	5193	1398	2222	4086	3939	3046	1993	979	2365	794	725	2372	1449	4437	267	292	3918	1063	5622	5653	819	5704
Row 6	5973	5427	3113	3209	5525	5581	439	971	1257	4338	245	1558	3756	4987	5405	2813	3962	4903	1132	4208	3465	5548	281	1189	1632	3597	1216	2728	5108	5091	4018	4818	932	5303	4383	306	3679	4403	3	5790	829	340	2553	1135	711	3581	5536	97	3971
Row 7	668	3124	835	2994	3386	2585	2143	2756	2280	2271	4120	2404	3914	1773	5195	4048	2334	332	121	4765	5377	846	1370	3588	2464	827	5411	5095	138	4906	2130	600	1283	2414	3110	1063	1359	3174	403	5338	3459	5404	25	823	5317	4416	1931	4694	1841
Row 8	1045	1451	961	4720	4013	4860	1956	1299	5023	1966	5843	4145	2740	4155	776	4083	3543	3381	5467	4713	679	5269	5903	1696	2094	5004	3489	967	3832	4700	154	1525	2467	5327	3137	3093	5017	140	2064	157	2873	5759	1426	838	1219	5064	5278	5771	3631
Row 9	3618	3073	2756	4299	4571	4947	467	4575	1151	3042	1304	5392	4444	3337	731	286	1103	2840	1854	4362	1866	1224	2744	5440	979	2963	1629	4606	3643	3291	2116	4597	3471	23	2741	1355	1600	1074	2088	764	5854	3929	1271	2088	5596	5552	4295	3423	3544
Row 10	1054	5216	4873	4409	1153	2655	3871	3788	3320	1465	10	308	90	5341	3036	5308	5867	2757	4849	5926	5753	3965	3242	241	811	5811	5732	1252	5146	2621	896	4781	3249	490	1767	1479	3667	1658	3559	873	3182	3393	5084	5617	2221	23	5557	2364	981
Row 11	4685	1054	2417	2571	4773	3602	488	2927	2428	501	4636	3764	1424	1145	4530	123	3281	3761	3169	1271	2993	691	2313	833	5258	2515	611	2161	5507	3404	4394	3595	3908	3222	4206	2751	733	5416	5818	3300	1475	5723	721	2112	5970	2712	5205	2939	896
Row 12	1162	889	4854	4809	3745	3084	3255	858	2782	1266	1589	1369	876	4504	611	2895	3926	5618	5680	4963	2140	4635	4544	2120	3136	1382	2655	885	3068	3230	3902	4473	4798	5709	3008	3794	3831	5051	827	5452	3119	611	5379	1076	4215	672	1407	3104	5979
Row 13	4447	3160	1923	4649	3751	4436	4798	2314	3838	5173	4894	2569	5379	4190	1734	2497	4007	3482	3750	2369	4374	2387	1025	5069	4630	3103	5592	1794	4219	4204	4457	4994	1793	2725	1154	5276	3194	2896	4691	2698	4193	3853	1645	4617	4092	2713	603	1086	1899
Row 14	2442	3247	3871	3683	4298	3105	3616	5695	2421	1590	2043	3060	1566	2309	3783	5104	3970	774	4979	5914	558	304	2634	2414	3404	1971	2472	205	573	1267	2785	2866	5985	1927	1964	5725	2610	4096	4795	2460	5749	2014	401	1900	303	519	1303	2767	1950
Row 15	573	3658	734	3839	136	1734	1001	5739	5069	4991	503	2238	5069	2353	4178	5771	2214	5820	4913	1009	299	4784	3798	2145	4587	2434	6000	1395	4473	4713	852	588	2982	5755	247	3051	718	3739	4127	2836	3989	3553	1076	4490	4081	5329	3357	980	2657
Row 16	2992	204	1337	321	1739	2721	4127	4666	4940	419	2434	3023	392	3901	181	5995	979	4893	3038	3170	1272	1209	3919	5361	2017	4075	4	3071	706	5746	1537	2186	939	4850	4585	2779	3596	756	3929	89	1462	4198	2547	1538	1779	2426	1362	3262	4403
Row 17	5934	5577	1644	3173	4383	3910	5839	3676	4831	5466	3292	1046	4653	5774	2854	1794	2571	1685	4858	288	1268	1138	4735	5267	5419	5950	4049	5057	157	3588	2137	4734	4587	5131	5922	4125	2710	1757	2569	2906	1037	1781	2623	5061	1830	5676	1537	5249	2098
Row 18	478	903	2523	3365	1448	330	4635	1204	4140	3527	1149	5753	3972	2111	374	453	5852	4668	2033	1865	321	3285	4569	234	2267	4598	3873	147	5213	185	4371	2299	444	5653	3553	4001	3974	2936	1708	1991	3499	2916	2836	1695	4259	3276	3028	1951	1159
Row 19	5612	1038	5860	2230	219	2505	1307	4836	1361	4421	4095	1526	2210	619	4619	2351	840	928	39	532	5388	2267	3575	278	3566	262	885	4531	5350	242	3913	3094	1556	5595	4076	4667	3917	330	1961	5088	4219	4481	4001	4231	5579	759	4587	3989	1266
Row 20	2755	980	3370	431	5969	391	5095	1974	800	2855	4589	3558	4741	3878	1576	54	5481	4872	1892	5727	1109	2545	3210	693	5727	3369	2037	4977	546	2593	5833	3236	2260	5833	3017	4526	1088	2293	3766	1151	5899	223	3818	2212	1599	5384	3028	5759	3375
Row 21	716	3981	5339	714	3340	2733	319	4799	4343	1731	329	3260	5825	3902	4095	3792	3435	3952	89	3488	4448	5153	460	405	1594	5568	4040	2811	2211	934	4306	3077	1532	825	559	3540	401	2983	5707	2438	3526	4549	2711	628	2719	1565	5438	2181	3433
Row 22	2079	3436	4920	351	267	4264	447	4034	61	1487	4618	1756	2476	3571	3338	1763	2616	5404	4650	2188	580	4833	1053	3888	2808	734	1352	5437	860	5204	5056	1935	5597	3582	4191	3258	4366	4052	2568	1812	5595	5522	3393	3072	479	4554	1096	5084	5019
Row 23	5665	943	710	748	3022	2688	995	34	3096	636	4318	5638	5440	3390	3522	1255	2378	1053	5515	3040	4492	495	2842	85	1557	5845	1401	2261	385	4656	1116	1915	4255	777	3514	1084	936	1157	773	5337	5123	1890	2596	2120	1034	5061	3551	5409	2229
Row 24	2485	852	5852	2008	3776	2312	3435	1106	257	1068	5423	1584	4878	2709	2335	5539	4949	482	5129	127	4701	2208	3357	1665	1666	5688	564	4815	1109	350	4858	1570	5858	4018	1087	4566	4869	2496	2169	1341	4052	601	1717	2144	2945	1381	2417	3954	613
Row 25	1459	1306	5789	26	918	2510	3045	775	3586	4548	4768	5243	3094	4161	3072	1055	5882	455	584	3094	5416	353	458	4311	5410	462	1325	3909	131	173	3326	5211	1456	5112	4864	3004	960	3105	5431	3380	5581	51	4181	329	5773	1540	5583	1963	2239
Row 26	3995	5105	2275	3771	4459	5618	3813	700	5101	3124	3767	3170	5212	1886	3451	4750	4800	4267	5460	3109	2865	4554	4344	4297	348	4789	5916	2398	636	3220	27	2341	1894	2039	1137	1622	603	4199	943	156	3340	3914	3770	2548	5992	2524	2795	5366	301
Row 27	2023	5227	5121	4150	5145	2687	3146	2510	320	4181	1411	429	15	3998	1526	4167	2638	3356	4078	1135	5148	1111	1004	2927	5327	1736	3718	1447	2955	3430	5980	4058	1248	5131	2570	2200	2091	4768	3632	2450	2489	2207	1294	4465	4275	4265	615	4313	2594
Row 28	2216	5250	4150	4986	3522	855	1325	3709	4696	787	806	1403	2962	3183	2879	1263	1617	5578	2462	4185	2420	5829	1190	2788	2379	5860	3030	3367	4529	3464	3335	1138	3278	3765	5667	4782	5222	5818	312	5866	1717	3515	526	1135	1384	1268	2260	478	3250
Row 29	5146	431	4657	4866	632	1387	986	2504	629	3115	2370	3574	4923	4577	2937	1286	2534	4185	3293	1537	5037	4827	2431	3229	1682	377	341	4852	1739	190	4898	1815	5545	757	3896	319	1762	4769	3031	2597	5651	4784	2353	4502	402	4270	1448	434	5137
Row 30	2362	5223	4809	1746	946	3449	4331	2665	1315	2386	475	4352	2177	373	1492	954	5250	1137	3963	1339	718	866	4594	4086	4694	3310	4497	1275	2856	3425	5242	5118	3094	5964	2231	657	5675	2461	2498	4353	5007	2060	284	4687	5313	1175	2305	3332	4883
Row 31	862	915	2228	5918	2145	2454	1912	5501	1571	5067	4890	5044	656	1901	1383	25	1859	5830	1954	2298	4079	1554	5451	2946	4315	4553	1033	798	1469	995	1665	4996	153	2968	1324	3704	2780	5432	5084	5274	3339	2593	637	63	4041	530	5642	2747	5085
Row 32	3179	4472	3896	4394	5838	1647	1437	2461	3056	4247	1993	2160	4668	1636	1718	2536	5118	3958	4193	2863	3968	183	5832	5339	575	762	810	1114	424	3960	5967	4036	4215	5356	2364	2630	1207	1215	5854	456	3843	5818	1422	2318	2637	3749	1188	887	2273
Row 33	4716	178	5675	2892	3754	857	1489	5435	1092	1689	3678	2113	4910	1195	5505	2509	3181	298	2671	3796	935	4183	1617	3178	816	2910	5966	2306	4485	5212	2087	3343	1089	352	2332	4216	2279	242	2867	783	60	4618	1673	3773	776	2899	4550	4715	3666
Row 34	5225	2881	4427	2781	446	3065	3009	1782	4404	5906	929	5911	1010	4563	3017	2341	367	2515	5019	1458	4989	941	3883	2260	1256	4486	1821	4063	240	419	4083	3881	2105	545	2260	5548	199	2195	3687	33	2707	1556	5179	768	2228	5564	344	1371	267
Row 35	5973	3874	3614	5514	1972	1788	1716	4369	3624	4458	357	3916	714	2468	2834	397	285	487	4999	5505	3436	1330	3534	3651	1690	3779	2714	834	3472	1597	4621	3654	5726	4841	933	726	2450	3331	5476	1511	4313	4902	5997	4714	2048	2284	382	3826	6000
Row 36	4330	2407	5492	3836	15	1822	5636	1611	3658	4355	5442	4578	2775	4950	1538	1607	1933	4410	2139	5707	497	5023	5778	3414	3385	4655	921	1550	3778	329	3169	1177	1056	2569	3544	242	2837	1586	3556	2258	147	2939	2543	3821	1500	624	3907	1126	3014
Row 37	8	2676	117	598	3149	4879	4553	2519	4323	1984	2297	1294	2672	127	4368	3168	3656	1894	3389	3946	2450	1588	1308	4208	4647	1011	2593	342	666	1357	2606	1505	5067	82	3147	543	1336	381	5114	4490	3428	449	5983	1080	251	2768	1784	338	2780
Row 38	2660	246	2541	2414	5969	5774	4090	1197	765	2813	4030	654	4322	1508	3426	3069	2265	1880	1658	4883	4762	4151	2675	3998	5099	209	797	1745	2045	5927	2073	4592	4838	2027	4767	5011	5156	4694	4404	288	3438	5338	739	48	3419	5392	1678	469	5455
Row 39	583	1427	1051	1036	1334	475	3300	5234	3943	4319	2000	262	1458	926	3797	4578	3831	182	1975	2184	4646	3144	5832	3943	4900	559	3548	5277	2804	2155	268	4876	3746	5367	3967	1038	5630	5959	452	1292	4773	649	2588	340	3949	2369	123	4463	2424
Row 40	1780	3016	4231	548	287	1867	3732	5959	4832	296	5359	2953	5193	2818	1603	4669	3672	2355	1212	221	3601	1541	2584	2077	3392	1841	3272	777	4994	507	4676	4976	2437	5941	206	1285	19	144	3441	4353	3122	2299	5117	2140	3682	2791	4841	4741	3484
Row 41	5174	5426	3853	778	1244	1814	1162	3434	5214	5000	1735	2681	991	2544	1614	4007	5583	2554	419	3785	26	5695	5158	2644	4730	2244	4560	1147	2974	366	5421	1175	1979	5665	4322	5611	1574	2688	3234	989	562	4216	3490	1928	1579	2839	2707	2083	3012
Row 42	1718	4042	2784	1802	2026	3890	3003	5411	803	5704	3536	5226	4651	5225	3283	2438	1241	1487	2533	759	5637	2315	4513	4334	2434	3130	4555	784	4356	5888	5064	3001	2473	2401	3651	5908	2501	5039	5270	3637	3423	1835	3380	3006	4168	2593	1185	556	563
Row 43	758	755	1093	624	3034	2788	568	436	4518	4264	2376	3305	1952	3317	1726	1664	552	552	20	401	5091	5123	670	2118	3819	2587	1735	1440	361	4711	3491	1776	5488	323	3476	71	4527	2822	4136	4902	4912	2928	2309	2997	5182	5708	5481	2621	1616
Row 44	2783	995	4755	2651	1308	3695	3086	5742	2758	5259	1360	484	233	5825	1283	5834	2554	2866	2301	209	3418	4094	4896	200	3296	4977	3976	5108	2961	4167	2802	1967	1603	1186	2520	5330	3272	2026	1424	3688	1909	5568	1017	4764	128	651	5159	4843	1876
Row 45	2309	1059	5873	987	239	2640	5573	1586	3429	2560	3673	319	3595	1696	3386	405	419	2230	2269	4760	3869	2802	308	1254	5239	4391	341	1709	1905	2981	1783	2427	240	1260	1226	1229	501	753	2740	194	4136	1686	1262	2939	3868	4356	3547	151	2209
Row 46	5457	1537	3566	2399	3150	5658	4816	4946	3772	3505	5224	1718	3690	4540	5061	3679	2250	5751	1894	244	2156	2188	3621	1285	1697	4136	1501	5650	2561	4154	2298	1368	4474	5846	3420	5131	3889	3287	1664	606	92	5642	3632	3414	4292	3178	1664	4029	3345
Row 47	2869	1486	1623	622	3902	1667	5639	2572	1460	2581	2544	60	398	4717	1606	1050	4204	2543	5296	1991	632	1410	4651	1009	1796	2129	2340	506	2502	1109	3070	3243	3190	1453	811	4741	2228	2752	2356	29	3701	4688	4832	1227	1924	4843	4902	1290	4673
Row 48	3027	3145	5269	2505	5780	1801	3117	4667	3235	3402	5641	4177	5507	2512	5553	1184	2558	3484	5760	1001	2162	801	2303	4306	4847	4748	1207	2528	383	3663	2180	4077	5190	1975	1949	1984	3853	4675	4470	4767	4232	260	3324	1780	5783	4824	2223	5877	1250
Row 49	2457	5262	5297	2874	494	5489	3498	5851	606	5206	3941	2240	4406	5830	5445	809	2733	4006	1172	4698	2602	5310	5276	5342	5642	5030	2760	1858	164	5391	3103	1763	2854	3035	234	1857	5619	4342	1233	2733	3969	2257	3736	2306	5028	1063	3	3932	1908

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.