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	4507	320	1976	2914	1232	3886	3500	112	5513	1481	2240	4309	5345	2953	1518	5794	4688	5238	1336	4154	1727	2093	4406	1593	5141	692	698	4618	2966	521	734	3801	1806	210	4833	2361	5597	5994	3958	4602	3983	1840	1948	3081	4433	2081	4165	5684	465
Row 1	3594	3029	1751	3347	3266	4387	1914	1789	814	4208	3315	5063	3230	4793	3268	5500	5992	2167	5256	691	2063	5678	2831	4253	1171	3719	933	466	4665	4224	5020	93	4649	5838	3983	5254	1065	1043	4418	2020	3377	3825	5634	985	3404	4057	4296	3027	5152
Row 2	2271	2778	2302	5509	5491	319	5757	1197	3047	5391	3223	3633	4530	2602	4454	720	1821	116	536	4307	2819	130	4220	2313	4930	2653	5780	4780	4247	3851	5238	2070	4901	3580	5980	322	5235	4709	227	4493	5013	4774	4320	2126	5655	5933	990	5295	727
Row 3	3788	1771	4410	4698	4163	5354	602	1902	10	1071	2681	2574	2096	439	1328	4575	4739	768	3988	3934	3981	808	2578	518	5827	4708	2515	1512	3468	1893	3521	3064	5954	412	1994	5604	5152	4046	467	2939	2863	3956	5796	4548	2621	3371	323	2663	1182
Row 4	3779	4454	2368	4198	2806	2430	4253	5555	704	921	2105	5553	3049	3065	3194	5718	5265	4616	5100	25	5961	4197	1933	3118	2377	2189	4237	1285	5143	1649	5893	583	5410	4678	2910	2032	961	1533	5272	5207	5662	4745	4580	171	153	1558	3792	831	1249
Row 5	5317	3545	2789	4916	1985	2991	1349	4636	4045	2181	2388	2901	3264	1190	1248	3939	4999	3539	2960	919	4709	4509	612	917	5999	5516	85	1674	1381	2815	2237	5270	1824	5070	2116	5697	34	3430	504	3911	3730	2313	2724	4129	5364	1609	1133	4355	1119
Row 6	3460	2048	5282	3436	4849	733	2305	4597	4094	4332	2451	1775	4651	813	5870	4065	5240	2418	1113	2805	5692	3661	4897	79	1700	964	3025	5919	3412	3378	5240	5407	2112	3184	5046	1392	2617	3938	557	3300	2645	3232	5442	1324	2275	5120	1721	2278	5969
Row 7	5263	5879	985	4902	2264	643	5347	2046	3477	5609	4225	1088	102	93	3156	5401	2825	3247	3921	1958	1755	1118	1959	5063	5643	1560	5084	1963	3281	2339	2683	4613	149	5248	5445	1319	4280	2576	2593	2042	3353	2207	2023	3043	2524	127	4990	466	5241
Row 8	61	338	3633	4734	1818	3584	545	1419	4070	5888	264	3796	2587	2879	360	5712	5095	4532	469	5261	5488	4823	1156	5295	626	2629	5527	3870	5323	2416	1557	2711	1727	2437	2432	4573	2854	4103	5249	1270	535	4419	3642	2299	2391	5760	3242	4288	3427
Row 9	1698	1271	5489	1898	4368	5169	98	4508	3202	3414	1925	4935	1687	3177	2445	4224	173	4022	4713	1442	5373	1457	5046	5835	2768	3107	1085	152	1443	1892	3739	3707	4169	1718	3184	1240	1010	3813	2973	5770	4653	4813	4549	2393	5075	1171	3498	248	11
Row 10	737	3858	1928	322	3781	3449	4904	4868	1326	5959	2501	4391	3957	155	3283	2644	4038	3733	2515	4882	3128	271	3	819	2819	5427	5891	3181	509	771	342	4325	4755	5452	729	775	411	2929	4986	2744	344	4622	158	5103	940	5897	3951	3538	2190
Row 11	1630	2579	137	3285	1496	982	4566	5883	5516	3488	1142	5767	3361	2897	1627	2041	602	3337	233	3993	4632	2338	2161	576	4328	5931	1919	5416	5569	407	3754	3099	1948	3367	4743	4196	1468	4741	5798	2083	1450	2525	3637	3443	5916	4813	2421	4047	2740
Row 12	2639	2348	380	3969	887	3446	4578	4677	1276	84	5006	5471	388	1609	4285	4171	2829	1800	1185	2648	5149	3842	660	5597	5814	3102	4651	1875	2410	5616	4100	1775	982	779	5233	1330	533	5843	2068	4620	5693	497	970	3562	2301	255	2176	2539	5282
Row 13	5768	5674	3851	1739	3656	1651	5311	4847	145	3711	2628	2601	1162	370	4148	5483	4786	3856	2110	2882	974	1155	1183	4733	5886	1069	986	1420	3679	1151	4165	1883	6	4207	5589	3638	3754	5789	2705	5781	330	2610	318	3525	4920	3960	2279	891	2963
Row 14	1851	4922	630	1950	1638	2211	4268	2501	1567	584	5882	4102	5085	3709	551	2533	4101	4916	1257	3807	5700	2194	1888	3795	1419	3488	2171	2371	4465	4051	1775	4683	2575	4221	3686	3558	3084	5792	2693	1076	4089	4252	3588	1612	1555	5202	4905	3062	523
Row 15	300	2915	2352	4070	4457	3723	751	4532	1995	2727	1334	4788	120	5858	3480	3138	954	807	1582	1222	2029	504	3110	2823	3829	2255	2565	5262	3102	1996	2405	3679	265	1458	3889	3074	3628	5424	671	881	5844	5129	1561	698	4691	5786	3200	2519	5469
Row 16	4142	189	3430	672	2084	5181	564	783	1003	5623	1685	3394	5625	4106	2672	1502	2396	2293	5183	1751	4854	3125	133	3488	4212	5174	544	340	3307	1565	3420	5966	2612	4890	565	4773	711	3825	2767	4952	2296	1527	3984	1824	2375	3753	245	2594	3220
Row 17	4966	1873	5028	5843	2370	1498	3604	248	5259	4353	3625	2215	2383	1028	2327	3510	3540	1354	4655	4556	2047	2528	1658	3835	813	4683	2453	5977	1926	2378	926	2106	2742	5177	5873	1384	3664	5653	4624	4648	3490	2889	1784	2768	5740	1177	3378	1334	4621
Row 18	3247	2470	1879	4897	1152	408	3636	1060	5185	1751	2132	3141	174	2879	4987	4206	1694	2936	4404	3631	4007	4197	2707	2731	1293	4581	5903	1341	1843	1864	4687	3022	2537	4152	4423	2587	1258	1230	3672	1918	3568	4750	5208	156	5580	114	4837	4478	3441
Row 19	1474	2803	5960	5907	3454	5719	3131	1318	5458	3491	128	1153	5559	2418	170	3282	5209	407	1611	5429	3755	3251	3517	3703	105	1736	4997	3988	5333	2106	3070	5660	590	3485	2966	4022	3523	3174	1963	4440	1703	5540	2271	648	984	2442	4654	2026	2809
Row 20	1895	141	2058	1067	1858	2403	2908	2836	1667	4894	5505	3736	2596	4984	5045	5727	4582	5127	3127	4421	312	5093	1178	2316	5783	3159	3173	1879	4380	3250	1773	2741	392	2623	1803	5552	95	3864	5298	4872	754	5457	5171	1213	3976	1415	4083	1152	446
Row 21	4650	2998	4251	4668	899	5510	262	5383	5672	384	5806	106	4917	1708	4530	659	3800	4530	2419	5378	1847	2326	1363	945	5306	1010	3737	4756	5354	2338	3882	4461	5981	5650	1230	1097	5803	831	2844	2485	2316	4724	4950	1473	1045	596	5301	541	5211
Row 22	47	1986	1491	2684	2297	332	1005	4038	2100	5556	4281	2126	979	1209	1768	826	5592	4006	1860	3227	3393	5440	434	5567	5545	4354	735	5700	5559	264	333	5716	4513	1884	4806	3850	5398	1796	5261	32	4071	1741	4134	2305	3709	985	4372	3260	1599
Row 23	1252	651	4326	3390	4025	3182	3281	4559	4356	4612	4056	1355	5619	2544	2551	3944	2412	5125	1500	4860	5187	5302	2917	892	390	1110	4607	1175	176	2479	4328	569	2381	5124	2530	477	2879	2881	2358	1173	2107	5422	5176	4901	5167	1450	1045	3508	4028
Row 24	3421	1019	2875	1260	5353	1814	953	3329	2153	5243	4577	2086	287	3753	5486	336	5482	765	2350	324	1536	5430	5518	3262	1531	5829	2901	880	5910	258	5400	1889	1965	3366	2651	446	4742	1704	4792	2601	3735	5982	5135	1037	2717	3344	3974	3417	102
Row 25	3578	1014	2139	5137	5206	1585	1725	1964	4235	3606	1836	475	5517	1486	2571	2316	1884	3025	5474	1618	2456	4827	4405	1675	5600	2707	2447	4353	3094	5358	1829	5224	1732	3768	2874	1320	5097	5119	2178	2116	902	3512	2681	243	3894	3847	1358	380	205
Row 26	3900	5518	726	2854	4092	4516	1628	5685	5570	4535	5578	2219	4433	2015	3137	5449	4003	3362	5514	5399	3875	5794	2592	3349	4942	756	3357	3546	1043	4559	1103	2476	4340	1190	4433	2295	5301	1222	82	1790	4524	4219	1680	2418	5835	3290	4159	5838	925
Row 27	4643	353	3196	5897	3417	5586	361	2253	3212	5574	3794	2205	2898	1934	3192	5189	4240	1166	1399	2423	4241	3081	1468	5725	4492	5349	1886	4278	5576	3779	4454	150	2665	1387	2245	5956	3193	2831	3934	4237	4545	2387	2053	5380	3420	4403	52	3512	41
Row 28	5722	1307	389	2145	1883	2399	124	4898	1970	5703	5785	2101	1607	4016	5651	2743	2883	2830	5419	1346	4950	5943	1957	3120	5821	3264	1054	5486	296	3494	771	1470	5867	1362	2509	5162	5973	2008	2737	220	5045	3651	4454	879	316	1442	1560	4084	2157
Row 29	4309	5729	3765	5275	5068	1711	618	2819	2613	5100	187	2326	2091	5006	3676	4835	3109	424	2022	320	691	4291	1811	3450	1390	4946	3135	1416	5726	5812	2432	4293	2043	640	355	4004	3031	66	3444	523	4371	2726	3414	5847	4519	59	307	5342	5963
Row 30	759	1802	5298	1552	2957	5984	2382	649	2394	2924	1363	5767	4524	3435	3999	5562	3123	2802	3062	4245	2873	3740	3651	2828	1805	4935	521	2030	3315	3643	976	2621	1272	2657	4750	3700	5497	4345	1589	1324	5923	5742	3235	3848	2635	3829	5808	4927	1661
Row 31	4562	2729	835	4025	5726	4301	491	3568	5771	4513	5677	33	1484	2836	5189	5185	4065	5768	3112	4759	2977	2638	3490	3933	584	3131	743	4236	5992	5495	2923	1240	1473	521	2486	81	607	5382	4509	3103	2042	4376	2457	2340	5438	3860	395	371	5055
Row 32	2380	5882	5122	639	3255	1161	2164	1963	3199	2559	5706	3813	5404	5570	94	256	1199	3794	3970	2853	5353	1367	1734	4656	2270	3087	795	5201	453	5868	4523	3849	3350	1381	4813	3040	2334	1580	4472	3929	3070	5594	694	43	5100	5045	1207	2877	5342
Row 33	683	3346	2231	1941	263	1128	1058	5474	5207	2065	877	4636	1210	2431	1389	5991	977	2563	5452	4198	4682	234	4064	4743	480	2915	2107	2159	1283	476	3646	2542	3047	611	4392	1011	841	4150	2779	4919	4521	127	1598	78	11	408	5953	4521	4428
Row 34	3729	1630	908	1935	1066	2736	5953	4190	5412	1977	5696	1245	3951	5900	2218	2599	4163	4907	3162	3723	1059	5685	4193	5723	3519	2569	5662	1042	4370	5442	5645	5825	5318	5327	458	4421	4234	627	1740	868	510	5205	2329	2481	4961	1578	5035	2215	3700
Row 35	3239	4667	4742	3023	246	2912	4272	3382	887	1676	709	1804	5004	1218	2171	3593	4785	1565	1761	4979	3444	216	439	4915	5302	3593	2334	1072	2730	43	5379	1752	3053	2065	2274	3096	4412	368	1261	4993	5301	2561	5851	3669	1099	2690	1227	1615	3549
Row 36	5623	613	5327	4319	1809	2927	3067	993	5524	475	3980	2123	3011	755	1642	3131	4818	2166	4215	1794	1672	5421	1780	5313	2160	5048	1973	4692	2573	24	3878	5006	596	5054	1074	3904	4673	2473	3676	3872	263	3638	4198	5749	5182	423	1482	4575	1175
Row 37	842	536	2900	2649	5734	820	2243	4430	5548	4227	4440	3163	5354	499	2219	1421	1021	4070	530	2068	682	5192	2926	5303	2936	4815	4244	5689	1241	5023	2576	3841	1706	195	3912	145	1913	480	2989	3732	2833	1500	57	1449	3360	804	1292	5588	830
Row 38	4694	4757	2912	3570	4494	294	621	4094	5240	2540	2706	5616	2235	1712	5252	2005	5877	879	3904	505	5032	932	1124	3132	3957	1708	2397	1879	3656	1404	3803	4795	5214	5956	5869	2740	665	1594	4335	2823	2269	727	4436	3815	3736	3230	4991	3317	4714
Row 39	3902	4904	151	1537	3529	3243	1157	3874	5254	5247	5670	4536	1387	696	5857	5322	2636	3755	5298	3683	1218	1370	2548	289	2824	2146	2542	4696	3846	1916	1423	5420	1172	3197	5141	1994	2734	1364	366	1673	4666	3073	502	1095	5655	3055	4343	3945	1936
Row 40	1272	5989	135	4893	3097	3322	5603	5515	5360	759	5954	1383	4647	4840	2818	1697	3597	5068	6	1110	5513	1142	1099	1645	4001	763	824	5043	1534	928	1057	4872	4834	5621	4727	5313	2607	861	3330	3503	5649	5216	5622	4697	865	4935	780	4948	5715
Row 41	818	2590	4605	5948	3094	5256	4172	4214	2432	4401	1979	5532	592	3068	2916	5791	5738	201	4687	2368	3381	1920	624	3962	1725	1541	5289	1998	213	4785	3978	4897	5320	4312	5975	3050	2344	435	228	3816	2936	2981	3545	26	2321	4431	4321	1967	5885
Row 42	5050	5136	3928	4686	1859	4765	5265	4817	3205	1567	2724	4677	2528	796	5704	3973	4023	2878	935	1346	3319	3768	596	4775	2394	5075	2825	482	4374	5839	3090	1841	1848	3359	3227	1997	1504	4071	1629	1274	2319	5950	4738	4895	3106	5307	1880	129	3921
Row 43	1616	2513	2196	5133	2400	1752	1724	3151	1980	5684	1815	2532	3456	4917	3341	1510	5727	5142	5247	4031	1426	2003	4543	24	1787	5950	2304	335	312	2047	749	2979	4729	5168	2374	3360	1263	4055	1800	1226	4523	2212	3939	3256	211	4747	5480	3571	4713
Row 44	1736	3350	3499	715	3436	3178	2715	1165	5331	5576	5542	4076	2194	5786	5936	1859	5617	5467	3	5621	5647	2282	599	781	3277	4124	3560	5601	4911	5375	3319	5014	3151	4745	5859	4991	3664	3683	78	4263	2279	4421	276	1965	5751	4825	5640	5049	3082
Row 45	3839	2134	454	1562	4678	2375	486	543	1104	1546	4187	2364	2936	3855	5719	818	893	1044	4109	5388	4991	5370	1609	3484	439	1107	3205	1007	5744	5819	3498	5101	5585	3761	2793	5306	2825	2708	4171	1712	5866	5898	273	240	2687	944	2480	3537	69
Row 46	149	2380	1307	4470	3696	5074	867	2695	5986	2255	860	1665	3634	5649	3933	4551	3984	3864	2387	4210	2542	2010	1039	2934	2756	4181	852	2828	2407	4490	3138	3533	146	3076	5848	5596	5069	5202	2112	2496	1487	1538	952	344	2362	374	5080	2736	5433
Row 47	10	4504	5734	2872	1976	4090	5765	61	4454	3693	581	5926	2109	3117	4641	1014	1676	1195	228	3498	1847	3267	563	4283	1120	3826	5389	3821	5052	5729	215	4406	1797	3177	3034	698	2191	4226	23	2507	3530	3357	1341	494	3285	442	4576	1106	91
Row 48	4016	868	3743	4341	4184	1641	2070	1542	1645	4350	2685	3046	3371	413	704	3693	747	3761	4016	1546	127	4631	1741	425	3013	4796	1758	281	339	3977	1704	213	4458	2191	3678	38	4458	4891	447	3407	5954	2111	4351	3282	2164	3	453	3297	3168
Row 49	1964	4874	5526	4040	1126	2797	1797	4717	492	2127	2283	4013	5860	2949	3637	4342	4156	5882	398	3632	3246	5528	1407	5373	51	2523	3833	545	5800	4422	190	3258	101	2623	3523	3948	3148	3853	4894	3316	639	4395	3273	4324	270	4810	3845	213	1010

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.