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	4110	439	3486	4495	5291	677	5366	4443	3412	4015	3018	3762	3657	3153	266	5516	4493	3000	2805	1168	2508	2951	565	2065	5666	4660	1650	845	4953	4350	2531	3574	4142	5072	1828	2896	3567	4389	5305	321	3075	2811	626	5553	2831	1199	2232	4892	2094
Row 1	4532	3286	3767	2717	2871	111	216	1050	2949	4560	3785	600	3498	1152	5513	4596	1015	1605	3807	4532	5680	5597	4994	420	908	4491	5806	2735	4770	4437	1592	778	34	3530	2926	1889	3132	3611	3353	3679	4817	3226	885	3234	4881	768	3479	4773	3970
Row 2	3257	702	4052	994	3280	3659	1054	201	1992	2535	4696	5539	2262	4506	2441	4092	1366	3364	5505	3060	4797	3986	3101	2451	4066	1435	3052	2241	2661	1612	913	4124	4755	5014	800	1462	2127	1183	4180	3618	250	1296	2384	3511	2281	2940	758	4174	1240
Row 3	1974	1066	2828	1657	3301	2194	1522	3375	5709	3429	207	1327	5023	3208	2128	3981	4789	2241	2312	5129	5670	3686	1608	1371	3794	483	5901	5190	4885	3174	5747	4136	5054	4404	22	4221	4035	389	147	2191	5227	796	3993	2775	4178	4828	4047	4973	2752
Row 4	5139	1404	522	5439	2728	5389	5490	4225	3324	4267	3947	2522	3234	4027	2918	5379	5135	4754	1509	5199	5096	4909	3039	3113	5541	5506	3089	1820	3128	3197	1895	2717	2060	1156	5970	1156	2764	3141	3866	5929	3556	1569	1596	1152	2142	659	3019	2012	2688
Row 5	1062	350	3567	1310	493	5586	664	2202	5841	1911	4628	831	1286	3039	4753	3919	5856	383	1718	2230	1951	934	1804	4137	5227	5942	3506	2391	4981	357	1654	2500	5280	954	1497	4374	777	2487	1032	5509	5473	5719	1811	5702	4992	1410	5304	3328	4563
Row 6	2493	2825	242	52	5504	4433	2458	4684	1467	3793	2755	1673	5298	3111	5180	4320	2039	4468	5938	839	5592	4197	5004	1830	40	4545	4780	1881	4489	5211	160	5852	3098	4046	234	3719	1908	1917	284	613	3304	3300	3123	3218	3231	275	1867	3909	5327
Row 7	4064	277	1887	4331	166	1871	2530	4490	2633	1106	992	4668	4974	2977	5780	4422	5771	2917	2206	635	3877	3414	4577	4692	2415	2071	2782	789	136	5267	4467	1531	4415	1148	1970	4061	5788	494	598	3611	5985	5315	2206	2901	4410	5007	1464	3312	4085
Row 8	4840	3962	2706	1973	4259	5206	2936	5456	5578	1659	4134	1620	335	3734	5511	4465	3721	1795	4114	1715	2867	5691	5183	3767	2551	158	5531	5054	3920	2617	3811	3393	1901	5619	1025	4374	2812	5336	4576	2568	2985	2266	3029	2463	574	3760	1439	2459	4149
Row 9	3708	5114	109	3429	1754	2817	5081	1716	5857	2730	835	4020	5257	969	1317	4682	3325	1865	1408	138	3595	582	2307	5628	1842	1485	4453	512	1887	4027	2306	3094	2281	1709	3933	4576	157	5961	2289	1309	5122	3886	2227	2210	1380	4560	1510	2644	4824
Row 10	394	1813	3885	4685	2066	5511	3014	5433	1689	3015	1057	5007	1312	5289	198	1725	2556	823	94	902	4696	5450	5277	1092	4552	663	1201	2283	338	1813	3381	3165	4692	2589	4214	4944	2629	252	5942	5768	5433	4612	5174	4186	206	353	780	802	5444
Row 11	4924	4661	1655	567	2703	3139	643	946	2411	4673	2550	3184	1762	4026	1550	2381	4868	3178	4226	631	4930	5587	489	5417	296	5305	1665	4469	5823	2122	4905	4630	899	5013	5708	4694	2373	679	490	1700	1346	3627	4210	5891	821	4228	1325	5306	3614
Row 12	1849	4885	289	5680	1931	908	4931	21	3328	5475	4913	724	3247	5705	3975	205	57	1945	5119	5449	4036	1178	1922	3976	5423	5929	5168	3881	2609	5439	154	1219	3035	1896	1851	4608	1384	4731	4381	374	3126	5143	5173	5595	647	280	2367	5494	3615
Row 13	3109	3065	1003	2546	3315	5774	3167	4375	3634	1561	4406	1091	5238	1921	3790	3634	1777	1563	4818	4177	4515	543	1635	4306	2297	2801	5975	2455	3188	4392	4848	5725	5216	393	2776	3650	1702	982	367	5914	3823	1229	331	20	2101	860	5718	5368	4373
Row 14	4588	52	648	1568	2521	859	3535	1928	2545	4828	5370	3231	5240	3327	5957	4707	3878	5880	4900	1849	4954	3473	920	1300	110	2517	2397	5309	2748	1123	4804	3354	5388	774	3488	2457	5358	3249	413	1759	776	2383	287	267	1959	2203	5511	2175	1663
Row 15	3640	158	3886	3168	3038	1873	4460	699	4603	2381	1571	4715	3903	5769	1457	5953	950	4297	3433	940	5832	5924	5323	75	3643	5476	1076	1337	3322	3278	4173	4082	4090	5919	3382	2680	4179	3474	4409	4892	5148	2819	5019	5400	3425	1742	1277	3563	653
Row 16	2546	2275	5915	5041	3312	1055	1398	1450	3132	2951	5325	4350	4525	2846	1171	3011	3017	1150	2265	718	4155	5359	1746	2224	2862	2577	2100	5108	770	2565	4165	3117	4555	944	2408	2760	5652	5096	3542	5832	3785	346	3466	5348	3863	4829	4569	5099	3041
Row 17	4533	2581	4879	1499	256	4523	3322	4652	3613	960	5452	4105	5166	2624	4370	1311	3436	2042	3789	733	628	1049	2613	4177	4361	440	1713	2290	4308	2398	1399	4315	1537	724	2185	1596	316	2229	1454	459	5923	263	2979	2178	1974	1771	5771	558	4322
Row 18	5471	2080	3350	4255	841	4070	3224	3635	3169	2513	5809	3597	4089	3667	1187	5044	5556	2387	373	3765	4259	678	1548	3390	999	1405	3651	4565	2923	1002	4951	4529	2576	4209	4901	4702	1678	3542	1977	5911	3382	1646	4137	5963	4322	2442	4083	2866	729
Row 19	2679	3527	1536	5444	1488	1049	518	3490	1944	4931	2242	1145	4736	3247	716	5031	2202	2617	5094	1564	2159	2198	5067	2527	4799	5930	255	157	5326	725	1470	2226	2443	3707	2910	2918	1896	1815	1924	2900	3010	4716	2446	5389	2889	5099	1788	4529	349
Row 20	4609	628	5282	5865	190	5745	2009	2389	2188	3426	2280	366	1754	5209	3025	4345	1056	1240	506	2292	494	434	4572	1168	3038	2573	5962	12	3470	417	292	4479	3424	3804	1044	200	3877	1602	884	4600	4202	335	1787	1730	5538	1772	1254	3036	5599
Row 21	5683	1261	5107	5587	1275	5987	4902	1045	874	3962	114	2874	1019	3094	4289	326	605	778	2668	996	4529	2552	3806	4140	4537	1782	1617	5370	4712	873	3646	987	659	3602	396	1908	4539	5446	1989	3081	3187	4403	4160	4149	1590	1003	3091	2314	176
Row 22	4010	3136	2752	3022	3548	87	5141	758	2315	2822	596	5034	4172	1674	3374	2843	5335	5977	2415	3638	1170	1628	305	1676	3598	488	327	604	918	5194	3758	199	5467	201	5029	924	4422	3697	191	5777	824	891	2752	2348	334	5718	4285	3701	3084
Row 23	3588	1943	5685	4141	2190	5799	5492	4699	3100	236	1950	4298	1988	4673	4252	888	1898	67	5201	3682	3378	3615	3649	4180	2049	3617	1473	5775	3653	221	4863	1447	2501	5511	1854	3125	4294	1621	2501	4054	1337	4888	5402	3220	212	1732	388	4242	3390
Row 24	4547	1034	3125	1644	431	968	3483	5880	263	3130	2750	2241	5645	3197	2049	2290	3047	5061	5490	5642	3018	5582	3149	5691	359	5253	4859	5674	5512	2405	5299	5563	1041	2349	4115	1243	692	3643	3553	3399	4094	1391	5983	980	3159	1097	3894	5067	1371
Row 25	2682	3283	372	364	1465	1270	875	4614	598	1918	3940	2207	650	5527	2605	16	213	5323	126	1469	922	3457	2520	2505	5487	681	426	3857	3041	3678	3887	2779	393	4574	1174	2070	5176	160	1096	3623	3469	4310	1349	2713	498	4777	5331	5182	5609
Row 26	5651	2007	2433	400	1795	5895	4805	3413	2841	2598	2437	2055	1496	5739	148	200	353	3448	2846	3066	5757	3914	525	222	957	4598	1894	1824	4605	2062	4138	4836	3504	4536	3886	4151	2309	5782	660	3700	911	1783	100	5630	3811	1369	4912	539	2761
Row 27	822	3746	2956	2263	117	3818	4305	2475	5563	1359	166	2365	2112	3947	2072	3539	3051	5095	5041	1119	3379	5801	2058	3562	2941	5995	3088	4406	3358	3681	1787	1854	4702	1292	4890	57	4917	3383	4698	5989	1921	4679	771	342	4003	2016	2189	813	4777
Row 28	831	2790	1571	3168	2901	2588	5952	3761	5218	3097	2423	3190	663	570	3675	4585	4750	2283	1333	4049	4194	2429	2728	1318	5211	3451	204	1850	2693	5994	4848	3189	5545	4713	3094	3546	1914	3086	3390	2838	5045	803	3265	1281	1555	1806	336	5466	1521
Row 29	5953	2904	5859	1751	2069	3215	5760	5058	2582	4194	544	1525	2468	5479	4664	3253	2333	2328	2684	3808	4250	4663	3424	367	1564	1496	5997	3774	5288	821	5577	5311	3527	5808	2557	2047	4483	1615	40	3690	2220	5158	3570	3656	1912	739	1347	585	3981
Row 30	156	1794	5186	2181	5931	2118	4246	4867	5962	3506	812	5628	2677	1485	2786	5137	2665	11	3772	5426	4756	2345	1672	4270	4536	4306	810	3286	1192	1739	1934	3941	233	3744	4790	2573	4736	4184	2993	5207	2493	3023	2864	2303	77	5671	2500	3482	2294
Row 31	5540	352	5727	4848	5736	331	1544	5168	4862	2602	2441	4881	5391	1573	1648	4388	3655	1450	1476	1925	4614	2188	939	2182	1696	5846	1342	712	2621	1525	811	4599	4102	5199	55	4156	3159	2158	3592	52	572	1158	787	1502	3724	4785	2612	1909	3065
Row 32	2562	2007	2158	2305	116	709	2413	5609	2843	3656	4236	2854	2003	702	4837	5260	1372	5551	5805	5307	5025	5394	3364	5144	2155	4891	3630	4667	495	52	119	2957	2161	5161	2407	2012	131	3145	1967	5105	2703	5296	966	5189	5902	4766	816	5835	2077
Row 33	4069	2750	3743	2245	712	5950	5179	4241	62	3934	4192	2384	5392	542	1399	4756	1981	3124	5911	3258	4234	363	1701	1852	4617	3650	5285	5335	5499	1758	5724	1732	4404	1304	1948	3715	1402	3017	2613	4384	2054	2799	414	5232	571	5329	5285	5593	558
Row 34	5011	1871	846	980	3343	1122	1912	2570	2796	2364	5993	613	1237	2739	2495	1480	2112	3751	5129	322	3894	4834	1445	5435	5476	3331	5250	763	3202	2876	5102	5534	817	3148	3374	3533	4561	4196	4579	5571	2578	163	796	206	2359	788	24	1774	1358
Row 35	1860	5452	3473	3012	4105	5324	2895	4452	1779	5335	4523	5326	4388	1402	67	4523	2850	5677	2892	4184	4082	5651	3919	1539	972	5694	1229	5808	5448	3541	4547	4482	3016	3895	892	4638	5149	4532	2592	3577	2280	4865	731	5675	2433	2835	2111	3012	4404
Row 36	4415	4445	3821	552	2316	5401	1014	371	5474	5967	352	4134	2935	5369	2510	761	4332	5048	1535	1331	4404	565	5151	2192	4578	4467	4886	5881	2982	1381	1358	2047	5846	5443	5242	4447	5369	5915	4514	3453	5656	529	583	4642	3791	1638	5096	254	1099
Row 37	424	2864	4788	197	3195	1384	802	5881	4488	1323	2629	1228	5709	5848	3579	449	3953	5173	1926	4177	4190	1883	2875	192	426	2885	2535	4559	5679	3415	2286	2572	2770	503	2980	539	3896	4211	2200	4975	3431	5560	5844	4661	1166	3740	3042	3763	3894
Row 38	3547	4886	4226	1244	3466	3217	4935	1072	3128	332	822	1492	3283	913	2322	1193	1193	1615	3989	4549	1696	2116	3137	5575	1630	3435	3436	5301	2603	5667	4855	1271	5024	370	2963	1027	2962	3842	3066	1019	593	1308	3307	1693	5488	2516	5177	4556	696
Row 39	4472	798	2539	1593	5875	5435	5494	5385	4745	3623	2736	355	4255	2262	1771	3791	2845	4461	4636	3992	5372	5124	1592	1820	1048	5584	5938	2650	2392	362	4189	2341	4690	5276	4511	3952	5218	1809	156	4727	5055	1304	3048	5306	2967	102	4849	5527	1367
Row 40	798	2817	4593	3389	689	5703	1495	1369	5316	3846	538	1900	1651	5968	1980	4679	16	307	1348	3259	4106	5982	2859	5829	3575	5264	2077	387	5294	2879	5103	2630	2246	5972	4498	3956	3177	2610	5182	369	2420	5772	4116	2187	1561	2589	944	3762	153
Row 41	1759	3992	1057	1194	3499	1359	2499	4029	873	3226	4954	990	3069	1077	1151	1103	1594	5994	5137	2064	1565	4877	3969	2905	5638	491	293	2456	256	3463	172	1315	2266	3812	5620	4834	3773	5395	3288	2458	1090	3499	135	2534	4812	834	3128	505	3471
Row 42	222	3577	2659	142	889	2718	5181	3205	614	2555	5710	4988	3604	3431	4924	3395	4910	2701	51	3847	2479	4541	5316	4385	5718	5074	902	5435	2758	3738	5390	816	1866	3949	3850	5281	5454	4499	4850	1860	972	827	646	105	4006	2897	2045	15	5376
Row 43	4350	2406	2451	3110	5651	2123	2540	3958	941	3948	4680	2591	5974	399	4152	2036	4128	1411	622	5843	1936	167	5309	4677	4780	28	615	5893	881	4340	1640	1272	2724	3901	5944	1740	1005	4102	315	5459	3595	5538	5648	1230	4595	3444	592	5952	1670
Row 44	3946	3749	4962	4440	5537	5556	23	4863	3848	2632	2904	5711	3376	248	2493	4651	5388	1784	1220	3852	2409	2915	2472	4154	5456	4036	5249	979	1061	3502	5993	4974	4844	1876	5371	1983	2636	4583	1338	5079	3901	917	1582	1543	4711	4665	916	5524	1686
Row 45	1232	2512	4905	800	3834	3352	1728	1321	2170	5792	699	4092	4198	471	3446	3499	1847	4715	1687	1084	3580	1026	257	1055	3644	5605	2634	1065	4129	4227	2909	4431	3992	3	3919	3460	1323	2841	925	1629	4797	1901	1510	4265	2062	4697	2656	5475	4098
Row 46	127	3089	4831	1859	1490	1845	758	351	4962	5159	4465	5953	2492	4011	4593	373	5895	54	1468	4886	3762	290	4790	2757	1489	367	1993	5548	955	599	820	5908	4148	4441	5130	1106	3324	641	2287	5044	5396	4725	3040	4358	4912	2549	5990	1406	2023
Row 47	2418	5419	811	5088	394	2910	562	343	5775	1318	424	2663	3038	5010	2224	5611	2704	4285	93	2254	2576	2923	3071	4031	4885	1554	2960	870	1824	50	3571	4287	1055	4595	1487	4191	4580	1121	1955	4319	1001	4628	1812	3250	151	3432	5170	5472	5104
Row 48	5962	3186	703	2750	1884	1802	2268	3822	4700	2975	2647	4562	1413	78	2597	5349	4979	2207	5968	1168	400	4014	4419	1222	1820	2015	3846	1830	2190	565	1105	5721	5717	1264	5530	3763	3606	89	1092	4198	2449	2105	926	575	1529	2842	79	5059	842
Row 49	3711	1262	3234	157	3765	3472	2972	1470	5848	4853	4042	214	166	764	4182	2222	5780	3302	4471	3363	5824	4938	606	2628	3872	3046	510	5459	2545	5513	452	4329	4366	4653	5138	1041	5705	3506	1677	5596	5607	3750	3075	3308	4756	5816	4925	3962	2643

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.