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	3103	3372	3986	3147	5486	755	3990	3627	3506	5422	3516	5538	5176	3819	3591	5965	120	1865	4368	2897	2407	443	1397	2406	5054	3179	3064	1614	2506	1149	1767	2219	26	5126	702	1966	3903	2743	5762	295	3699	1495	4452	2952	5765	120	182	2006	2834
Row 1	2241	5571	5889	929	1634	5212	5018	401	1639	3776	35	1840	3771	1515	3690	4320	2867	998	1377	2472	950	5169	2618	5783	1802	4980	728	1412	1973	3338	4070	1938	4236	2534	519	3779	3325	1614	2742	2948	4701	4457	5391	5557	1700	5603	5657	3235	5284
Row 2	4689	244	5018	1581	501	356	1630	2151	5005	5480	4698	3634	3422	2127	1967	1390	122	624	5006	5711	2396	1549	5678	1958	1280	5935	2579	1204	2330	291	1002	5244	1837	2153	4884	1938	74	390	5123	714	768	1113	2251	4434	2848	517	1720	4454	4692
Row 3	5461	1388	4386	1816	2925	656	4889	2939	2091	5517	622	4491	1351	5931	5585	4047	985	1498	719	4614	725	2765	4217	4501	2526	903	1182	467	320	2482	3043	161	5589	2162	2328	3403	5461	4073	2272	3062	4577	1565	2397	1769	2337	5319	597	4635	5011
Row 4	900	979	2981	3254	4385	5744	1623	4530	1143	231	1286	4018	2641	361	3985	5896	675	4612	310	2770	3297	457	3478	2092	5612	70	5075	428	367	5514	5499	3505	1333	3653	3650	2123	1747	2919	3789	3071	3176	1994	1379	5503	4186	1443	755	3658	3128
Row 5	4359	2184	3147	285	752	2592	2277	2366	1829	3254	2202	4310	2492	3196	4093	4026	4110	446	2458	5687	2572	826	4330	2922	5425	3735	5784	5431	2180	5987	4383	4191	3500	4181	5445	3452	4704	1847	159	1525	4897	3054	4894	3461	5339	848	3526	4580	4968
Row 6	5266	5265	5305	905	3064	5690	4640	5294	5135	424	3591	377	2545	25	87	4378	5872	1771	5542	2592	4502	4162	383	283	3551	5023	2132	445	44	3497	2839	3146	16	2934	4140	2324	3552	5145	1090	2657	3675	2498	3095	5793	2218	1867	1984	2937	4178
Row 7	4084	131	2682	974	4549	4105	1167	128	2381	2952	4597	228	5609	2243	2363	3882	2589	3096	3085	3998	1745	1497	5243	5242	5532	5841	3271	1027	2419	923	5734	3681	541	1248	3534	702	464	2394	3519	4603	5236	4025	141	1669	2688	5594	1517	2918	1200
Row 8	5404	1529	511	1182	4480	3771	3894	4204	1495	3808	729	1493	4628	3398	1015	3549	534	4058	1471	507	2908	1558	5417	33	1809	1504	3241	676	5036	2531	4578	4254	3529	318	198	5651	3392	246	728	1983	2016	2368	1725	1133	3954	3468	4393	312	4652
Row 9	5434	3644	2829	4111	4616	2101	4782	2041	4745	2386	1527	3425	710	1457	3034	3115	1543	270	4342	2677	4530	4280	3297	3134	3932	2139	1743	952	3463	490	2558	1525	3175	469	744	2300	218	882	4125	5198	5238	1325	3110	2283	905	5836	2613	3054	4146
Row 10	2097	884	3589	1629	3985	900	5617	201	5993	3247	540	204	3329	3254	5108	5658	3428	5717	3319	886	2941	1797	1156	555	2649	5295	3113	4197	1334	1476	3398	773	4624	3329	5498	2136	2286	1735	5446	2394	572	877	4420	111	2006	1613	1405	3407	418
Row 11	5562	3647	3545	1133	2676	5039	5672	1112	3437	652	3977	4810	4255	1018	3751	2970	5388	507	3002	266	4239	5218	3405	120	3186	2808	3279	2853	742	4608	423	1277	1630	4686	4389	5477	2290	4733	2441	4697	930	2556	4429	153	4205	5275	5898	5137	1318
Row 12	5436	3501	1358	2407	5223	2886	4266	1971	3149	434	1179	5553	3378	5038	4126	1594	2649	487	3831	2430	5137	182	5090	1986	4274	4907	4918	5178	3712	4346	4192	124	2737	4641	4255	5872	3208	2361	2785	3216	5582	3295	1627	1088	2344	1436	2446	2206	2760
Row 13	337	917	4108	2873	176	1836	5986	251	2398	4188	3054	946	4340	1059	387	3977	3931	81	3882	2524	1768	1374	5075	4188	2461	1968	2309	5393	3878	3360	2094	5196	56	3878	2351	1964	2643	328	3082	4920	5159	3726	4349	4671	2021	3830	2287	3993	5201
Row 14	5431	1986	5208	1992	1990	5263	5446	3103	3503	4159	2277	3098	1935	4212	5392	451	3196	1963	225	2605	5968	3991	4268	57	871	5894	4864	5070	350	5633	4685	3918	78	4185	2720	3015	582	3246	3772	1807	3971	4997	3081	2355	154	415	4958	14	4891
Row 15	637	3204	1717	913	5162	2024	803	5848	904	1693	2654	3164	5330	219	2519	2057	4513	3097	4504	380	5503	2661	5364	2207	1424	3050	3653	1227	5704	4983	4806	4008	4969	1373	3504	1238	2290	3040	5752	2447	684	233	3280	1901	1540	5207	2482	1700	576
Row 16	5796	1828	923	1821	1488	1226	1988	2345	2183	4175	1341	4949	3447	3925	4306	3697	5619	5939	761	2678	3070	3737	2838	3959	3831	3509	392	39	4724	1992	3301	1410	1693	2901	438	5967	2432	5197	2187	1071	3795	2754	5426	3983	3647	2957	842	4009	5449
Row 17	4852	1719	1830	1434	3571	4819	2399	2184	349	923	5587	3602	3643	466	5292	5950	4728	3572	156	5084	4519	5357	5879	4186	4427	5004	4130	2132	415	3246	1153	4383	1772	1180	1910	2810	4276	3032	2436	3836	495	539	4084	3330	4870	434	1191	657	3149
Row 18	4207	2971	1171	1861	4173	2032	1357	4424	4143	5646	4163	4970	3874	1505	5038	2924	4852	2440	3562	5436	689	5776	866	4721	2387	4858	1434	4686	1536	2720	5958	4611	2373	3607	1787	3407	3915	2121	3293	2272	5461	2497	3779	4825	2091	477	3262	1696	4355
Row 19	3357	5696	3688	543	4223	2740	3240	3838	795	2465	3088	1533	4215	5394	5026	2995	551	3724	1080	961	988	4177	5591	2714	1289	5404	506	3261	690	260	765	3426	4649	1978	4971	763	1551	2425	2329	4590	2434	5144	22	622	3769	379	2122	4734	382
Row 20	4434	2430	5156	5466	4319	2854	2276	1804	3662	4972	4269	5494	2282	5518	4178	3358	594	3580	3573	33	3543	5381	4986	2453	5405	4380	797	1556	2067	5846	5643	5083	48	1535	3870	627	3824	1132	4378	2200	3638	4500	5206	4180	221	2921	5199	1914	1099
Row 21	2395	5779	1453	3490	3092	4380	826	2369	1703	5811	4188	4419	2791	2350	5502	2440	2529	1695	874	694	5482	1431	5846	353	2642	5272	1949	739	4825	5348	427	5302	2185	4655	963	5007	3734	1900	1196	1492	1259	1914	2332	1906	1729	5560	3089	2715	2121
Row 22	5211	941	237	5028	3979	1941	673	2167	3991	5186	2928	2992	2375	5764	3767	5110	5905	4756	3024	4734	3201	2028	1118	1708	5941	480	1808	2919	2020	3812	1850	2621	4841	5204	2998	217	2720	1967	2390	4	4751	396	2523	2297	5850	5960	4276	3289	1395
Row 23	3003	5348	3305	334	962	2049	1808	5416	2153	3385	2791	1227	2760	3062	4700	5524	3807	2401	1009	5847	5878	5263	2140	323	3939	3936	3073	5472	2052	3264	2477	5230	4457	5601	5794	1355	5392	4432	3331	3969	1988	2740	4510	2695	4326	541	5644	4980	4770
Row 24	417	4552	1236	1819	4642	1133	3072	3516	3887	3442	3666	2735	5316	1514	5998	472	3596	5031	806	3400	3141	1541	1675	3119	408	1865	863	414	1485	1846	1925	446	1612	5747	2325	3530	1536	718	5035	4864	5062	4047	4654	3561	5428	5829	1387	5941	5508
Row 25	528	3432	4628	3359	1151	3231	1675	1526	2475	4511	905	628	554	1516	1276	1347	1843	870	5654	738	2604	3971	3517	4166	1415	2624	3058	321	1067	2789	4728	2050	2415	2279	5013	1474	4224	4484	4125	3697	4266	4186	5936	3862	3308	4648	241	709	2648
Row 26	5116	2230	660	3865	4976	3333	5804	1588	11	4817	463	4743	1884	2235	2445	3594	216	2503	2016	1038	4744	5872	1319	2809	80	3065	3010	5232	1128	2639	3272	2968	576	4996	4736	5770	5207	101	5360	3481	5390	1076	1526	2860	2477	5016	3971	598	5282
Row 27	188	2470	3240	57	1984	2033	3525	2946	4891	3944	3531	3387	2293	5186	3805	4689	2503	3465	5095	1601	3241	22	3256	4423	3857	550	3695	2112	3408	3333	4096	3399	5882	4725	972	3271	540	3255	2516	4745	683	1170	4754	3898	4664	5353	3248	5204	4824
Row 28	1545	3426	3997	4917	3424	4095	4505	4638	853	2026	1292	1014	108	5278	888	324	2720	5851	5703	3941	1003	2791	1334	2798	690	4045	824	3462	4389	3013	3052	5883	3036	32	1037	5802	5401	13	4337	273	1919	5824	5692	5080	428	3551	5879	3470	1647
Row 29	3975	1243	4353	2960	2937	3315	4147	3283	416	5083	5272	1064	5874	4735	4698	2428	2323	1386	5156	2064	3366	2346	4667	4483	4004	414	1445	4181	5657	4873	3666	3718	3342	3289	4935	99	1783	381	5369	818	4343	4277	5369	4787	5617	3472	1586	5816	5008
Row 30	3885	4429	2948	1166	2066	1815	1298	104	2164	3733	2729	4697	5787	3048	4027	867	2316	1066	1853	5574	1345	3803	3657	909	3392	5889	3679	2187	4117	3643	2289	1117	5718	3626	1236	3097	5498	2387	3459	2123	5914	2667	3228	3123	5668	5058	4038	5538	4019
Row 31	1479	4254	527	3911	763	902	3466	5918	4761	2302	3371	1105	1231	3049	2306	2739	2493	3123	4822	5402	4821	4911	886	4845	2435	5797	2386	2174	2641	1845	1008	5237	4453	1358	4524	4573	3908	1418	2970	2001	3289	4257	436	2669	3050	5973	1333	1371	920
Row 32	2319	1917	714	627	2276	4451	273	5122	5502	4860	1133	5252	5946	712	2125	5569	2872	5314	5415	3633	3130	2230	4786	58	931	5399	5506	4768	3271	1916	2881	2024	3852	2460	820	60	3633	2258	545	2159	3961	156	2072	4067	343	113	5744	230	892
Row 33	452	5009	2023	3410	4600	5869	2988	866	5577	4775	5310	5642	3609	631	2663	3597	2279	5446	218	2644	953	1554	4590	3452	1891	1090	4423	888	90	5176	4394	3246	4956	5791	79	3212	4165	2535	5960	4847	4703	3818	2987	3868	3411	4857	1943	65	4557
Row 34	3384	3812	5888	2710	2843	4135	5169	4159	3856	1638	3778	3538	5537	3860	3234	21	127	4083	2548	2781	5616	804	2087	1336	5371	2337	5517	3298	2166	1177	4913	2383	4317	5606	3638	494	3318	3460	2106	1579	3628	4740	3348	1381	2340	2641	3945	1468	3836
Row 35	4457	731	4173	4277	3533	3662	2830	3083	2399	1157	62	3929	2988	2982	165	1970	2027	1071	2365	1766	3400	700	2741	5907	5142	4524	3960	2633	3528	1533	3074	2996	1228	358	5616	458	3186	82	563	2454	4677	5686	399	4203	3572	4250	2386	997	1830
Row 36	2313	3482	4325	1053	3862	5875	2367	541	1875	2968	3583	3699	4883	1109	5830	1197	4539	269	1830	5013	238	3802	391	397	2364	5204	5826	805	2521	5577	3198	2897	1636	953	767	1453	1518	665	4520	5775	1500	5177	3224	2431	4103	1818	3439	3819	3707
Row 37	3792	661	2223	200	435	461	2189	1217	760	4709	3017	5514	248	5570	4718	4898	3882	5483	1796	3513	3494	4153	2989	4082	2527	2900	2179	1592	4532	1092	2291	714	3117	4074	542	5100	3966	4379	2986	4297	2089	5883	5538	1343	5807	3289	4345	4396	2935
Row 38	3059	3475	5747	2178	2353	3273	2693	4693	5822	1619	766	5410	2075	2374	4977	1501	2031	1294	5378	4734	5158	2112	3790	5895	888	100	4923	1772	3840	4016	2262	2538	443	3731	2764	2061	3566	5239	1753	4737	2108	4117	4824	5144	753	5351	1690	4902	1961
Row 39	4909	1291	1395	3067	5325	2558	5353	1591	3420	584	2945	5445	4504	1020	966	2992	1475	3676	3975	1484	3434	3501	4936	827	3259	4793	3254	3993	910	2753	3038	502	5882	5131	818	3625	3404	1777	1398	2535	2732	4444	984	3739	5247	226	3534	3208	4381
Row 40	616	5772	5132	3770	2502	376	3303	2534	4309	3641	4346	4937	169	1466	5735	3519	2827	628	2239	405	5397	5845	5486	399	1690	1909	2846	3522	617	1211	3221	1729	389	4620	387	2770	5168	1892	5383	5331	5663	5372	3231	4182	3636	2194	5614	4337	5579
Row 41	4002	4586	165	3999	3817	2254	1199	4813	4952	4197	5348	4389	4511	5308	4550	3027	5687	2025	2754	11	2884	1461	4632	1349	3162	4818	3785	1336	5515	3134	2610	4332	5511	854	3970	4976	4924	5132	2851	2136	2713	1237	3668	93	5950	1422	3715	4220	4959
Row 42	3197	1145	2225	2327	2244	5725	5056	2354	1972	2154	4110	2867	5279	3774	1401	1542	2346	3414	1610	1342	5055	3420	4740	4845	5773	4797	1122	2368	1583	2325	5246	3224	253	3594	3045	3141	534	2063	5524	3637	4625	921	4036	4978	4309	4248	860	3912	1169
Row 43	955	1246	1286	1552	5816	2272	288	4754	4818	5734	782	3729	4980	4091	5515	2377	121	1287	4340	1111	4330	852	5460	3833	2203	3589	1316	4545	1271	5646	5895	75	744	4610	4644	1873	4279	5871	2579	5700	3088	1850	1396	1185	4206	580	3115	4293	1856
Row 44	1723	4595	2707	5694	531	2811	191	1929	583	552	2535	597	2260	2327	5000	2661	2380	1592	175	1731	3358	4388	23	3835	1070	4474	5040	3957	2873	4353	1839	1770	1020	3090	2756	2418	3023	164	2229	5666	2882	3041	5213	4672	3205	1273	5384	5821	2631
Row 45	4926	5137	3196	3786	92	989	1668	1828	4562	3269	4241	3732	2103	370	605	1729	4816	3359	5845	4513	2578	473	406	696	1883	1105	2678	672	984	4856	2128	3339	4203	2493	906	5281	3641	5595	3702	5616	2703	5754	5504	456	161	3089	3487	5564	3335
Row 46	26	2506	5719	3240	3043	268	5454	1873	1107	3168	3463	5360	1267	4009	479	3063	1422	1170	921	3101	1953	3702	1437	5686	3739	1858	4561	2786	3740	2559	4560	2563	5449	1441	5871	4343	840	4169	1010	2487	2333	3776	95	4522	124	5745	4926	4531	5593
Row 47	3052	2058	1388	930	4200	1370	3479	3444	5326	2341	2934	3385	3750	599	2108	1471	4252	3177	2230	5814	5670	4843	1493	1174	1871	1747	1182	3640	517	922	1840	805	1246	243	1959	1746	2852	2720	5872	1180	851	4069	4145	3064	698	1886	5325	742	427
Row 48	1868	3113	43	3794	2780	2055	1609	502	5842	5684	5413	3238	1291	915	820	1445	3677	1172	5030	552	3739	227	659	2413	4604	2866	3115	1869	3841	3054	2616	3033	3147	4501	255	2530	1523	2882	2222	1434	4949	2237	5046	4493	5776	5744	2920	34	4493
Row 49	706	2722	2476	706	575	3891	3538	5990	1031	2303	5767	2689	5315	3091	1142	5099	5982	1132	3037	592	5329	4468	699	3943	744	4555	3548	5055	1665	135	2701	3013	2842	3011	3956	512	2722	1320	3013	1520	4858	1812	2382	1182	3611	4717	2925	2208	5631

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.