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	4997	324	3148	4982	1776	4329	3858	3419	3796	2356	1810	4716	4988	5296	746	662	1615	1681	5775	4497	4122	3080	1878	4905	1026	4022	4525	5719	4539	191	1281	3048	3922	4648	1478	1127	4710	2083	1917	719	1065	1830	3584	5139	2876	5413	3786	2381	26
Row 1	3319	2238	5631	5466	4501	5466	5116	4965	3209	5370	5569	3694	62	909	1569	3563	4125	4065	1009	4071	1348	1084	1467	3880	3603	8	352	513	1218	3777	4585	290	1245	4110	2678	1961	968	4555	3665	2787	1243	5614	3191	1605	5195	376	1529	1530	4752
Row 2	2589	4144	3008	2347	5904	3787	1031	2946	1711	3992	2285	5963	811	617	3930	2338	1544	1713	1672	1237	696	405	2011	4290	3984	4988	4827	1546	5435	3151	876	1108	1719	5486	168	4885	1492	2426	3488	5086	2594	2517	3124	4915	3399	1805	266	2033	5936
Row 3	5988	4216	117	1903	4960	3611	2426	5397	4632	1131	1601	4347	2880	1026	3875	981	2771	663	3590	3315	5537	5444	2365	3984	2471	2038	948	531	902	2704	3151	5900	2203	5265	5102	697	3405	569	2981	5156	1451	3612	459	5617	4327	3841	2717	2708	4763
Row 4	27	714	4836	2436	4083	4815	5120	2252	4455	989	1299	4191	3390	4639	2762	1009	1899	5957	1228	2603	2757	1669	717	2990	4932	4758	1656	2888	4670	548	3455	3647	4140	1248	1165	1040	4014	4811	4612	2828	4644	5044	318	2839	4462	5789	4213	5637	2083
Row 5	3050	373	4485	1242	4289	953	3291	3894	2143	3251	4757	1242	1009	5258	2493	5052	5284	3439	3390	9	2047	5664	5505	4889	3873	4071	2472	4521	5926	5445	277	1667	1508	3100	3598	3028	2377	1589	4671	1896	4591	2844	4250	1604	5526	2775	2638	3623	635
Row 6	39	5035	5050	4193	2156	1127	2831	711	4525	3606	372	4326	1413	4163	5045	5502	4671	5938	3736	3831	4353	2076	1912	3712	4294	1148	3454	5305	888	4462	1358	4288	1669	1230	5988	1618	3213	5149	695	1669	2276	3798	5999	977	1576	4546	5325	1271	435
Row 7	4518	5570	591	720	317	1549	5234	4794	389	4453	3084	1110	2237	3557	3975	1456	4761	3421	2076	3103	198	4246	4693	3718	2491	616	1840	1432	1116	1327	3850	4264	5423	958	5451	3531	5480	3654	252	2668	1927	5723	3673	4362	2361	3148	3082	3260	4098
Row 8	3027	5522	121	3542	1150	2475	3507	2175	4245	5101	7	4864	2208	2933	5556	2043	1803	928	973	3429	2513	3868	640	4115	3017	3720	2271	2993	4748	1596	2753	2489	1023	4363	605	1984	4879	403	1424	963	2337	2271	3222	5312	4849	3450	1025	2011	2721
Row 9	5104	3567	3405	4882	5891	5787	4884	557	4960	940	1226	5267	2782	281	5713	714	881	3661	5865	195	763	1813	666	3535	5053	3232	4023	122	2679	922	3410	3738	2734	4254	5394	2235	3596	1776	4771	1026	5461	3230	3371	3547	4771	1409	5085	2833	3041
Row 10	4189	1862	176	1579	254	2270	3932	2900	4511	37	552	5430	21	1917	2730	783	2225	587	908	2278	4719	1545	1636	3883	4512	4981	2808	695	503	3941	4749	3564	3874	2662	390	5204	142	1591	3293	513	2087	4266	171	3773	349	5740	4644	4995	3469
Row 11	606	2762	2941	5574	372	1363	4084	5205	776	4336	3480	4712	1962	5069	481	4674	1865	1007	4142	5117	2811	92	4670	1523	3646	4039	953	5701	5160	4551	4447	5155	5064	1451	4328	5275	4325	5226	3528	1460	305	3413	3700	1309	3984	2429	3403	1884	926
Row 12	3846	5660	2752	4926	3754	5895	1757	982	890	3429	3940	999	4566	442	2369	104	1874	4116	1606	5524	4960	5506	486	1413	4847	3245	4659	323	1355	4856	5178	5260	866	907	4906	964	2107	3085	86	1684	5043	3304	5320	3483	2617	1321	2883	4552	4230
Row 13	3557	1702	2671	94	2075	5105	5231	4745	5958	4172	308	294	4757	971	4179	777	1784	3056	5492	4831	5178	2895	5580	336	5164	4201	2214	151	3822	3342	2854	242	3088	305	1008	5192	344	3923	5131	5132	4577	3397	3952	3473	5353	3983	78	4967	5093
Row 14	790	1171	986	1359	1797	4931	1549	614	274	552	1373	1361	1943	2698	3581	4190	2486	5369	1574	3358	4022	4360	747	3041	2111	1594	2496	5337	5833	2556	3324	2830	1261	2540	2166	4902	660	4225	4643	4610	4617	836	2325	1091	4787	1597	4482	3289	1833
Row 15	5318	1672	4985	941	1298	4543	3508	1631	966	764	935	2302	2712	3927	2152	4846	1792	1435	4350	3224	3036	4114	4021	2323	3425	931	722	3969	251	4789	1484	808	4716	3624	1993	5029	5782	1792	904	2483	1872	5272	5633	2747	4349	676	3013	567	2611
Row 16	1927	3423	1532	3949	4761	3945	1647	4768	672	4400	4171	5739	484	4676	4776	3515	3459	4268	642	4380	4587	4188	3173	1138	5475	4793	1303	3734	3973	5848	5684	1251	3960	3841	1475	1734	5205	1177	3356	5659	3655	1998	1756	1413	4577	3031	5020	1949	5880
Row 17	2607	2211	729	3615	1691	1424	4690	335	1241	5119	4284	1876	1345	2720	1190	4637	3853	142	3390	2663	4516	1636	4312	79	404	325	502	2961	5688	4469	2063	5621	5091	514	792	3933	4145	5652	1377	5094	1933	124	3135	2892	5470	634	5748	2611	1629
Row 18	5998	4955	1181	889	2047	786	3866	4197	4038	4483	4318	248	1887	4513	3627	5987	62	3509	2103	1758	1083	5835	89	655	1449	409	1172	339	4606	1351	3993	3656	4402	5679	4143	4377	3362	1088	1432	447	2217	258	1673	5594	5813	4295	1206	495	3463
Row 19	2855	3390	3336	1517	5889	1910	1421	5027	2059	151	5864	5618	2893	26	2032	1067	2500	1875	2434	789	5765	4863	2467	2000	1820	5279	645	196	1510	689	1837	984	1338	3737	5198	3701	5892	4121	2101	3611	3150	5042	571	4624	5256	603	2335	5370	5743
Row 20	3667	3363	2501	4038	10	1229	4576	5990	4923	2204	5883	1608	4017	954	2236	2416	3306	4618	1301	4393	2529	698	5340	468	5713	396	4303	5458	2040	4595	2287	2393	5355	3615	1752	5680	2445	2404	1540	4655	896	705	68	3204	4498	5740	3485	3401	4756
Row 21	3416	4342	4835	3714	2696	1732	1506	2852	3782	2477	3124	5091	5214	5359	5295	3028	930	5355	1067	5960	249	3982	1560	1343	629	1459	342	387	3139	1571	4021	2200	1570	4622	2717	2415	4222	4034	3558	2864	582	4976	3164	4967	385	4992	2881	1360	1625
Row 22	427	2218	4617	1397	853	2032	4808	435	3044	3646	4494	4599	2798	3535	3805	4976	2496	2415	2577	4938	1727	416	5391	708	18	2098	1143	5240	1105	5130	900	3936	1750	5483	5655	2504	3317	5932	3863	3544	1796	2221	4386	5461	4638	3668	3714	5279	3536
Row 23	1659	2671	372	5141	2314	1610	4121	652	3846	2567	3504	3745	5663	3551	1100	2346	3289	2643	3042	2606	4478	214	1002	5025	4293	1392	2738	5056	4353	3030	5954	2175	291	4544	2184	2339	3652	4676	4540	3	1570	2753	74	4488	2160	2823	1938	2494	5422
Row 24	3828	892	1649	5530	5419	5674	4276	2318	5109	1744	3786	5636	539	4522	4140	4073	3097	788	1840	651	827	2599	151	5943	257	2721	1351	2827	1703	1098	3561	5357	3505	4978	3348	4790	1679	4290	5002	232	1479	96	2164	354	3898	5565	1339	1828	322
Row 25	1560	155	2908	4551	2184	685	2873	5127	5738	2109	3227	4721	3882	1688	1365	842	642	5315	1298	2042	2164	5790	3566	3059	2351	4015	3845	1775	3708	762	4012	593	1639	1948	4482	5978	1206	2595	209	2280	1879	1908	5823	5936	3747	2757	3580	4716	4019
Row 26	5273	1347	1767	429	825	309	5009	1459	2928	5242	1662	986	3075	2267	2087	1660	5720	4726	5201	249	2724	256	3705	5652	3830	2226	1963	5378	362	762	5280	718	1765	5631	1475	3629	2722	869	2579	1794	5449	3765	1562	1341	2303	1947	2116	2260	392
Row 27	3075	1861	2086	18	1457	5955	3164	2713	1593	5562	605	1972	5251	3272	2619	3835	355	3210	1414	5449	5694	4066	2174	1660	1929	1486	4120	1771	763	924	4867	1397	3577	4846	722	1914	2233	1503	3688	2809	172	2278	4571	792	1363	1143	4964	3694	421
Row 28	2231	151	3264	1486	133	1265	1306	5340	2416	3824	5361	1605	5495	3953	666	361	670	4346	1938	5161	4224	4678	2351	796	4061	709	3948	3447	2814	4226	1779	327	903	4809	4676	3927	4387	2153	4765	364	4742	469	411	5073	5666	5362	2835	1896	5069
Row 29	648	3399	606	5268	3246	4059	3700	5402	349	5898	644	119	3198	2086	4317	2800	577	2291	4509	3101	4575	5531	1290	118	5253	794	4561	4122	5964	1456	4890	1543	3446	5641	4912	3716	3914	5658	438	3757	2697	2520	3774	2980	2529	3319	1172	1346	3525
Row 30	3126	5584	1443	3564	5267	4379	1507	601	784	4296	4752	5141	3234	4221	4709	4931	5745	5684	2011	4431	2101	2106	1230	3458	989	179	417	3479	5432	3405	995	665	1262	586	5686	4628	4162	4059	5687	2208	4629	5143	636	919	113	3029	2136	43	4635
Row 31	5114	1070	705	1253	1677	1573	495	2834	4662	3673	2392	4309	63	4449	5302	84	2189	667	2379	4266	3392	4435	1413	70	5112	2153	3476	1696	4315	4643	1755	395	5061	5403	1181	5879	1708	1343	99	2293	1153	3160	1192	4470	5273	798	184	66	628
Row 32	4888	3467	4875	970	4466	5346	4929	4663	1108	4107	4529	3861	1078	765	499	1731	2124	4038	710	4643	3617	1230	80	3235	1946	1771	3531	5029	3025	420	784	5714	8	3137	4903	4736	3495	2046	3675	3392	1953	5021	2581	1848	1905	1910	4763	4657	1980
Row 33	2143	4089	2673	1932	4780	3454	2471	1367	2436	370	4657	4180	4977	620	2316	5939	1619	973	1453	5277	3246	533	5019	909	3774	4862	5839	382	5168	181	2208	4615	937	3647	613	4679	4134	3901	5282	2143	120	3281	5751	2208	5184	1376	4098	4049	4825
Row 34	2181	3995	5622	5979	5518	2568	1291	3591	4170	2865	1063	2471	1194	3802	3005	631	1486	5901	4570	975	995	149	4724	2898	4090	4365	1412	3404	5221	5991	3134	672	4297	3117	5002	3821	1325	3841	1482	4505	1747	5739	1202	1426	944	1173	4238	2275	382
Row 35	3916	2343	2277	5573	5985	1913	7	2390	70	3590	4912	1451	1045	3752	1083	5025	2365	4851	1957	5452	2793	3134	3506	287	2576	2805	915	263	4612	1907	1035	7	4930	1386	3554	1366	3437	497	3217	4666	5243	5775	778	4843	2036	1499	5885	3283	3976
Row 36	1258	4479	445	4175	1800	4154	5543	5670	1202	1581	3717	2486	3811	5234	1401	178	1445	925	932	4671	1113	617	2445	1799	2337	290	1707	4590	5572	4624	3873	5876	1448	4388	663	2731	788	1240	3813	5613	1743	1147	5166	5191	4264	3167	3432	4414	176
Row 37	236	4777	3385	1296	4365	2980	3205	447	2670	309	5709	211	5103	3543	3316	21	920	2562	2213	1234	5450	271	3871	2631	3043	5669	5877	2697	596	4671	94	834	4938	4974	338	211	4986	4651	40	416	627	4433	1096	3943	1763	2994	5840	4066	2842
Row 38	3146	636	1779	2668	3222	5025	3633	222	1749	4363	1593	1691	164	1438	2131	4485	2343	1234	42	4966	1495	1088	3657	3762	152	4057	5113	2042	4801	4303	2364	3219	1811	424	4754	1757	1486	3307	1339	159	1272	4336	74	3974	1509	3257	4587	1448	5906
Row 39	1118	1401	953	3128	134	4176	3922	2307	1108	322	3178	1556	3509	1878	5407	3256	2957	2957	3163	2204	5839	714	2008	120	2878	1436	3731	1393	4406	3575	5435	5891	5421	1851	764	1783	1108	5100	2246	5832	1434	705	1962	318	5344	4522	1679	5252	550
Row 40	947	50	5497	652	1894	3369	5898	1915	2930	4812	888	3199	1226	4148	5091	4841	5109	2502	4604	365	217	3479	1419	1091	2065	2175	3537	1807	5773	3210	1898	5774	1694	5156	2382	2970	1592	2844	5808	3444	560	5106	27	1696	722	626	166	4040	3943
Row 41	3951	1932	5352	2482	5280	2882	635	1279	4078	2559	1708	2609	453	5445	4665	4424	1002	143	4574	5625	2136	2981	4686	2743	3995	2744	3448	1382	1496	2995	1736	452	3513	1374	1239	1677	495	4273	672	3239	4634	2041	5516	2032	5955	307	3732	207	3165
Row 42	3597	2537	681	3201	3001	942	3014	4796	4181	2726	5012	58	3199	2753	5772	4742	1780	5421	5917	566	2486	1472	110	3711	5870	2810	4274	4782	1839	3260	1607	4836	4750	5786	543	603	3216	4492	1428	605	4932	214	4007	2752	3499	1517	4248	5135	2312
Row 43	419	3169	5596	1453	3349	1650	2519	5377	1539	981	5130	3723	5404	1707	1077	3037	4541	1320	125	674	2827	3366	4849	5902	2497	2174	3892	4481	5688	547	661	1841	3996	2209	4668	1163	1757	3981	5836	277	5744	4764	3933	5391	4668	2060	5388	4862	12
Row 44	2359	5770	3444	2814	2647	2553	5534	1709	2358	1004	3113	5479	5976	256	5829	2756	1418	5124	202	4933	2567	2566	1575	31	5967	4089	2588	4455	2300	5039	382	3628	4482	3416	4098	4551	5687	3437	4645	2031	2916	3791	5460	4314	784	4185	855	4791	4585
Row 45	555	1858	3425	3698	3146	4287	5986	4504	466	3882	2659	1650	5392	5341	5475	5255	1119	2677	5010	1606	455	5401	4812	1839	1782	4435	4586	2677	1406	1827	5100	770	4915	5420	5657	4864	1638	3029	5677	1154	528	3476	3831	2802	1670	4293	848	4082	5987
Row 46	5513	2190	1618	426	3360	1531	5362	4013	925	4157	4131	1297	5346	5331	1038	1705	148	3318	3514	2674	3231	5865	3448	412	4577	5600	1386	5075	1476	5048	1272	4194	2023	1350	2737	5885	5009	1274	5258	4831	4243	5852	2399	5599	2579	2495	3285	2431	4668
Row 47	1020	392	774	1575	2910	568	975	5161	5643	4746	2733	4701	1437	5100	3668	2783	221	5915	1073	4113	1991	1520	5352	1055	2561	3530	2981	5328	71	4853	2442	5265	4550	3190	171	5928	3524	3110	539	3823	5603	817	4642	3056	3035	4986	5526	3086	1136
Row 48	3529	2650	5497	1564	410	179	5502	4897	1636	1384	750	1827	5449	1330	4588	5464	67	4692	5483	3125	4681	2757	5067	3960	4734	3929	4315	4637	5784	3190	852	850	4671	5327	895	252	4465	441	5395	3451	90	980	3079	821	3823	1596	678	2693	745
Row 49	3671	1638	2654	1028	1954	3810	2530	3277	4754	4286	5834	5869	3840	2192	5634	3086	5980	4219	2382	3273	3502	1771	503	2668	5524	453	2558	4968	2751	831	1885	1578	3828	5193	211	813	2140	4737	1401	5627	650	34	590	5100	5177	4445	1073	4144	4937

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.