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	5230	5477	5993	2907	4953	3254	5333	5066	5350	1584	1090	2304	1705	2800	3817	2029	5944	5320	1020	2847	829	5762	5965	1368	4759	1295	4662	1173	5756	4864	1311	4986	4340	1303	1893	3293	4556	1225	2359	3906	2808	3449	209	4513	248	4026	541	191	3346
Row 1	1561	3037	4174	1322	3002	5542	81	4296	4204	1253	4052	3068	2564	3038	1408	3866	4930	4700	2422	155	1058	327	2962	4507	536	1475	4754	4561	2016	4944	1906	3576	1981	80	4898	4982	5621	4978	3278	3825	231	1329	892	2794	4366	2299	660	3296	998
Row 2	3081	3450	2056	3407	412	562	3943	1886	5316	2504	3901	4259	4410	1477	240	4489	374	5221	4110	5352	2498	1934	5583	3827	2825	2377	2193	5123	3036	5488	121	116	2938	2177	3523	3349	2738	1465	5234	2054	3968	3135	312	2378	4612	551	866	4986	5772
Row 3	4976	4337	2269	910	3920	96	3735	296	2288	2858	3331	1775	2978	3446	4713	5154	969	2061	1892	2433	1295	3945	401	4430	4257	2778	3041	4808	3644	2026	4579	2620	363	848	3529	4282	943	1263	4577	3230	4120	1908	5005	1098	5354	3717	252	322	5778
Row 4	2144	2754	1072	89	3155	5501	4346	5933	2542	3153	3577	4567	1732	196	4929	2579	3725	3210	3522	4988	1787	751	3108	3694	5756	4205	3047	3473	4457	3368	3250	600	122	4321	689	3277	3822	5034	3210	363	2186	786	4930	3917	982	3858	496	4706	1068
Row 5	4017	3693	2855	4768	801	549	4523	5005	3595	1995	3462	963	5245	4061	1085	3565	4750	4362	1387	3783	1571	1749	5969	2356	679	3886	3337	4537	4381	2043	5604	2398	5736	2459	1165	536	3007	5688	5541	602	1683	3002	1565	927	1063	2650	4492	5812	1011
Row 6	5878	3595	2581	1627	3563	4937	2305	1448	2273	841	5829	4316	445	2226	4051	2903	3391	4587	5910	3079	4127	511	4761	1128	2076	5688	2190	4725	4179	2002	5735	4057	5596	2316	5683	3158	1252	1988	4606	3525	2828	4434	1840	3273	660	5891	176	4051	4477
Row 7	85	1129	2603	596	5890	3731	2672	5577	5921	1396	3756	1922	1131	1812	1518	3446	1495	4676	4698	3482	3281	2222	310	1715	4062	3582	2375	3952	3758	425	2429	3843	1554	5032	4439	1443	2762	1110	1020	2683	2506	4775	4605	3636	587	122	1082	2081	4798
Row 8	5779	5562	2078	2001	5871	3793	62	3453	167	4014	1211	591	442	5053	2144	5474	3491	3587	2236	4601	4606	4918	1106	3381	3522	4742	3967	3644	5823	47	2441	5602	5609	4519	1602	5479	2311	1663	2932	2477	5677	4143	3068	118	3195	5211	5591	686	2798
Row 9	1826	5287	1404	744	392	4784	4266	5134	2751	1909	4957	2797	4350	4558	2405	2868	160	1884	5179	1822	4816	1655	1498	2958	4722	1616	153	3933	1207	839	731	3033	125	2134	3776	517	917	2041	5650	3667	3950	4606	464	2300	3163	2868	5168	3322	4752
Row 10	4346	5144	3567	1	642	525	4722	2258	677	2655	3464	1516	3385	497	1640	5518	4272	2156	435	313	1805	4102	4262	410	4565	561	3573	1433	5728	895	185	4074	39	3752	4074	681	4276	2796	2938	4953	5450	402	468	2835	898	2107	2353	5169	4263
Row 11	2788	5481	67	889	3743	477	5454	4304	4049	886	4032	4944	1071	2105	4982	4822	178	5663	3097	2973	2600	2050	2423	3001	2518	5258	3899	4625	1610	3067	2887	4398	2548	2953	5286	291	3430	4740	4595	1479	5626	2626	422	696	4730	5404	5517	4908	5066
Row 12	2614	1881	1666	4663	4304	4667	1181	3561	2565	5805	5171	5632	2691	3568	2180	5644	2854	2470	3073	1593	1064	4551	1218	3690	4972	1913	2420	4376	1429	1327	3442	4043	3208	5107	2706	1511	3773	3886	5071	337	3690	4242	5968	381	1809	2147	24	4662	4617
Row 13	3097	255	5681	1647	1472	3370	619	3384	5789	4995	4813	1116	2436	2856	4323	1542	5561	5834	5314	3446	4905	5651	1136	3146	5618	1517	4955	1765	1541	3617	381	4637	3871	61	284	5342	3431	902	2726	3219	5896	1539	4335	2331	4394	2658	3873	3954	2491
Row 14	3186	1400	1395	2836	2536	4541	2454	4052	3495	4218	5593	1112	4599	4229	4982	4660	4513	4323	2090	5414	1049	5309	5310	2587	3643	1641	980	301	5513	4934	2791	2699	333	4186	5535	2869	2727	1988	921	222	206	513	1333	4805	4742	314	3464	3254	4637
Row 15	5553	2668	5685	4862	1978	2271	2505	3618	3250	2805	3131	2184	5595	5829	2516	3781	5363	5384	507	1351	305	729	1557	817	2061	361	5559	2374	3824	2812	1011	3377	5480	695	2238	1457	2965	4742	5075	215	1546	2205	2398	1141	2034	4914	4922	1397	4298
Row 16	5429	2747	4602	157	4303	5419	2217	4664	4977	4591	2487	1789	5601	5864	1269	295	2102	2725	3260	844	1800	3475	2390	4004	5872	3530	37	4786	2452	1433	3083	1880	4180	1685	2036	2483	1103	4252	1146	80	2843	3633	1868	2443	3497	3136	2738	5598	5861
Row 17	5997	441	1660	3471	2830	5664	3343	360	5701	2128	2811	1133	5210	4690	5313	894	726	1796	1997	4978	2941	2076	1820	574	3943	4262	4070	1079	999	3667	940	996	4108	2599	4466	937	2262	1808	1297	1962	3936	4107	3095	3145	2797	2408	4039	3522	4203
Row 18	36	2500	1144	2111	4319	1717	54	2581	5787	1133	3580	3454	2072	4575	1561	4670	3041	2498	932	4848	3794	2893	2783	1901	5988	5928	4698	2395	3967	2220	598	4003	4719	1741	113	3037	3458	167	5618	3244	1299	3197	697	3370	1771	2258	2040	4811	4755
Row 19	2971	3659	2549	5864	442	4450	5852	370	3147	2247	4337	5366	2844	2339	4085	4584	2451	1121	2041	2618	739	5285	3916	3935	5982	1286	5706	2239	3325	4517	994	296	2175	3543	160	2617	1992	11	2986	5139	2257	1322	4505	5101	3661	2589	3684	112	3710
Row 20	5725	2729	4448	5010	645	2382	4991	1930	2088	1229	5255	604	2222	5551	2778	5764	5710	5395	1756	5721	2380	894	1977	3702	5398	1078	1362	1986	4762	1473	5696	4486	4202	4143	3496	4846	525	2486	775	2612	3714	30	3215	5936	5580	5993	5700	5289	5387
Row 21	1455	5009	1767	2349	986	5468	1747	2064	830	3732	825	2303	3427	5311	504	1570	2806	5349	2094	5291	124	4705	3005	153	1920	2940	5733	1913	2640	5022	1299	4095	4031	3065	443	5016	2533	2189	1080	3362	5921	1904	5664	3348	1214	167	4917	4019	5516
Row 22	1011	3310	5639	5716	314	5792	1635	3254	5524	3547	5893	4545	4846	3988	2575	1911	4430	1591	4443	619	2671	1805	540	4574	1468	3887	5787	1635	2804	3806	1150	3814	1115	789	3529	1429	581	5164	4683	105	2711	4575	4649	1556	2563	1224	3466	992	2815
Row 23	1908	1611	5485	3713	2150	4059	5180	37	3846	815	2841	1651	1965	654	2766	2754	4183	4195	3334	3346	2877	3438	57	1452	2087	1612	4014	3311	5077	5006	126	985	616	5610	4698	2766	3669	3877	2802	1514	4692	5642	3164	656	296	5930	3410	4479	4124
Row 24	743	1824	1000	4181	1881	2452	268	3492	465	3578	2569	5470	3703	3554	85	3313	2251	2851	981	128	5652	2494	4819	5294	5658	5475	5590	5587	2885	4068	3711	3628	5892	4711	1808	1772	1162	2075	5263	1626	5653	1832	1096	3356	5385	1180	668	1636	4030
Row 25	1649	1763	3682	4143	582	2976	3800	57	2565	3387	2941	633	1097	568	524	5808	2376	2295	970	4451	1558	2596	4103	3390	3691	1458	2774	4871	2126	4410	2901	3774	173	583	1916	754	3558	5716	811	123	3102	3752	755	4199	4319	1279	4007	695	3574
Row 26	4976	5145	5132	1571	3247	2521	5261	4705	5295	4131	830	3704	1031	4604	3876	1613	519	4630	5171	234	5440	5293	3336	3191	48	1534	1510	1326	5540	2204	4900	4515	1349	4031	86	4596	551	5346	3300	5846	3477	4130	3549	4507	2733	1425	120	3252	54
Row 27	5290	3486	5494	4583	821	2685	4631	2355	4194	5957	1895	398	4856	410	1747	2886	495	342	3437	5840	3642	3282	3317	1772	831	1824	4504	2256	1943	1756	2309	1233	5241	1803	5816	62	4487	4446	2416	2680	4402	4310	3078	3257	4719	4824	143	5214	5165
Row 28	3580	5054	2807	862	2370	4578	1693	4193	3082	3948	136	4837	256	1368	4078	2059	1183	4139	545	5628	555	3225	4030	4864	302	1287	3583	5125	1429	2797	4290	5009	1850	1096	5870	4220	5674	1563	2412	2755	5510	2547	1592	5766	3914	5669	1824	5097	3807
Row 29	2368	4725	4361	5592	2754	3225	5893	4040	808	5018	5469	3604	3308	4477	5454	4404	4347	3673	4077	5909	85	832	5418	2631	2423	5183	545	2091	1007	5641	5898	3374	4365	4259	2966	1119	1484	2858	5158	2291	1876	4626	5895	5183	3102	5348	3586	1449	3021
Row 30	1663	1357	3105	2494	775	5736	4916	5958	280	1007	964	5921	904	4337	4286	5163	1302	5404	646	4160	4561	2936	36	3186	2831	5219	288	2179	2804	1736	5199	4467	3092	2304	960	3867	2039	5876	3824	2318	883	4787	2239	1787	3124	524	949	4426	5927
Row 31	1594	2586	4488	4530	2621	1673	1360	1839	1961	3539	4643	3696	2738	3109	788	5041	4069	4654	1079	3945	2477	3397	4827	1264	5635	613	4387	159	1561	2812	85	3154	5397	4573	1684	2018	245	3044	3857	2206	582	2499	5901	3319	5608	688	2359	3676	5342
Row 32	3438	1620	1818	835	447	3081	469	1059	1468	627	2619	4280	712	5773	3677	5284	1457	5694	5529	4500	3550	1734	5081	49	1635	2400	5656	2323	4759	3332	1664	2196	4952	3482	3030	5398	563	3499	456	2030	4126	3075	310	4837	2848	3986	4121	4304	3679
Row 33	3650	2803	1229	5383	1884	1277	1018	4283	932	3340	3041	4263	5004	5237	3214	2485	2267	2611	3048	5766	3067	5078	3891	141	5387	2727	2988	3372	848	1292	1051	4497	4094	2279	3880	5978	3555	4897	4260	4487	2237	1301	2750	1241	538	5964	3726	2805	2574
Row 34	773	2570	5641	5851	460	5782	5237	3187	2770	2609	4034	4061	3659	2531	2154	5937	410	2131	3492	5307	391	1979	1544	1692	4728	2784	2230	4691	509	5034	1265	1282	1603	906	1132	2062	687	368	5249	3456	2976	3282	1516	635	5813	3670	572	222	5801
Row 35	4063	5529	192	42	1073	1883	4769	3856	4112	3460	4365	3146	4724	5646	4748	5630	778	810	316	1146	58	3771	4122	3340	5287	4756	3152	2956	5327	3374	2756	3390	2903	2947	3431	3975	4830	2200	1831	2942	5659	196	87	4383	5842	4835	4012	619	5644
Row 36	4327	1765	5702	2098	5886	3042	1384	4641	194	4340	3967	3568	1095	1357	471	4042	4787	4446	2872	986	276	5813	645	472	5899	5027	313	4734	3039	932	4377	1366	2696	4079	3464	2581	1121	4847	1222	1314	3186	5189	4881	4281	545	5351	2323	5332	3797
Row 37	5194	318	4073	5006	962	4544	4905	5989	4857	3638	3028	5789	2015	4393	2485	94	1856	5066	1214	703	287	2527	3889	5475	1408	2169	20	759	4492	5351	4555	3685	5668	2627	2691	629	1171	1596	618	27	5234	3645	5816	1248	2037	2300	1342	3893	1365
Row 38	2555	4595	1652	5082	2484	1126	490	4653	1146	1249	3144	496	5804	829	163	2430	3519	792	3601	5115	1410	3628	4348	5054	3443	5596	1091	5742	937	4983	1107	3492	3578	2758	2573	62	3884	3063	4714	5029	4311	1857	5524	4114	2686	5687	544	205	479
Row 39	4144	5319	1888	1771	3666	941	5214	3261	2032	4956	4198	1014	62	1689	4592	2820	4262	4653	703	1324	3366	5731	5635	5223	5255	3748	1908	4941	4292	2112	5420	2436	1431	1307	4206	5096	2248	3420	2357	4279	2375	555	5293	2437	2243	3884	5256	505	2537
Row 40	5958	1829	5903	5688	1463	5125	4943	5211	1033	3884	3502	3145	3303	5937	4575	4609	4143	3671	857	1562	27	5135	3937	581	4427	373	2824	2310	5628	3329	4847	5586	5157	4749	5274	619	3873	4216	5830	4906	2099	3331	2050	5401	3268	624	4010	1410	4294
Row 41	4866	2972	4321	4000	909	4902	2427	1282	1726	4737	909	5054	3583	495	4211	2331	5768	4829	204	3983	4659	5109	81	1989	1158	5482	5257	1782	3492	667	76	2357	3639	4397	357	4547	3298	2783	5828	5024	1520	737	4078	5102	1231	2288	1432	998	1117
Row 42	1635	4981	5775	744	5062	1764	1901	4543	1020	3683	2035	1686	3759	4392	5324	2155	4749	3871	5453	1532	3699	4476	3051	4435	2553	2152	5666	4841	3583	663	5957	5218	5644	5731	5961	4705	1495	1862	3248	2514	5545	5282	4200	3303	3673	3523	5457	2421	1394
Row 43	4909	3952	5092	3385	1002	3526	5938	3153	3192	4778	736	3855	4735	5954	3498	4466	5914	2202	5960	1776	5449	2473	1320	4730	672	4622	2402	4195	4078	4823	5589	2987	2774	4680	372	3776	2206	309	929	5397	5087	1664	3251	3821	1618	748	2286	1531	2950
Row 44	2245	3307	2398	4718	4626	1128	5390	3247	3530	3585	1325	2352	3173	4312	5126	1852	4683	2901	4057	4992	3830	3454	4079	5494	705	1899	1111	1452	4185	2642	4402	430	5948	799	5147	4573	1926	4537	1820	5456	2121	3144	1807	5293	1456	933	1144	138	3834
Row 45	5201	5130	1663	2655	3208	1156	3359	5107	2266	4811	3291	4907	3212	3720	4854	4011	2867	3427	5937	1403	5246	5392	3524	2390	1199	2816	3845	2131	3960	3983	5964	3160	3112	1626	5815	320	2782	3173	5426	5048	1983	2717	3954	5194	437	2808	3205	3303	235
Row 46	3141	4706	5480	2532	2229	1869	3730	5045	5714	5861	3004	3696	5824	164	808	1450	5978	1127	4231	3150	552	3278	5133	3268	1232	4327	3704	4040	1531	1007	4274	4671	5713	3754	1203	1942	5623	4933	986	5336	4793	3989	3031	4617	4153	3838	66	4130	4964
Row 47	4297	1280	5516	1575	412	2784	2807	4738	488	847	269	1495	5121	4940	1207	2874	142	3148	2496	5075	4133	1831	3868	2122	4862	2485	274	2699	2551	4404	1663	847	5683	1179	2422	94	3962	5229	4832	4450	75	5100	5944	5195	4039	1151	2069	4181	4298
Row 48	4564	3256	2431	395	1123	4553	5256	3607	4827	1954	157	3230	3617	1004	2913	4795	3426	3006	2757	2654	1838	1207	2728	938	1150	1923	4977	2301	3991	3158	599	2555	413	3030	2949	1536	1582	2204	5143	409	4158	5300	3638	1774	303	550	569	3729	3556
Row 49	3326	382	5394	4532	3110	331	5682	5032	5307	1982	3023	2464	2581	5577	2877	5610	2525	4412	1191	4728	3554	1600	2885	2853	5237	4659	3156	5787	5228	884	3343	2553	1265	2736	1085	4374	3066	766	3406	2373	2748	428	4837	5328	4	1713	4937	2528	124

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.