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	620	4543	5420	1613	21	5785	5092	2947	3375	337	1949	3752	2655	963	5570	3160	5605	617	2878	5817	3009	2351	2914	1417	4978	4738	36	4406	725	4144	2584	1344	2687	2004	2957	2707	1789	2049	5653	5163	2385	1601	2915	5040	2564	2484	2199	2168	3100
Row 1	5077	1984	109	1427	4898	1525	405	3635	1560	4810	4359	5703	1393	5702	2389	3396	2659	5096	5184	4707	4748	4346	1091	349	1260	130	2912	3744	2329	5079	844	1405	1063	952	2832	5960	2476	3236	3595	4036	2045	1953	3739	3438	1655	128	833	4314	5223
Row 2	17	3020	3971	4363	4111	4319	5623	4241	1231	3366	569	310	4209	1974	1372	5160	4805	1332	1636	2041	4926	5672	4086	879	3411	1523	2534	3538	2355	847	2761	2372	3866	731	734	1977	5050	356	217	280	3722	786	589	1930	2759	1961	1090	1564	3293
Row 3	2726	3605	2219	2398	1690	3097	5808	3212	5630	3346	5567	477	106	1938	4342	837	2672	319	5887	3027	535	166	748	1320	755	2678	4079	2716	3768	5643	8	493	3247	2226	2891	4937	5323	2698	2148	4953	43	1715	5429	149	3653	3771	986	324	4089
Row 4	872	3351	4623	1037	4099	5943	1792	777	4021	4507	4544	3664	4514	5037	910	740	1927	5846	62	4624	1994	5014	4667	3709	4442	4816	1361	2212	5801	1684	300	672	5035	4923	1708	3134	4865	3500	3910	2886	2006	2453	549	520	1490	1459	1259	3416	1305
Row 5	1320	2040	3298	333	706	1006	4775	5522	2367	986	5322	4051	1286	5993	3085	208	1701	218	5072	5200	4128	1957	1206	580	2506	1725	2069	3964	2984	5485	5268	4303	1524	2566	4636	2230	3572	3410	1751	5938	4396	1072	3988	5681	1065	1073	5888	2765	1290
Row 6	4959	1965	5417	916	3171	5997	3421	4896	2066	1385	1879	1550	652	181	3074	3218	4817	5303	789	2226	1054	727	621	2126	4714	302	3190	5786	189	5955	1076	5147	1920	493	63	5090	490	3483	3985	2555	4867	5863	4105	5519	44	1178	2736	4861	481
Row 7	3525	1087	1534	4251	1708	3659	2965	2009	848	2751	2197	803	3826	1344	2722	4319	1406	1812	4808	4888	5797	1363	3755	5660	5467	3274	5703	645	9	4564	1125	3534	5650	2658	1785	1357	317	4749	3365	1165	1499	5561	1967	5325	905	4689	3644	2310	501
Row 8	2451	1198	297	3814	4952	5956	3281	2225	5659	3925	2234	4222	5050	5768	3871	1708	1552	5228	2024	301	2592	3188	1800	2153	5155	1125	3058	3843	4768	5367	4343	1219	564	4640	5032	5516	4595	2313	1741	4254	237	3975	2475	5286	3743	346	993	5294	5573
Row 9	3017	5595	2165	204	1394	4318	5358	2518	1375	3201	1286	742	1544	2504	1306	183	1536	821	4777	3848	2562	3030	4085	537	5505	3371	4279	5851	4363	3573	5424	1379	3167	1588	1583	4561	5906	940	1079	1281	4141	2364	2022	5684	4868	3328	5866	403	4149
Row 10	4643	4251	710	1673	2335	1246	1177	5705	5525	1027	4068	3097	450	5447	263	2038	1029	4823	1944	1969	5901	3224	110	2265	5246	5793	1132	2573	5658	1535	721	4300	5785	1431	5973	2120	2677	1149	1825	2201	2176	5892	5297	2625	5339	5560	4662	367	4382
Row 11	605	2336	4283	3829	2445	548	3075	2238	1679	5647	1895	3214	368	195	2999	1798	167	5119	4475	1316	943	675	3491	834	5972	115	172	5531	4777	539	3912	5382	2875	2195	3211	5320	2742	285	1557	4421	5932	3452	1635	299	3647	4633	2097	3813	3751
Row 12	571	5129	4693	1246	2619	5527	1217	2734	5699	747	1511	238	4659	892	3112	853	4103	2431	3595	4387	3988	2016	4318	1439	3650	4617	5085	2282	714	2898	33	1284	2026	4726	2530	4644	4252	3746	1378	3951	4493	2888	4188	3151	3780	1300	4004	1882	3731
Row 13	1599	269	1718	3614	4587	3157	1263	3203	2241	3545	3916	5138	3578	5200	1164	2303	1730	5808	555	5476	1185	4505	3968	4073	2693	1119	1852	3993	5123	3734	1723	721	4002	3441	4335	2589	597	5598	5792	2838	3143	3708	1976	720	2908	3139	3022	4637	2947
Row 14	3576	4112	4131	2081	2079	2203	4774	3198	4055	2767	2320	1788	4489	3041	5790	1930	1375	2379	2527	973	2170	5365	4115	5877	1340	4834	2784	4479	1856	1420	1425	5432	5532	5556	1512	1611	1759	286	4808	5814	3052	1127	1602	1541	4168	1391	3471	5542	3770
Row 15	5997	515	5939	5362	4629	5815	701	3463	2599	5180	5318	4019	605	4749	3550	160	261	5160	1919	546	3968	1732	3598	5094	3333	5138	3261	4724	2609	2803	2493	2606	3318	2431	1967	1946	2246	2668	5408	4845	1847	4726	2863	2452	3474	413	2612	3734	5573
Row 16	4530	4280	3541	261	1877	2634	3594	1015	5895	2317	3623	2698	4809	228	15	1240	2195	1961	3486	4862	1369	2330	709	94	5193	3160	3568	5606	5771	1301	5179	4300	5580	2719	4561	1457	5353	2155	2471	5248	4471	94	1945	3280	322	1960	4520	2516	3921
Row 17	2005	1377	5290	4335	2086	5383	3527	5245	2950	3133	5016	4251	2311	3316	3831	5030	1877	5287	4382	4031	1758	3629	2502	1852	5574	5781	2173	1534	4300	4688	5454	305	65	4744	4639	2151	4126	2166	1395	1076	5298	411	5327	1609	3727	3157	638	5603	2444
Row 18	5019	3633	4202	2648	134	53	2221	5915	2225	3754	4215	913	3208	4519	978	1951	3157	3128	77	5323	4523	1153	4620	4933	479	229	2659	3636	866	2262	80	5885	5895	4281	2532	28	4334	4752	5943	559	2506	4157	1472	5714	2675	2449	1664	5832	5576
Row 19	1741	5154	4099	2893	3774	3032	3372	4003	5691	1008	4868	1952	1087	4752	1846	5368	1284	1874	3702	35	1816	4260	2541	5972	5731	2254	2647	2180	3918	2478	1756	5658	1632	5854	2551	5406	2885	5923	3408	2576	930	2276	4527	2017	1027	373	1385	2311	2246
Row 20	5086	2346	4061	3346	4886	4033	3077	1140	679	5257	5058	3157	1012	4715	4788	866	1266	4193	3750	1188	1600	326	2118	3876	4852	4134	4903	5224	5519	1213	1470	4605	3558	5531	1950	2444	3563	5027	3583	4242	4283	2640	1398	5294	1355	185	159	2621	4378
Row 21	3909	3808	5978	4235	5926	3853	3086	4059	2755	2310	3578	3967	3780	2182	1524	3310	4131	3968	873	3158	1550	5114	1441	4190	511	734	5545	696	893	2165	5073	4802	5972	5050	3036	5897	2902	122	3956	5656	2432	1533	3623	211	3714	5147	3521	1845	3114
Row 22	4393	5003	4664	3506	443	2853	4017	1177	2397	4712	2070	4561	3784	872	4533	2833	3908	4430	5735	4029	2386	5391	461	3919	3013	671	1633	2159	4192	3477	5273	2584	2480	3936	90	2922	789	4106	4099	3185	2817	168	1746	601	1039	279	3434	4946	4708
Row 23	3168	2975	1094	2559	3436	5012	5571	4107	644	1730	2298	4121	1003	4881	600	4938	4970	3522	5726	3076	1620	2911	5892	1788	4656	493	2826	4934	3926	1772	3642	1094	4747	4735	3652	2182	3746	3222	288	4389	4952	2586	2509	5954	1466	3109	4892	436	630
Row 24	4617	3511	2250	1527	3403	4037	183	3895	863	5117	1820	2635	2758	2913	1382	1493	565	3563	5238	3787	3851	3627	2738	437	135	2692	1902	3244	1584	2338	3873	200	5849	122	1727	3251	4159	1910	1146	5021	1026	2966	1656	3784	5879	3037	5276	443	600
Row 25	4513	4229	4450	2139	967	4886	2274	3659	788	5517	5242	3126	3390	5442	2974	3512	1169	224	1670	3078	1370	691	4104	4335	2346	1887	4213	5382	1163	4656	5981	5675	2884	4431	1814	3851	3317	4088	1509	4105	3605	750	1230	995	191	4203	4506	1359	4427
Row 26	176	4437	5796	866	2540	4131	3212	4427	2344	2593	5589	999	2574	5264	3883	1005	1078	1733	4321	5165	3241	2425	2770	3991	3654	3764	4182	1857	2269	5540	283	2444	3977	78	3310	516	4209	521	4942	552	3114	4530	1550	5688	3793	5433	692	4870	1165
Row 27	5012	4035	4406	1437	804	2397	5090	4568	578	946	836	118	1229	3280	4094	1307	590	4609	5515	1110	3551	66	4224	2081	1616	3911	5874	1048	4602	4744	2213	3614	2778	618	5050	3582	3015	4140	2149	3592	5086	2985	3709	314	265	1803	1621	854	412
Row 28	1135	1964	3962	1201	187	43	2816	4098	5916	3864	2700	4660	76	314	1438	694	5363	5019	3708	3503	1168	1300	2588	4153	5009	2902	4417	811	4522	5270	1222	5657	1234	5184	857	1421	5226	3673	5518	5142	1536	2218	3801	1612	2531	5238	2305	1894	4257
Row 29	13	5396	5425	1312	1983	3577	320	4885	1994	1131	3406	1264	2352	3062	2497	1536	3919	3917	762	1591	3435	5904	3126	5652	3705	4738	2182	2943	1042	4075	1200	1055	3471	624	2367	5454	4201	2687	4338	195	3817	1744	1458	169	4806	3955	1705	2724	1871
Row 30	2466	4314	5305	2369	1440	4957	74	177	1138	3016	1219	5213	4215	2273	2684	4839	4639	2137	3039	1326	475	3234	5142	2218	4691	5311	1023	2645	1015	3746	4516	3481	2060	3820	5850	3499	2776	5923	3675	3914	2938	4893	3127	1153	1166	5811	5991	5805	1947
Row 31	3030	1130	2421	263	272	4639	4953	5582	5661	1598	597	3407	113	4077	5466	3933	3926	2965	709	3849	639	4623	787	5532	1750	1939	698	1560	1929	502	3506	4958	1632	5927	5220	1903	4565	4173	1485	4226	5771	2082	1632	5883	158	1098	3816	4084	4062
Row 32	4524	1932	4701	3146	2718	4233	4895	4657	4930	455	585	5432	3960	5543	1064	3887	4763	2966	2452	2935	4451	677	2706	532	2309	2588	690	3407	404	4774	1469	4927	706	169	2073	3424	4402	967	2080	3332	1421	2665	2763	5381	2207	3827	3268	969	792
Row 33	5719	3904	5243	396	609	5775	2705	3197	464	111	3600	5238	1579	2526	5943	1748	4598	3366	149	5565	5446	3481	986	2110	244	367	4316	4070	3634	5284	4862	3353	3187	4104	3749	3796	3879	453	992	4342	564	4591	3580	2142	1116	3522	3890	5714	888
Row 34	4039	5278	333	1519	264	2442	1762	630	758	5832	4264	42	4693	1617	3229	2797	5366	1024	675	5818	2015	5016	381	605	2596	2523	1721	117	413	1434	1004	4451	712	1337	5970	976	3779	1732	1606	4536	1563	5870	4577	255	1486	1805	3051	851	2828
Row 35	3725	669	4843	2741	1050	5447	5336	3573	1167	5453	3985	2601	457	2436	3313	1793	2405	4288	5571	4136	5893	4107	5699	5762	2683	5954	1247	4487	3004	2098	1315	729	2767	157	3470	3816	5604	2806	1388	771	2259	5372	3371	2715	1808	683	4508	4212	4970
Row 36	4079	2348	4862	2185	2046	4624	4867	1999	5870	3354	5003	1968	4669	5732	4734	4825	3202	2550	4429	7	3937	5199	2265	3309	2569	4980	5116	3252	3487	3328	2222	1565	5675	1084	3749	1721	5707	2616	3719	5577	5969	2722	1544	4638	2453	278	3462	5654	2827
Row 37	1890	5661	764	1089	1926	4072	3657	905	3188	909	4391	515	3130	5956	189	4213	3705	1910	3919	320	5628	3495	289	2350	5039	4926	4802	5317	2388	4456	2143	4278	4116	2906	5366	41	978	3023	946	4165	3931	5337	4679	1061	5292	4868	5273	2996	777
Row 38	3192	3316	405	687	3604	2755	5726	2529	1556	5042	4917	12	1185	3194	4128	4090	2559	4168	5067	5582	5113	3232	3512	4450	1910	4573	3741	778	3846	737	1555	1037	4052	1959	1724	1656	4713	1450	4185	269	491	3101	281	1675	294	4408	5765	2853	2576
Row 39	4832	2434	1689	2063	5946	138	3972	4518	3878	4750	2363	4615	304	3400	2666	2263	5123	4321	975	572	2505	1244	1063	5606	1525	2738	5899	5932	2502	2752	2507	1333	5185	4195	3395	5130	4332	1367	3648	2210	116	10	824	419	3409	3490	2681	2532	1811
Row 40	3656	3104	4316	4900	4166	3921	424	903	3820	355	3405	571	2862	4737	5756	1056	2132	4886	5388	3498	2533	1598	3613	2543	2422	4031	5952	5912	712	2483	1722	4367	5587	37	3266	3753	3957	3690	4656	1777	4044	2060	2347	905	797	2102	1961	2928	988
Row 41	1349	425	3520	2947	4038	63	5368	2069	14	5279	2780	2497	1001	1146	2083	1037	4412	5836	4994	2101	4491	770	145	551	3117	1050	1347	5219	3011	4274	206	4360	4699	3726	1306	2736	3788	674	4804	3801	5953	1584	298	953	2730	2380	1990	1141	2216
Row 42	984	3242	706	1754	3386	1256	4870	4435	2603	4089	1446	876	4295	5805	5575	2020	1110	2311	5808	1784	1115	3609	1736	2698	3906	2688	5427	286	4678	568	2501	5661	3809	3206	1414	1195	4462	284	5630	1064	4372	1075	1940	2666	879	1515	4686	1989	3825
Row 43	4493	3772	4939	2101	5507	1636	7	2195	1062	292	872	1630	2792	532	5438	5998	1946	632	4460	2229	261	5524	600	1335	1463	3266	2214	2977	1951	4202	802	444	1973	5740	2545	1479	1375	2551	3674	2437	2842	4545	4066	5634	5077	3504	5632	1023	4135
Row 44	4091	3251	4396	3614	3851	5731	5077	1117	1944	2054	3067	145	2856	3511	2118	2595	55	3597	3970	2605	1270	406	5447	5815	4472	5080	4892	1975	4712	5914	110	2802	3164	4506	416	1015	4236	5493	2131	179	1547	5198	324	4402	2708	2442	997	2763	38
Row 45	4966	5368	1308	5371	4814	1122	3843	3894	13	5818	2605	5927	5927	5407	3091	4432	5823	4105	2668	5316	236	2847	863	5433	3170	5264	2141	5612	260	4903	5649	5225	4270	956	4596	3084	2078	2439	978	2091	2256	3582	2017	2183	2989	5107	615	2812	3211
Row 46	3282	2127	3447	128	2989	2879	3298	2253	5019	2909	2513	3922	2558	1737	2192	3513	333	5276	5591	2772	253	1681	5027	3835	3697	1210	824	2804	1825	3635	15	5106	5761	3461	5234	2750	339	2532	5002	5358	5441	1515	3280	1998	3252	5472	5511	3584	4747
Row 47	5102	356	4999	782	5382	2833	4479	592	3656	1282	2416	1291	1296	1522	1052	4756	756	3801	5095	3288	2803	4453	2728	4317	1732	4726	1568	1203	4237	5152	5949	3338	5507	4948	4119	4889	1781	2598	5481	5437	3879	1896	727	5175	3418	1778	3930	4174	5578
Row 48	3025	1461	2381	1477	4189	698	3209	2915	2265	4411	1151	1417	4360	4488	923	3307	2607	5812	5088	5204	5292	4524	3083	1187	5250	2257	4605	1027	186	2778	605	3211	4239	2985	4687	2427	3682	1895	5341	5947	306	492	1363	4665	4979	2286	1972	1586	2097
Row 49	1060	790	1388	5583	3872	2575	4832	128	1179	5859	314	3957	463	3524	2195	3448	2210	4622	1130	4105	3963	1076	4410	4454	2438	3075	3433	4724	5047	5019	820	106	5808	2207	5689	3679	4781	4520	3806	5960	4378	4119	3916	4841	1642	111	2288	3852	4733

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.