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	5134	88	4995	2391	3418	2796	3048	615	332	1641	2211	2430	2689	3156	5859	2991	3320	4154	1336	1370	4710	1171	5473	1233	2427	3761	483	3959	4478	5231	759	2194	499	4164	4838	5398	1700	4635	2950	4393	4041	1960	665	5287	375	437	1188	5298	782
Row 1	2902	5198	2077	1572	4068	2937	984	5426	4344	103	2760	2222	2718	3	640	3229	5503	4753	5881	3907	3887	5647	5128	3164	3955	3433	5809	4552	4914	5283	4846	2694	1273	2363	3298	2549	4267	4573	3929	4794	863	2238	4837	5352	841	3304	5640	1609	3720
Row 2	837	2845	2031	2419	2141	36	5408	4989	4805	960	815	1288	169	3219	4023	1822	3059	4681	5655	1859	3603	586	4891	3697	959	4141	3206	231	194	1160	4030	4787	1795	2927	3917	5975	2240	3939	2308	2595	1707	1990	4120	2170	3882	2724	932	28	4899
Row 3	347	2353	2028	5395	5492	5988	3285	4616	1109	1665	571	4887	726	2372	1162	4070	396	3904	3627	3952	5145	2307	2613	4045	1744	5988	1599	5605	5423	4050	2741	2827	1028	5724	2862	3422	2961	2643	5414	68	534	2973	5130	2285	1191	5884	2768	1760	328
Row 4	4150	1630	523	5320	2953	3782	3729	2689	4887	327	204	1875	1500	519	4734	843	5447	1391	3261	1491	2957	2242	4787	5268	4121	659	27	2420	4494	1569	1242	5238	4314	5410	5125	2777	3613	227	207	4700	1233	3299	899	4260	4261	1205	4880	1829	1843
Row 5	3922	4438	918	993	1674	2488	72	3714	5994	4313	4621	4441	2243	4481	3162	4127	1802	3856	1124	3653	4608	1741	845	5230	4892	59	4726	2754	3326	85	141	1306	5345	5796	3707	304	2077	4626	285	3967	3833	1825	5383	2364	4425	1251	881	628	4097
Row 6	5184	1094	738	881	354	2355	359	417	4135	733	1726	3002	1163	1628	5267	3451	5633	4986	2819	3133	5252	1310	5976	4302	5039	5227	2676	5613	1856	3969	281	5732	3143	4092	5385	5329	3017	3518	2669	4593	1461	1172	1302	4430	3558	3671	4370	1736	4527
Row 7	727	1372	102	1225	5640	3482	3973	5070	2712	4094	3983	1702	5814	4420	1802	462	5708	1865	1259	2995	3950	2899	4811	2244	151	5221	91	4109	3275	1468	1158	3919	538	1520	558	1539	2329	5944	5797	4468	1462	4101	3979	2197	1893	3381	1573	5284	2587
Row 8	3602	1731	538	258	841	3658	2727	620	1279	3280	1112	4976	810	4348	4998	49	2549	1541	2932	742	3112	4747	4332	2250	1020	63	3105	242	5723	5287	1644	2972	2308	5158	4475	3582	5486	434	1356	3088	3463	5531	793	4812	3332	3898	5547	5292	84
Row 9	5486	2071	2391	161	1249	1574	5640	4796	4833	3107	5378	4988	3965	3363	1630	4821	254	3527	1391	1307	3612	984	1008	1152	1123	4123	4292	738	384	5280	1824	605	4298	2047	295	3064	1467	3165	2972	1696	3808	1345	3989	4936	3007	5777	451	1729	2486
Row 10	3504	952	4373	780	5341	379	4328	4445	325	2603	294	2446	2254	3022	972	3550	5047	596	720	4757	3188	4034	5244	3773	4524	870	3452	487	5677	3267	1516	1898	891	2355	4350	5587	5753	1963	3327	1487	4170	394	4130	2246	4468	3998	5162	1591	4255
Row 11	2858	5820	4981	4835	5667	2195	1434	5441	187	1980	2820	5356	733	2803	1995	2740	1123	2753	4182	3235	5989	5107	2691	3743	243	597	4396	1944	5891	1142	4548	1888	2436	1752	3807	2948	1507	924	389	80	1819	109	3615	3606	4311	2335	932	2170	3053
Row 12	937	1436	2761	1912	1674	5701	643	443	3912	1611	3758	932	1618	2688	5462	1066	1460	2661	165	3829	4452	4632	684	4190	3467	4990	4152	1935	5573	3429	4091	1830	3784	4602	5556	2774	5021	5908	3173	4962	642	5315	5108	3335	3453	4274	1653	4482	618
Row 13	3794	4059	5851	2242	2727	3353	3299	30	52	3673	796	1489	5212	1522	3946	3100	4887	1841	3275	5617	4545	2637	2761	290	1263	2137	1978	1930	4057	3339	3351	2723	4372	2201	1046	5535	5630	726	5493	2210	2523	4807	336	2338	5785	2633	5757	4447	3864
Row 14	5458	5983	2294	467	4981	3237	4985	2633	2082	5737	4107	5507	2421	572	809	1545	5407	1105	3633	4235	2781	1478	5319	5439	2854	3837	2238	1053	323	3342	1873	843	2194	3367	637	526	3272	1781	5122	4571	3271	503	2857	1864	3212	2904	982	3554	5859
Row 15	1190	542	744	3015	3906	171	1669	4781	1106	3262	2852	4813	3053	704	4164	4925	1558	3605	1014	4606	4067	4747	2021	3990	147	2865	709	4762	4983	1773	1248	2797	4434	5059	1493	4582	4906	1214	3201	1023	1298	5677	221	2507	919	250	5643	5064	5846
Row 16	883	3281	3406	1154	2390	2875	125	2439	3045	4523	2304	5626	3762	1078	1582	5326	4103	896	2257	4148	4580	3582	5997	49	451	2234	3415	5295	2267	3482	4715	4338	2455	5794	3850	3597	2066	1796	2464	5357	4018	4119	3236	5063	920	2920	4896	719	874
Row 17	3897	2058	4575	245	1452	468	4741	547	5542	1678	2058	706	5977	3871	609	2083	5015	4262	2419	494	5269	2066	5118	3162	3294	700	1166	4369	3668	5146	2126	2849	1845	4558	1855	4344	4441	4266	4300	290	5858	2404	5888	5820	3492	575	457	4263	5301
Row 18	5983	5258	5824	2596	4082	3498	1124	5717	5299	954	4883	5544	1133	3710	3438	5316	2116	5753	4372	3317	2105	1399	2185	3971	1409	812	1407	1317	1949	3077	2619	4564	2370	553	4892	300	5110	2563	4302	4223	4398	3379	1981	5787	209	3381	829	2225	327
Row 19	2552	4810	91	679	4374	3379	4529	846	4401	3758	341	1150	2627	174	1198	959	5435	489	1717	5443	3791	492	302	1219	5453	994	2074	2291	5866	2762	5115	4861	3668	4167	318	5075	5430	2574	4444	4958	5914	3537	4641	3963	4763	1134	3842	568	5219
Row 20	5676	1674	5800	2633	5362	2388	5920	673	912	1860	1427	5023	923	5178	2659	2206	4674	961	3480	3317	5268	1017	2005	3357	2514	2625	316	911	2635	1851	5668	1088	2370	4251	4686	1365	569	5650	2379	961	2601	2732	898	1670	1471	5642	3339	2191	4952
Row 21	2103	4504	5679	5280	4669	1954	633	1557	1926	1164	1445	3388	4596	2347	2500	2055	3098	5017	1312	1302	1120	4879	707	5429	5239	613	2476	3563	2677	4735	5785	3581	4674	1280	4124	5336	1304	1315	4812	1961	238	2437	2255	1072	3730	1927	5100	4357	4883
Row 22	3694	3964	1118	4220	4618	1678	3165	3115	2261	1792	176	775	951	5066	4061	682	3193	4351	11	1377	159	1671	358	1587	2809	933	1522	1096	4027	3020	1102	1448	700	2458	3348	5695	4754	971	5143	3973	4382	5147	5164	5155	3524	3217	1501	5484	5881
Row 23	5470	1905	73	1629	4394	297	2874	4381	4304	1295	4386	1435	3616	514	5658	3982	2042	1657	694	310	81	5468	5914	4316	4236	2057	4986	3478	5489	5502	4950	1966	190	1442	5266	1897	1817	748	5276	1430	649	3909	2277	2938	226	353	1386	4930	4550
Row 24	3512	818	889	2273	877	1901	2540	801	3065	1499	1830	514	2398	3121	2024	4475	5361	5778	380	230	1284	179	1558	538	2960	3539	1335	2996	2162	5187	2392	5288	3611	419	2103	1010	3395	3263	4592	4645	3415	5753	335	2942	423	315	4137	4306	312
Row 25	5467	5576	4887	4813	5772	508	2179	2437	1170	5016	2514	625	5525	3842	3992	4756	2422	5881	709	1477	4045	5640	4820	3767	3067	1385	1303	5859	5858	2043	5882	1727	220	2767	5376	4868	1192	5621	4553	5548	2864	1767	424	5236	5445	2103	4036	2493	720
Row 26	5483	5203	2713	5749	413	5927	1604	4722	214	3448	5071	3831	5847	2125	2450	75	2928	1432	4896	864	3284	459	5994	3804	5851	5530	1774	801	3312	2677	4369	4256	3041	445	324	625	753	1809	3237	5891	946	5119	2150	5747	1700	4928	34	3396	3534
Row 27	4701	1692	3204	548	4795	3678	2790	1969	16	1954	4391	3576	4035	1291	1938	2488	5842	4951	4435	5026	1674	2188	166	3671	4652	2196	2228	4448	5021	3559	1944	3945	4284	2660	4469	1774	4560	2331	4813	1815	1785	2142	269	2735	4159	3211	3996	3326	2362
Row 28	373	334	5654	4678	327	4857	3530	2762	1326	5544	3405	4399	5979	2446	5128	1799	5756	1272	2416	2688	1952	4719	1429	600	5496	2187	4134	4306	4745	2836	4988	3102	4876	3971	4284	5589	4339	4612	3577	4527	4168	1142	1364	2301	2731	5112	2034	1919	646
Row 29	2823	304	5047	4426	2273	2522	4321	1115	4204	2248	2382	919	568	383	4470	2721	1030	5971	4523	1844	5720	4570	2996	1186	4521	33	5291	5621	1225	4142	807	3685	1442	2413	5436	5748	5494	191	2882	2142	3455	4974	103	3170	992	2459	4324	4413	5814
Row 30	5699	1971	4450	5391	5739	3999	1215	1865	5830	847	4200	3426	530	716	215	4939	3592	1140	4409	3295	3062	1147	541	524	734	5519	3943	2956	4778	2532	1612	1047	4719	5424	2348	5788	2131	473	4635	5785	1883	5364	3141	2297	2782	3697	5968	4516	3158
Row 31	772	1631	4020	3707	5253	1172	760	2218	4420	2984	65	1853	772	1707	4865	3325	2663	2036	2734	1866	2521	3632	1338	1877	2281	3768	3978	3556	1782	4140	1438	4532	3273	1128	3104	702	3168	3849	5483	3405	2524	5125	1839	3980	5477	5961	3095	3444	1008
Row 32	1050	4294	4013	5944	5382	102	3712	4827	3153	5683	2382	872	56	4733	4576	1442	5126	2241	1435	3921	2880	5258	5031	2834	5076	2568	4423	3523	4957	3198	272	3736	2892	2713	5303	5158	764	314	2305	3153	4197	2091	1250	5531	1742	769	820	5857	5057
Row 33	1645	2121	3010	1098	2289	2086	1845	3312	5374	2791	3946	2023	4198	5680	1741	4764	2707	766	3684	5087	92	1712	4714	4853	874	5426	4600	5311	3998	2211	3903	4205	2488	4282	3445	1373	1383	1381	5151	3628	5080	654	4168	123	5757	4108	3686	4222	2455
Row 34	2496	5692	1158	5547	5051	3540	5728	5446	5445	3180	4550	4852	364	3420	1299	5119	4457	921	4288	320	3028	267	4359	5801	1644	417	1766	5759	3805	3978	2610	2621	2256	765	2683	4187	5712	4779	719	423	5802	896	4696	3192	514	5468	347	303	2955
Row 35	3820	5052	4791	944	4685	5420	5637	1526	5839	3034	1817	411	1277	546	5332	4782	3248	324	5347	4303	1674	2694	675	4976	4594	753	5433	3361	4410	2299	1943	3473	858	3225	5796	4239	3380	861	3290	4704	3510	2838	1443	2421	3551	3074	1944	871	1162
Row 36	4864	2913	5197	3388	3937	3919	1522	5113	2597	1243	302	3817	2789	5207	3747	1730	5149	2073	982	95	2057	3595	203	5073	3041	697	5414	3731	5960	1966	1260	3067	3434	5448	266	3795	4089	4356	4122	5974	2102	1433	5170	3649	2767	5076	1586	3012	3110
Row 37	5937	78	5442	4384	3948	4523	5214	2647	3402	2778	2062	3934	4287	1201	1985	2170	3256	1347	396	1119	2960	2566	4462	2974	3179	1169	5057	622	5859	4435	4470	2886	5919	3125	2587	1650	5322	2913	5609	5785	5880	5391	4291	2904	1814	662	3259	4893	3261
Row 38	4336	3272	2625	2666	4353	4696	452	5763	5507	2766	3379	4514	4566	3947	3828	4132	5844	4194	1386	3387	3640	426	2459	4526	1177	3992	777	968	1123	5211	3008	3107	954	4387	426	4904	1055	840	84	3791	987	2102	1843	1034	4866	1449	403	3850	5195
Row 39	1694	1859	4779	4374	942	1317	5687	1923	1713	3873	1769	5765	1735	2273	536	295	4884	5471	1597	2589	3799	2366	996	3557	1475	2511	1899	5218	4169	3453	5808	5092	2780	1933	4136	1617	5658	801	4539	3997	5068	4042	3368	920	1148	5909	2529	1301	1312
Row 40	1664	2950	61	4511	4696	1866	4120	85	2591	765	1319	5828	1933	5147	4428	1698	1899	2267	877	1518	2124	2154	4075	1892	923	246	3380	4527	1485	1367	4701	679	2565	4218	5990	2354	2437	4551	3769	1065	3663	1347	2672	368	4579	364	3327	3440	3415
Row 41	4622	436	1105	1007	5148	2185	5217	4490	1181	1129	4665	2913	1560	5003	2729	380	1739	3303	1269	2313	5608	2817	1980	3022	437	2683	1191	5388	655	1951	4408	5523	3099	2419	4112	1006	2088	1208	957	3491	401	2525	2534	2598	3262	668	3591	4742	2451
Row 42	1287	3264	2600	155	3230	1435	3649	5852	2612	4986	3339	3006	541	1983	3088	5382	5301	3658	1859	189	1591	550	5128	943	4088	1050	4840	3013	4549	4519	758	271	2079	2945	2982	220	2916	4194	1714	1269	4084	3292	312	5214	3480	4969	1406	4715	458
Row 43	3535	2588	46	3961	2669	4453	4778	338	5356	2039	4405	146	1664	5056	464	5757	4213	2070	1296	4286	402	2052	2592	169	390	4985	5313	821	975	4852	5434	4100	2280	1995	764	2317	4484	4579	4584	5086	1159	1439	1635	3176	5893	2785	4666	122	204
Row 44	2705	5874	5128	5559	1095	947	1172	2210	2503	18	3610	302	1635	164	5583	266	2645	2313	315	889	3231	2226	2346	2528	2125	4468	3544	856	5405	5660	4490	714	1246	5708	3730	4175	5774	5438	1897	4608	3852	3770	3188	4960	353	2282	537	548	4213
Row 45	1964	1649	5337	1659	5052	5780	3022	5867	669	5896	5938	1821	3819	2210	1895	2252	1164	5502	2823	5879	4551	5080	2839	5224	2710	2842	2819	665	5505	5629	3218	541	83	3306	1660	4615	4886	4303	3856	2385	5740	1173	1912	5702	2783	5296	3196	4940	4403
Row 46	2700	1162	1408	4589	5725	2173	1472	824	5299	5570	3970	2426	5332	4261	2548	1219	5133	2288	4345	255	2995	2449	3959	2115	1217	2928	2531	3243	4938	4916	437	4986	5232	4087	1351	4001	3630	5587	4944	4444	5727	665	5567	854	3350	4907	1512	1236	2609
Row 47	637	5200	1480	5855	5149	52	2361	1220	1146	2883	5070	2287	5071	199	5732	2057	1928	232	5512	2197	1089	4453	849	895	3770	5029	1862	2779	4262	3557	484	4456	5770	3626	553	795	4682	1668	5820	998	1879	407	4908	4439	3084	935	4990	5794	4275
Row 48	4066	5801	3919	3241	3676	85	595	1277	5593	5020	5581	996	892	2300	2804	5627	3390	3223	3559	3281	3455	4070	2073	863	5067	709	4012	5318	3853	5220	1553	4645	821	3635	1670	5452	3924	1340	1986	2131	4942	2527	84	5419	5203	5551	2316	1796	5056
Row 49	687	3627	1808	107	4626	3798	742	2626	866	844	4676	1167	4787	4203	1947	1262	3075	1387	3746	3914	870	631	1785	486	409	1177	4560	5227	3166	1639	3173	2046	3381	5930	2783	2101	4712	2361	5029	3165	16	1197	915	3693	2113	2515	2005	3366	1123

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.