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	361	3669	5561	2931	2545	2760	3100	206	3068	132	4560	5686	2583	2965	3584	930	4468	2215	4658	5500	984	4171	594	4643	2064	1444	1607	1741	5572	1575	3453	47	4895	5535	553	3987	1250	2342	1651	5183	5449	647	5667	2521	5367	1948	5161	4065	4351
Row 1	1985	5326	3806	4636	5934	5674	5262	1445	5944	5307	5998	1456	1101	3117	898	4706	4563	1320	4708	2905	276	217	479	4294	162	1912	576	4030	90	3842	5947	3681	1556	1049	5553	993	5081	2675	3290	3737	4227	330	2576	3571	5021	4295	529	3241	3122
Row 2	5342	2180	4050	317	4192	3829	994	3692	2837	1998	154	852	3419	5965	208	3491	1835	2136	4739	2178	5638	5661	4667	1464	1073	5183	4180	451	1512	4704	1660	3722	469	4986	4625	5926	3	2761	1345	4497	5117	1118	1149	4240	2111	1535	742	5835	2201
Row 3	729	476	3473	5346	4143	4393	2081	4817	2961	1070	4750	218	5372	13	5527	1197	4051	2113	3853	4400	3563	4312	1445	5207	3865	5037	1143	1767	2401	793	801	1163	216	3851	2562	4404	1997	3234	4554	5813	5502	2943	2784	1676	1753	3462	5572	614	5112
Row 4	4748	4544	5181	3484	5926	4447	3890	5635	1892	3387	1137	2816	1652	3654	1578	2211	4579	2911	1312	2974	166	887	3860	4358	2547	1429	869	3364	2916	2405	3559	1603	5830	228	3738	3874	64	5805	1745	4716	2506	1063	1382	4496	3871	2325	3173	139	5087
Row 5	4491	466	4322	699	5495	1170	5840	5851	3796	4876	4338	1828	2243	4581	3751	3652	1077	1969	399	2126	566	2080	4085	1797	3327	5020	3458	2949	5040	5310	2908	5347	2991	3296	322	3271	1125	4344	2207	3387	3188	5503	2994	1999	608	2676	3624	640	5810
Row 6	2272	5869	709	3719	1190	1398	2876	5756	263	2795	1307	2706	4803	1606	5363	4045	2482	3913	3325	1576	660	1994	5347	4638	3419	3040	2836	5748	5808	225	3378	77	2083	3976	5694	4981	3198	4197	2122	1951	4495	224	1739	755	1949	3361	4135	5276	4323
Row 7	968	5876	4195	475	1730	4970	3055	2017	4935	225	3448	1567	3847	5635	3245	1108	1449	4378	2415	512	4739	743	3606	1279	1675	4323	5066	4773	2340	2385	2364	3923	5930	240	1631	2337	4135	4842	1302	5579	3151	4626	5494	1725	4020	1354	370	3437	3092
Row 8	5668	3151	4950	1130	4967	4152	1278	1008	3305	202	2645	1598	1644	4786	4291	1391	4256	644	1475	884	541	5596	253	4439	425	2996	112	2738	2617	196	2682	4495	2778	3255	1276	5453	4280	2606	3469	4182	1320	5791	5382	1111	1813	3657	882	917	684
Row 9	3846	3618	1719	2460	1573	4065	5166	3004	2186	5560	3811	3576	4673	5005	2244	1960	1817	1618	4927	3348	4507	3165	470	4834	2819	1848	142	5202	3042	1733	4451	1034	33	5587	78	965	5776	4472	2630	5879	5410	4057	2735	2118	4651	4210	4833	1500	4387
Row 10	2969	1884	3336	618	4198	2844	3885	1294	4374	4131	1498	3790	1748	4113	778	1730	5745	4377	3693	901	4814	503	2859	336	4520	3633	2127	3391	4016	795	4247	4423	5339	3615	2137	828	1851	1566	5831	4282	1168	1190	4648	1696	1920	3602	4580	1744	525
Row 11	325	3630	23	3656	1743	4217	614	3378	272	209	71	488	2453	3722	5489	4635	649	4919	3708	5122	2171	229	672	3664	5798	2414	3900	5382	566	1160	4696	3553	5782	1059	3639	1176	1418	97	4181	718	2406	5822	5420	2392	3018	3812	81	4967	958
Row 12	1002	548	3171	4889	3769	3418	2342	3445	5245	1076	2852	3197	5320	3278	3344	486	1381	4528	3583	1271	4554	5112	4559	3766	544	4875	1699	1795	786	5219	3866	4863	3008	767	2904	5773	5025	970	5944	1357	2024	3349	2784	730	5805	5505	5036	4977	4904
Row 13	1544	4981	6	2384	4439	1917	3424	4399	4692	5906	3515	5317	1443	3972	5492	1486	1004	3326	4713	422	2102	5918	4598	2714	4338	3242	5617	4503	1555	2381	2598	1287	4003	2634	1330	4678	1310	681	2364	817	1655	288	3279	1006	2463	4126	2819	2001	4326
Row 14	1031	3959	2111	1065	4650	726	4430	2289	3923	2370	599	3282	94	3046	859	3300	572	1397	1409	4487	5183	3191	5595	96	2376	225	5049	1870	4889	5279	4105	454	1695	3360	4088	1765	5505	698	2625	3021	4247	1062	1537	5979	380	4379	1749	3991	2278
Row 15	3272	1597	5614	2115	3193	2109	701	3984	509	4363	5246	5859	2830	5565	5629	5585	4363	4296	3028	2410	3409	821	395	3153	2456	957	4117	5462	3066	5990	2433	4431	2234	5427	4131	822	4402	4195	5702	276	2778	1947	690	3312	2518	5375	1813	2226	529
Row 16	1927	4202	5722	1374	366	3950	933	1110	2105	3250	5201	229	2159	56	2233	4306	4431	905	650	415	4859	1900	4696	4320	5480	5931	1625	4370	509	2589	2650	2635	98	5715	3461	3951	997	3669	3890	24	1726	340	4718	2196	5750	2868	3941	5063	4328
Row 17	1917	1925	1544	2670	5810	1585	3083	1307	1593	2091	676	1110	2156	1895	3910	2153	4800	1172	5754	3687	3585	4638	991	5449	2726	1089	261	4446	1418	7	1205	3906	4088	5653	4396	5987	5622	4121	3923	4961	803	5463	744	3450	4647	5520	1007	4780	2043
Row 18	5089	2902	1274	382	1514	4860	1907	1517	1480	2053	4519	4471	3136	2276	4119	504	20	2283	5632	722	5689	4598	5953	634	3215	1223	5771	4153	2219	3678	3697	61	1795	3377	4402	2416	2372	5829	4346	4584	4224	496	3793	1324	3931	1554	976	1219	5018
Row 19	4667	4314	1349	780	1091	1514	1459	5180	4402	2428	4442	1524	1519	3041	3045	1684	2356	5350	3019	1232	705	3235	3868	2288	1234	3039	1628	3626	2815	5754	1864	1552	3592	888	4800	1308	2710	4567	104	4981	2577	815	2218	5233	1766	1595	5007	1541	482
Row 20	1919	2016	1089	1205	1605	4509	717	3311	3130	3966	340	4592	1604	1635	3026	49	5840	2532	750	1369	2082	4287	2478	3454	1148	4146	1445	5086	2385	4018	1647	24	5492	272	5871	1102	4722	3136	2992	1240	5083	5306	621	2440	4476	4237	5714	2671	5449
Row 21	5367	1368	160	2913	3366	3374	133	3375	5311	3560	1355	4702	957	1559	942	4978	974	4777	3109	3136	1773	3395	2185	2423	2939	5955	5402	5859	5100	809	6	1059	2690	5098	3891	4131	5024	3877	2874	2894	1419	4555	2119	5442	4851	4	996	3067	2211
Row 22	1183	5358	1562	309	5226	2133	3903	516	1069	218	261	71	5890	1677	424	4305	639	3602	2478	4257	1780	4672	3633	5254	4923	4069	480	5274	5644	5637	3843	2619	3112	5828	5830	1814	4854	1885	1808	2477	860	3451	2050	2373	5304	2260	4481	4442	4684
Row 23	3073	5093	1696	3956	4065	1467	165	2913	87	3612	1551	456	1936	5950	1745	419	451	1616	2115	3799	4650	5034	1998	3298	2771	268	3106	5725	1213	2342	656	3953	4189	4492	1469	5125	916	1641	4090	813	3264	981	619	247	4406	3378	4929	2075	4786
Row 24	2497	3434	438	2694	5901	3633	3375	5413	3469	3041	2619	2111	5746	5955	868	2113	1617	4226	5231	1009	4724	2480	2411	255	3434	2803	3217	5834	1998	4640	30	1369	4420	5463	5245	5596	5141	5122	3680	4142	5041	3113	4650	4428	5275	4493	4955	2670	87
Row 25	3754	2201	5092	5153	3854	1093	4547	2514	481	581	5999	3267	4324	4589	3200	4885	5044	2938	4567	4022	5984	5681	4077	355	1258	5243	2282	4970	1743	617	3117	1846	4167	3727	3724	5582	5694	1108	3788	1666	1067	5700	4278	3708	5705	3466	1892	354	3012
Row 26	885	2523	3993	5163	4051	5336	5457	1232	1878	3534	740	3781	5930	1222	1192	3469	1523	5050	2639	5932	3505	2048	5367	1922	4849	2492	4503	5360	2410	1367	4745	2884	5798	4162	2652	4082	2172	3438	3644	5733	4331	1313	2603	989	3835	4486	1077	5977	4769
Row 27	742	928	2661	1649	4557	1268	2974	4079	2768	2531	2532	4646	5455	4951	2414	3373	543	1468	2934	5864	565	2940	2711	614	1355	2975	1066	4622	1303	5661	1104	3153	2977	1318	4467	2638	3700	32	3242	5471	3157	3699	5691	2400	1496	5622	3893	4338	306
Row 28	1670	1604	1393	3111	1567	4335	69	5500	2342	3003	4034	2318	3091	2114	3136	239	5196	3474	4156	2553	3866	788	1726	4778	3814	2144	310	2791	4123	3131	3185	5012	5857	4444	5195	5008	275	1775	654	5922	3118	268	5068	1431	4986	4890	3563	180	2409
Row 29	4951	4183	3036	1173	4032	4125	4635	2673	4661	3229	2295	3280	739	1988	4599	1868	5977	1128	5554	3557	2844	742	3269	5385	1271	5268	2267	2680	123	4281	880	4099	2652	5945	3781	4458	1897	426	560	5363	4351	4416	1864	166	1386	482	231	1587	4283
Row 30	41	1085	5311	4757	3933	3419	2202	2428	2594	3369	4557	4838	1983	1956	3606	5445	1175	4738	5803	2680	5404	607	302	2864	3255	1220	4319	7	5017	3413	1124	4149	5736	5378	1360	3749	4246	5279	2339	3117	4599	5580	1060	1218	2637	2741	4713	2545	4349
Row 31	2314	408	4254	4926	4889	1296	1677	1346	4287	1350	5036	5830	3590	2022	4059	3778	5714	4375	3385	3831	3269	5884	62	5166	2081	4983	3321	66	142	1588	2839	5531	2856	3984	5744	2537	1956	5185	2432	651	1055	4998	192	5841	4407	831	4218	1940	822
Row 32	5873	4700	3073	5370	990	516	5110	410	1386	1245	1785	3004	2618	2823	5320	4674	3799	1003	5814	112	5170	5993	4106	4999	1029	1281	4905	216	2620	2405	3745	3018	4145	1505	4561	1104	3549	1761	4610	3815	4510	1407	4833	675	3580	1157	3238	5095	2784
Row 33	5942	5520	5451	5309	5142	2447	1807	1240	2053	3262	3368	1218	875	3386	4591	3975	390	1770	3162	2849	4564	5539	4412	1071	5760	1923	270	3381	4438	3447	542	3776	5158	4975	802	3526	3409	4527	1473	4678	628	1338	4054	5010	348	2118	3781	1430	1515
Row 34	3724	5453	771	4295	1233	182	4328	3193	626	3653	327	3489	2957	2469	2648	4305	2074	2161	5498	2537	1406	1758	4821	3737	4388	77	1806	3782	785	3113	394	5539	5352	3202	2777	4911	5873	4924	2920	2973	3072	1276	5405	1979	4631	1242	713	5612	2539
Row 35	5576	2480	4318	1731	1654	256	351	3278	1389	5656	2314	2351	1285	3083	5841	1480	1948	5614	1923	3554	1484	2963	2409	3984	3199	3032	2418	2526	3976	3585	4881	2748	2703	5125	3608	1406	4342	2422	3552	5625	2206	1402	5228	2441	3085	1988	5294	3256	2293
Row 36	5110	2596	3431	5057	5539	5039	4715	5394	5342	2011	1953	3557	4863	4575	4683	942	2565	5147	1221	2345	2583	563	408	2140	3589	2621	1911	5726	791	4116	697	1705	4831	4417	1663	1213	4410	3766	2087	4391	549	5483	1230	4550	5877	5026	1128	781	4204
Row 37	3393	5510	3654	2583	3175	4907	4523	734	717	1379	1850	4901	590	2700	3984	2680	5359	169	1906	5655	5184	3142	2385	4775	4431	5298	5376	3858	2687	5632	236	2772	3774	5541	1559	4597	4827	260	4393	991	2563	2627	3534	3425	583	304	1288	527	5395
Row 38	920	2152	624	4748	240	4756	4457	845	2918	1098	188	5282	1593	2061	689	3595	130	3674	3810	2372	2703	3039	2989	5644	4018	1660	1506	4122	4816	4043	4378	3051	1717	2813	4161	4601	1610	299	5301	785	2762	2538	2768	555	5854	2417	872	476	5861
Row 39	461	3888	2261	5396	3220	5724	3945	1104	3751	576	2541	1197	3480	1033	4954	3555	1292	2484	4009	4892	1696	5724	2224	16	4037	794	362	746	5954	4482	2438	670	598	651	5447	2534	27	2770	419	88	2437	3694	492	2551	3652	22	1384	5632	1744
Row 40	4330	3796	2455	3064	3914	2306	4332	2077	5143	5534	5010	2467	3840	4335	4983	5798	204	5582	588	4484	3742	1969	5748	4118	194	536	1098	4502	2345	5292	3784	1218	1488	1254	4960	4578	1163	4982	3877	1439	4525	4004	1973	54	202	2217	2569	3652	3646
Row 41	3563	1739	4834	2858	5574	5951	4400	1534	1387	3379	2346	1271	1438	3397	1835	4997	5885	769	3360	3283	2435	4692	4929	1136	1417	3141	3453	4662	5602	1493	3187	1908	4920	4502	2479	2638	1113	1959	5722	2970	1805	4911	4632	5672	3302	3119	2568	2349	4725
Row 42	1036	1067	2822	4187	2907	1936	588	4919	4196	5560	3783	295	5492	4913	5891	4214	3933	1890	1455	3199	99	2455	7	200	3285	2284	2254	5007	1094	3168	3268	1081	1641	1711	1725	364	4605	3423	3786	5409	422	699	3993	2569	1029	513	1161	5867	2591
Row 43	2151	2528	802	2205	1026	1038	849	5537	3960	5499	4641	2143	5189	1740	2878	5689	2729	5646	3046	708	4989	2714	4314	2398	2041	4955	3354	5918	3966	1701	1697	5716	3295	3039	2034	4031	5390	5087	4842	2931	4417	5936	1387	678	1747	3461	4721	3956	3689
Row 44	2871	4025	213	2071	2635	4300	32	1710	5823	2238	4905	2032	1932	3433	256	4362	5251	498	3894	2472	4557	994	1022	1706	2800	1594	5910	3684	4618	664	377	3242	4822	5487	4378	4001	5576	3490	3799	4818	4751	2901	4397	1128	476	2398	4412	1926	1886
Row 45	3345	2150	1494	5155	4063	4689	5926	4917	3197	580	3992	727	2191	4567	5221	151	4833	5760	4551	1919	3433	4367	5318	5295	4085	4847	3167	3138	505	4747	1179	2002	1940	3301	506	941	3389	5863	2650	3889	3584	3481	4389	1855	5730	758	3190	4592	4492
Row 46	2195	4966	779	1178	4030	4067	3244	1227	1859	4828	5947	231	1896	2556	2073	3243	4763	2895	1715	3862	4996	880	970	3229	5131	4734	1094	669	2451	2685	5240	2065	700	4986	5681	4749	5638	5054	2207	216	1315	5611	2383	431	599	1630	3390	1836	5961
Row 47	2694	118	4095	5105	5630	5905	4399	3502	1164	1662	2677	5742	359	3007	5164	568	5066	5369	5612	436	5386	5333	935	2607	1709	3396	1615	2527	3664	5709	1710	4761	4089	5004	2802	5144	1498	5505	3791	703	3049	124	119	5282	449	663	3965	1034	2439
Row 48	2582	1525	2524	3546	344	4285	755	5711	4335	5796	4910	1448	3365	3277	1552	165	2986	2594	1391	3865	2596	1864	2371	1119	4457	858	2637	1311	3965	5170	3620	2480	770	2896	938	1685	2668	5759	4702	12	1237	3326	3610	5141	1389	1489	1564	5649	1902
Row 49	415	2617	5004	1501	278	1546	1660	2163	3552	3424	3373	3288	1303	4411	304	4687	5242	1524	4665	5667	5852	243	2079	5824	5650	110	2638	3780	5237	4598	4239	1538	4209	930	2723	5673	5675	2259	3473	3277	4401	920	2610	555	2351	951	4140	3206	2713

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.