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	5319	3154	319	570	4910	3498	5512	206	3902	52	1887	2775	5463	3000	5892	3666	2278	905	808	5037	5615	4752	3999	2765	1686	2321	3439	5753	1763	3916	5843	1082	1069	162	1652	5978	3659	1163	184	1560	1214	2070	4335	677	5069	4226	4342	1346	5131
Row 1	5149	383	4745	3900	4381	1509	5586	701	4948	5338	2464	2863	5180	3545	3932	5342	5196	3910	3000	359	4093	4560	1572	163	2895	2249	5231	1121	590	577	251	5739	959	4995	3639	5339	504	3225	40	5451	2562	2503	2314	1742	48	245	1083	5244	4155
Row 2	4083	5602	2248	2643	1173	2410	5537	3422	1640	658	4011	2217	908	3750	3175	5902	1389	2514	406	4613	2553	5857	1175	5056	2170	2917	5104	2415	3999	4347	569	2082	3948	2816	4725	5121	5226	4262	2542	866	4919	552	3082	5826	4302	256	5728	5690	2770
Row 3	133	4303	5323	5990	5477	4378	2159	2393	3481	4573	392	1827	5142	2474	5775	1958	1198	4895	1183	5459	1436	2048	4377	1988	5129	4202	289	5385	3930	5979	2154	4063	4282	1477	4052	3758	5854	211	151	3335	4783	543	5162	3925	3016	4936	5882	4213	3831
Row 4	1065	3671	5266	3113	2047	1253	2241	249	1541	1626	4179	1520	3780	2241	5801	5256	293	3559	5110	503	3710	2445	5286	4252	1607	3211	1267	543	3092	5479	4373	4157	3149	3638	1269	5196	4891	3510	5445	432	5136	3624	1951	2915	5865	1752	2171	157	5310
Row 5	1281	660	3019	3725	5945	1270	5332	3155	2536	5874	247	2015	4247	4404	5164	1885	5672	4359	775	3182	3804	1206	2317	1427	3156	5231	1291	4908	1402	1448	4218	2682	2107	1236	407	2052	2506	5738	5207	5042	5612	5454	1057	3859	3858	220	5743	3529	4579
Row 6	517	711	2382	1722	3027	3809	4878	2258	5100	3785	3659	548	2002	341	2655	3238	747	4706	5744	485	3913	4786	97	3367	5842	3955	1224	61	3697	4753	4639	4213	5463	1021	5935	2489	4829	4813	4746	3929	2598	2405	4476	4600	2745	1130	1838	3492	5836
Row 7	1581	3977	3748	366	4073	1115	208	2027	2338	268	5724	1090	4907	3937	552	5927	3871	3041	4755	2684	1787	2683	5281	4191	1159	3880	936	2288	5717	4428	2123	1298	2404	5870	1664	476	984	1871	2502	3322	2138	2226	4411	1045	162	4963	971	4032	2004
Row 8	5726	716	3790	2409	5996	1980	3567	3876	2916	5854	3593	1343	1976	4890	3746	1846	554	4221	2830	2424	723	151	4562	2948	4562	5606	3110	3524	576	1142	5527	301	1857	3317	2709	1853	5296	275	5729	2212	129	3321	3554	2104	2211	1300	3949	2764	5521
Row 9	778	5188	243	929	3750	3191	5490	3355	300	3014	3931	1442	2540	4232	3298	5856	941	5150	5152	1216	4878	1364	1344	2199	4917	3447	4409	217	1396	1173	5737	2174	361	5980	3102	4110	3170	2591	1464	3470	5604	5395	4912	2144	3626	2209	2000	4567	1359
Row 10	1152	5782	237	2516	1125	2435	1432	4572	844	1649	5968	2017	1385	2141	2377	1364	5243	486	4534	1834	1950	2004	1438	1345	915	3582	4970	3123	5582	3536	4482	733	3318	4718	3248	4442	1152	4680	3014	1995	329	2981	4012	1713	5122	388	3076	4365	874
Row 11	1609	198	2824	3613	1635	4168	4527	5216	3138	1650	4797	673	131	5530	3990	4848	2778	2432	5999	1458	5446	1994	1786	2427	6	3499	1548	393	574	5912	1267	2183	110	4090	5795	1744	2258	4321	960	5395	5971	5757	68	101	5287	4058	4948	2065	490
Row 12	4947	3523	5935	941	5308	2361	946	2806	3909	1339	3380	3821	2606	5562	3930	696	5357	5674	2953	3678	634	2348	3648	391	2415	3748	5677	472	2696	1742	961	1642	5264	896	2583	4572	3256	3529	1378	1165	4868	4757	4985	1473	4319	2914	2169	3676	2588
Row 13	5122	1353	3221	1469	5000	3612	3884	2747	3289	4356	5443	5030	5317	1085	4293	212	3667	2865	3468	1196	4242	4632	63	2999	3616	1536	1317	530	3705	4993	3118	2826	345	339	4295	5344	3950	2178	2091	1238	534	1533	267	5850	2617	4560	62	284	1424
Row 14	3529	1479	5665	2160	1542	2663	5776	3077	3980	306	781	2972	3423	3607	3317	3761	1901	2660	1710	4079	4751	2948	4612	284	3214	4461	2900	1773	4522	3184	3197	2051	4662	2861	4211	204	5524	3986	3280	3504	4292	4061	476	1714	1668	3792	5475	3568	452
Row 15	1185	1646	5203	4132	258	5486	1346	4718	2385	3119	3240	5569	315	5290	4230	3176	3500	4433	2699	1486	1713	203	5778	5774	679	1492	1441	4470	966	5009	4922	2151	655	4124	282	912	3609	1627	5630	5994	4745	2869	5562	5060	2159	3792	2235	5658	2225
Row 16	4933	1144	3937	5136	922	3711	5814	2413	5152	4284	3378	4161	3205	5528	4815	1328	5810	5727	4937	1437	5356	4930	182	2224	4492	5241	4382	2283	1475	4040	4507	408	5184	2444	5543	105	155	5357	2517	5306	3640	5895	3466	844	5423	2281	2172	5233	2007
Row 17	1109	669	1363	38	851	3586	4529	91	1968	812	1565	8	5318	1973	5192	1761	1515	5297	1916	872	1814	1221	4511	1709	4687	5355	1132	968	1526	364	2974	2634	1033	4337	2672	1883	1922	1201	1974	3890	2012	3539	3898	1329	5511	3090	3090	1026	2386
Row 18	5005	1897	4200	226	407	5908	4913	5761	1039	5880	1287	1403	2854	3921	2435	1190	592	4318	3112	1792	291	1002	3804	3829	4900	5133	3339	1989	2222	4365	4375	1227	261	2574	1453	667	2481	365	428	3520	245	1714	4922	3098	5634	1357	4287	226	5674
Row 19	1399	2018	5965	2400	5821	3793	1299	4953	1132	3288	1175	5497	1662	2402	5757	4235	3854	424	716	4219	851	4235	4463	2565	3157	1560	2199	4513	5847	2424	4187	1245	4442	4151	3645	4263	1944	4943	3216	3076	2230	4391	2572	3892	792	2328	2126	4645	2751
Row 20	2842	2863	3602	1077	1326	166	4233	2885	2364	2746	2732	4788	932	3976	3230	5082	1620	1492	1026	563	4707	4101	2793	3098	673	684	3889	3000	2810	2534	5751	5651	5397	3353	728	722	3518	4960	3606	5882	1705	338	4669	2637	4313	1898	1719	5933	3390
Row 21	2744	496	2097	845	3288	5194	1517	3972	3082	4517	781	5616	4268	432	5012	1620	1159	5733	5137	119	3339	5019	1824	3676	3687	4460	1989	5585	179	1921	2975	2922	2417	5071	3767	5704	4264	5283	3676	1346	3799	4456	961	2066	4888	5972	3685	47	5705
Row 22	2822	165	3044	1840	1988	720	5527	448	2708	5112	626	4629	2086	3548	1045	1156	1314	749	5420	596	4424	766	4395	2880	1726	461	1767	1698	4146	1814	1403	968	1978	4446	2807	3966	5166	2334	4414	1873	1445	5040	502	3531	2587	1547	4687	3901	2295
Row 23	4106	4497	719	4872	2891	3598	598	3352	5365	2295	1497	1178	3698	2465	3156	2144	5272	1122	1309	1605	5536	3182	3050	4575	3683	580	1162	5230	5266	5062	1524	3372	3558	2243	2243	448	5841	2840	3800	5205	5135	5297	383	2833	1761	3539	4976	1032	4661
Row 24	284	2636	4196	3466	5686	2771	1149	265	3932	378	5531	2993	1902	2902	550	4144	5145	998	3984	1985	4797	3189	1120	4094	3572	3952	5854	1110	2927	886	5771	3211	3522	3966	677	3207	737	1825	3471	4668	2203	3002	1660	4104	5904	2210	2248	5048	3208
Row 25	232	1033	2005	3421	2152	98	992	104	5952	2102	3030	837	1872	241	4358	5838	917	1564	574	2741	5035	5242	4944	2036	901	3047	1940	3111	5295	988	318	5526	2020	2322	2946	4172	2420	3938	4275	2371	39	1305	3207	1911	1545	1565	1749	2462	3128
Row 26	2322	5203	2163	1563	4146	4199	2464	1193	138	5575	487	1125	5893	13	3145	2214	2959	1316	4634	896	5591	1004	935	896	4211	2845	2440	5775	4593	4902	2903	915	4104	5065	2478	2249	3263	4942	3441	3401	4516	3928	4526	4408	3941	1670	622	899	2986
Row 27	5256	1795	2576	259	2730	3471	4469	5574	5911	4244	4167	4812	1146	5082	2916	210	1560	5164	3473	501	2605	874	5017	533	5399	3425	4473	1068	4047	5371	4053	3302	1166	629	3561	3895	4100	2030	3469	4011	273	1636	2823	1418	717	5738	1628	2277	4902
Row 28	5101	2778	1506	5974	1795	2039	5372	5220	511	440	3266	5882	4493	568	1047	5122	4129	4942	3221	158	2410	1232	430	4045	4054	1848	4762	3792	3476	1038	2693	2576	3816	4199	2550	5610	237	1921	4829	747	2361	2095	629	853	2663	1675	5974	791	616
Row 29	3195	948	3026	4426	1378	1071	2480	3225	5832	271	701	870	2963	3276	4686	1161	5825	4295	1398	1746	3124	2145	4107	5218	2773	4959	1880	4448	4932	2670	5064	2126	3618	2089	552	4995	3159	3031	2220	2991	3301	2920	3861	264	195	2546	1425	20	840
Row 30	2822	1766	3963	4966	5872	3181	1739	4831	5061	186	3762	1731	5249	5888	5348	1337	439	4343	4496	3470	562	1486	770	3481	5347	1033	3676	1892	2458	3696	2731	5279	5462	694	4245	5333	3875	5983	4163	2935	168	1925	4665	5417	1813	4013	754	2252	2355
Row 31	5249	5721	2916	735	491	397	81	1524	4072	1972	3981	1768	4703	3259	1229	5397	1504	562	3271	1486	4725	206	1654	649	4870	1070	2462	2883	1823	4713	5238	1072	4433	2154	1806	4924	2550	1887	447	622	3859	4427	2389	2561	1686	3618	1958	3189	4179
Row 32	5228	4674	2903	5433	327	3552	4303	1397	13	1186	3219	4726	423	4290	3159	2576	96	2082	5126	1982	2528	5747	5840	954	2136	2401	2639	5753	4358	5828	3932	3585	4501	834	3018	4828	4386	1320	224	4398	2505	3442	3123	2928	1732	282	5503	1827	2363
Row 33	4628	3808	4891	4375	3648	5844	511	48	2483	264	4406	2310	4195	1990	811	5029	5008	5638	3414	328	5862	1812	2832	3304	4934	5760	5035	5216	5262	861	1578	3890	4669	468	2265	2316	312	2775	2364	2795	3038	769	5105	1233	2759	5916	261	1766	5554
Row 34	3674	2093	5415	5485	4925	2718	4419	4684	1752	3634	3946	2613	5212	1835	1281	5680	4099	3597	5991	874	5960	2786	3911	728	1890	5143	3487	1805	5404	5252	1358	3077	1345	773	2562	269	3490	980	4953	5242	4614	2898	1854	3825	4732	3135	3504	2831	731
Row 35	3495	3704	691	280	1615	1419	2170	758	4905	3975	161	4156	5333	3237	5500	105	5799	5769	3595	778	4721	2836	5392	1618	4690	3217	350	1825	721	3181	2555	4215	884	3246	4495	2499	4664	665	3256	3568	4640	3416	1724	3972	653	1224	4076	451	992
Row 36	1671	1229	5713	4506	620	1331	3196	3837	1680	5020	4557	4861	1575	2772	5745	4821	1266	2243	3484	1931	5498	1052	570	2914	2776	4541	3566	3999	2617	4017	4991	4287	5245	4704	2793	5865	34	5989	3701	1714	5009	2257	574	584	5029	318	5404	295	2561
Row 37	2888	2225	2059	3939	2794	4973	715	1335	2539	4714	3952	555	3705	2239	5800	2408	5032	5665	2442	5020	3365	4155	4029	5622	4729	4612	4650	5047	4015	4944	1607	902	1169	3666	4841	3963	2638	5556	5297	5176	4269	3248	5731	1973	5487	5530	4380	4518	5194
Row 38	821	3538	2559	4976	1566	2181	3704	178	831	2750	4192	5775	4357	5094	943	2022	3935	4905	4659	3490	4202	3835	1758	1450	3565	3731	936	3094	2110	5454	2288	2931	2991	4846	1907	4557	1027	5610	4734	1857	2360	2925	1631	716	2019	2574	2738	5954	1478
Row 39	1396	3444	5680	5231	5201	1129	2795	2931	2065	5889	5041	1518	2176	1972	4508	1022	3878	3064	2048	3488	1797	3904	5847	4722	5535	562	741	2108	3299	695	3586	4695	4138	3265	3925	3338	4394	720	269	458	608	5310	1975	2784	1282	483	3806	5159	3547
Row 40	5853	2646	5344	3757	2493	4066	3292	3054	4806	5399	353	5500	2985	5048	3637	250	2973	975	4643	3692	1244	5101	4300	553	1076	1083	1835	1558	4889	993	5104	4741	3639	4448	2498	131	2513	5789	3185	1318	5188	3538	818	2172	2585	4455	2421	5557	5429
Row 41	1064	3248	673	164	1548	1226	1239	2631	3060	2797	1519	4053	1901	259	1692	348	2757	1823	2860	2545	5007	4178	1733	2544	4995	3905	5128	3450	326	4684	2878	1389	1932	3551	1553	3479	4776	2791	109	1835	5588	1628	5887	1488	1887	1579	1835	4643	3401
Row 42	4695	1188	2407	2872	2920	4951	1867	824	4079	5317	1150	2763	2195	2538	4694	5745	4090	2173	4520	881	2282	355	469	3909	241	1956	5796	1820	3791	4438	5220	2486	5626	1626	5358	2545	577	1225	3369	4655	541	4518	1417	2735	1056	111	2479	5146	2284
Row 43	999	27	4565	1353	495	2474	1594	2451	2269	3413	241	707	2632	2727	332	4258	2084	2876	4834	3308	245	3488	3849	4763	4905	583	5818	5015	3062	4964	1299	4060	4990	5863	5412	5484	2337	1005	1935	4605	4417	2175	5312	1048	4902	5643	5306	985	2519
Row 44	4139	4293	2763	1627	2141	1526	532	2723	1344	5547	5784	307	845	3843	5297	707	3255	4780	3044	4259	715	1649	2676	2889	960	3723	1791	602	3029	2775	3120	1167	1067	5883	2794	3208	1409	3325	5931	2752	2871	5714	3059	3715	3557	2355	4422	812	1135
Row 45	1465	5070	1849	3114	1745	4738	4073	5468	528	4675	2496	3303	1794	3663	4370	1677	456	1577	3086	3781	1507	5837	652	1221	2896	4366	4778	5250	2788	5589	385	4253	4659	2233	1366	404	971	5438	5871	1498	4112	2367	4801	5906	30	3170	1583	486	4746
Row 46	4668	4266	253	4505	4917	1474	1400	3283	251	650	70	5840	1034	4322	4498	3266	5687	4901	4237	5125	4772	5734	3237	1139	4534	3142	1168	1704	4725	1653	450	3392	5918	702	1897	4835	2175	3296	2117	2426	3945	2187	2266	4979	508	763	2245	195	5664
Row 47	481	5320	4436	215	2556	5574	4749	5698	741	452	4422	2394	901	1814	2312	1602	3711	1146	3777	1006	3262	203	4951	5448	2468	3929	5956	3231	173	151	2894	653	5470	1330	868	2026	903	5616	1723	1644	67	145	4037	967	1959	348	2569	5669	1494
Row 48	346	675	4755	549	5625	4203	3016	3554	4159	246	3727	4309	3140	4380	3778	4469	5247	5804	5372	4862	1526	1015	4928	1671	5052	5895	3629	5400	2464	3298	893	2810	3972	5648	3358	3597	3851	373	1150	2009	619	4877	317	3759	3256	4095	2228	2502	3898
Row 49	1599	1364	5424	2614	292	1094	1666	187	4723	1065	2650	2020	1957	5459	5992	1605	2817	3588	5455	3189	4738	1463	3808	3614	1780	1566	870	5874	3794	3372	3772	5392	4735	3196	2006	5027	4289	3671	5213	3012	4735	1862	5031	692	1321	5022	2296	4137	2610

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.