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	124	2879	702	5952	3452	1872	5874	3173	4666	3660	3341	498	1408	4290	3071	3773	5382	3382	5183	1262	1305	2038	1228	3633	2269	3373	3769	2984	1208	4337	3116	743	1009	5574	1022	1840	3101	2122	950	1258	3664	2377	3488	2154	2699	2549	2039	1076	4543
Row 1	2370	288	2074	833	5684	2803	1249	927	1754	3643	3667	2070	3502	4235	4937	1766	550	2834	1097	3674	1790	2211	5477	4654	1370	675	1684	467	5691	5440	575	3728	4011	3432	2548	4565	1314	5879	5442	5232	3471	4444	2853	613	1215	1963	5281	2824	5113
Row 2	1616	3556	3802	2903	2890	1721	4826	5813	636	5133	1701	189	2943	2916	3093	1750	5540	725	4471	4182	5009	1676	1019	4051	1988	2592	1841	2292	1434	4568	5622	663	4962	1583	1581	4170	1256	784	4322	3939	943	518	2832	4114	5878	4737	650	5749	1692
Row 3	2263	3609	4913	2827	4359	3088	2550	3737	1471	1343	5134	1480	5937	1463	1706	3482	2374	4898	5448	2142	298	4405	4007	3956	1581	5070	4732	1426	5783	4914	1151	1348	4929	2370	3535	3401	5858	5123	5474	24	3516	5186	1650	1786	2608	3340	5816	1370	4436
Row 4	5351	4095	2629	3273	5882	4459	3995	4833	3677	5314	1983	1338	411	4189	4930	1337	5037	3592	789	326	4763	3096	4429	4155	685	968	945	4102	3683	1402	3374	4948	5105	2584	1632	4467	1986	5786	4889	1158	891	5720	4217	4334	5355	619	4066	2974	336
Row 5	2924	5913	4512	4247	5561	715	2661	5061	2790	1089	524	5541	2955	5661	1053	5986	5705	2585	1736	3350	5625	865	3082	2947	1744	1772	387	461	1350	3106	2646	3195	514	1111	4304	4967	1903	1988	845	2916	580	695	5071	5908	5539	1749	3194	4886	2685
Row 6	4590	5148	2517	4480	2	524	5291	5645	1172	3918	3108	3966	4159	5249	225	2023	5252	4084	1994	1781	5935	1644	5760	1429	1438	335	1927	1901	2320	5092	3452	5185	1334	2403	4664	1764	2513	2760	4743	127	3751	1646	1986	4281	778	4967	1040	3376	1299
Row 7	1110	2124	4015	940	2341	3434	5497	3108	3781	4498	3140	5334	629	5451	4998	3439	4633	1449	1863	2010	1413	2821	5689	1256	2034	4501	5027	2122	4792	3170	1431	3130	5624	4796	1413	1011	4962	2208	5457	1862	67	3624	785	1273	1714	4475	4534	4202	3913
Row 8	3373	789	2235	2628	4916	2544	313	2021	4671	4500	3264	4841	92	3197	2119	1850	4930	3696	3860	1981	4782	5531	5109	2792	4542	2753	2548	225	3015	4935	2465	1136	2668	3796	505	577	2684	3595	2161	1953	668	76	1152	2913	1621	5777	3592	3757	5395
Row 9	1038	2723	4821	455	2542	970	4135	5829	367	5184	4598	2458	2920	3304	4092	5836	3374	1433	3280	2351	2125	3302	482	363	1135	1600	1267	5263	483	1732	1088	5006	3940	4741	5994	2340	649	4522	4842	5243	32	1599	964	3374	4492	4650	1873	635	3854
Row 10	3840	4597	4989	2307	5156	1443	4901	431	684	5869	1992	2533	891	5184	1503	5266	1012	627	5395	5871	124	435	3361	5310	2200	3372	5823	5427	5599	5054	5266	1582	1467	4419	755	1056	3568	177	1780	1079	4622	2946	561	1996	5683	2729	4823	843	4883
Row 11	1838	1045	755	4185	2523	1734	5937	4713	687	2585	4331	3299	5932	2892	4954	2960	2443	2731	5580	431	3347	4250	5333	4025	3078	3132	4056	1707	377	5013	1881	5950	751	1528	2660	1222	5021	153	2242	569	3922	4070	5652	3719	5176	426	635	4499	756
Row 12	5162	4320	4690	5092	2887	4527	2121	4921	5557	5228	528	60	1307	294	2934	4794	4476	3944	3794	701	3499	3180	259	2325	4949	4854	3290	3358	3801	4529	673	678	5709	4207	4845	1094	265	2266	3264	2925	4945	75	3051	1291	735	1410	3213	4382	4857
Row 13	1181	2946	3197	2301	1651	1654	3288	5934	4461	4894	4679	4185	4880	1606	5231	3950	1575	3685	2407	3661	602	808	3539	4868	829	4057	5472	1213	4758	1151	807	1153	5984	5110	4410	767	2335	5396	440	1022	4111	5781	539	5014	5852	4952	1256	5991	1017
Row 14	3099	2785	2279	1855	2466	5640	5235	5311	418	4210	2543	4275	2364	3150	5602	4461	3503	4818	5396	1618	1227	4435	3573	5134	5913	4741	4930	4925	3280	3135	1860	3498	4188	4239	5968	4501	918	5041	3687	5205	907	5089	1037	3038	5631	1362	3120	5330	2047
Row 15	1030	2302	2579	1227	2851	5958	2486	4279	3585	2426	2628	5734	1731	3519	4366	1795	5718	3280	1188	52	718	5010	5973	4243	5340	5733	3173	2647	5842	4683	5481	4228	1564	1902	878	67	3791	2229	5358	613	3281	1764	247	750	4123	4819	2310	2379	4630
Row 16	1420	5778	2907	5289	4375	4917	4035	1819	274	2332	1747	2010	1764	3872	64	5924	5035	3603	551	1871	2153	1745	56	2102	4616	1996	166	4019	5228	1318	5811	1060	356	5762	5336	1765	766	4306	3058	3906	2464	1578	1407	4099	86	4723	3352	1907	414
Row 17	3893	4253	5247	3777	3214	1816	4191	3710	4800	2748	2895	1918	1166	3332	5102	2345	3591	3145	594	5403	1553	2139	1437	3109	454	3367	2643	1529	1028	3441	4063	2175	3843	664	2519	3190	950	4189	3557	2507	3064	4180	4072	3283	4060	3906	2070	5570	3381
Row 18	4594	624	5890	5387	67	2178	4595	5128	3623	1530	1035	2101	664	4816	2706	3544	3552	5430	313	3475	4814	3880	4074	997	4598	84	4419	754	4610	3413	5805	211	2900	3446	4410	3560	1827	81	3184	284	4673	2840	4338	2023	5758	1609	423	3304	706
Row 19	874	2924	1491	3215	3921	5248	4408	4902	4633	1855	4215	1803	5327	4727	5254	3734	3784	1487	4369	4466	2571	5127	2724	2554	4752	4836	3655	5232	4117	650	233	5432	5247	6	4244	5803	5335	2840	5815	3966	1836	1823	5676	5300	5742	4423	3377	442	1296
Row 20	1833	5121	2613	5742	674	3172	3243	5128	4921	2139	236	5078	4825	732	3070	1390	5495	5865	5207	5137	4598	5573	372	4068	1047	224	5129	773	4408	4563	2842	489	2838	5540	2643	2123	3821	1537	4790	2653	2416	189	2859	3404	3912	2205	2506	1384	2554
Row 21	1022	4625	758	3716	5552	3649	1263	1347	2126	1279	3418	1227	2832	787	1356	2778	309	4792	4404	10	868	2710	5078	1805	2130	2075	3523	3034	3340	2010	5478	5389	295	914	3252	110	5914	5697	3311	1112	3991	5461	5548	3418	2337	1984	4772	3657	3855
Row 22	5917	2389	3970	5444	4814	319	2122	1083	881	3651	3948	1067	3948	3668	5433	5441	2400	3557	1000	5178	866	3808	5389	4229	449	4547	3966	1046	145	2828	1880	469	2472	2169	4873	3013	3369	3830	3499	4444	4067	2311	5621	2511	664	2506	1313	4518	2953
Row 23	860	3874	3813	4806	5545	2053	2130	5454	1205	2801	1343	5673	540	1312	4726	1592	3960	5197	2337	4837	3187	477	3544	5344	1962	42	1572	304	2654	5342	3730	2760	1525	1135	3262	621	5164	1575	2263	3964	66	3669	4417	3264	3760	493	5918	714	3735
Row 24	4655	2152	4606	4799	1391	4195	2633	4038	2933	5947	2780	3543	392	735	5607	577	4574	2689	5801	1648	3066	828	3828	1223	2035	3166	4851	4226	4278	4674	3356	3584	2054	1354	2431	5634	5477	1451	4093	5797	3689	3743	5412	2784	842	591	5208	5375	5297
Row 25	4797	3423	2815	5061	714	2133	1259	3772	1749	2898	4903	1235	1959	2266	3133	2211	1529	4058	2929	1848	4124	3459	3334	1469	2116	4711	1945	455	198	5218	4741	4640	2795	3504	4645	1287	5044	5412	4661	888	1988	4414	853	2537	93	3229	232	5491	1954
Row 26	972	5926	2461	3638	1007	1217	1908	1117	50	5238	4565	3379	2720	1092	5998	3709	3277	5790	2940	328	619	5059	3012	2896	1635	2079	956	2616	5151	1780	2962	4100	3400	4888	4714	559	885	886	4243	3144	1572	62	3061	4592	1687	448	634	5591	4977
Row 27	2627	2487	4925	1247	5367	4115	1210	5392	899	4240	2562	5773	2106	4942	1580	4016	1581	3764	5308	5572	3605	3249	5865	3469	2808	2623	335	1560	4918	5516	1332	3172	4698	2372	3886	5512	3655	476	3351	3121	267	574	4677	5636	1323	5979	1029	1052	530
Row 28	839	92	5712	1226	1813	1116	498	3560	560	3971	1802	5567	5045	4685	4045	1409	4828	2480	2069	476	2895	995	4720	3459	631	5694	2290	2474	1250	3685	2966	2524	5047	635	5824	466	115	3569	5609	1975	2579	5483	4060	2530	4004	3164	548	519	3088
Row 29	1877	857	3751	22	4905	4173	4789	1711	2609	279	4813	5666	3069	2258	5215	4015	3013	1053	2065	4299	2590	5468	357	3885	226	5039	3529	4058	1016	1269	4124	3333	4073	5740	2227	3536	3267	5885	2561	3131	5869	4333	5240	2601	1804	5931	3046	437	2612
Row 30	1244	3406	3919	716	5921	5492	2020	1978	1023	457	1053	549	1221	1015	646	5050	5242	3955	2411	2779	5370	5970	4030	3617	1377	3214	1999	5020	3420	4018	2974	3028	108	856	4338	3775	3606	4999	1820	4004	2700	982	916	1077	1423	1983	4511	5024	5410
Row 31	4002	2728	3948	4527	4803	4458	1591	3565	903	3758	4695	597	5958	5144	5947	4591	1342	2215	5225	2242	3083	2222	5227	155	2109	5319	1712	111	4368	1977	528	5857	845	4634	5866	2925	906	1137	1090	2652	2639	3927	1286	2266	1462	1050	3761	3735	395
Row 32	2017	5910	5250	5713	1605	5990	4108	3480	2941	2449	5029	1258	3112	4064	4693	5184	509	1560	130	2244	690	1105	1238	4488	1198	4342	3944	733	4567	1777	5601	687	3948	2077	941	4971	2807	5291	2290	1237	4758	3862	4266	1796	2966	321	721	5813	3678
Row 33	4587	2395	2742	4455	3071	3425	5619	1316	3854	3722	5376	5736	1182	2267	3577	1705	1474	1255	4853	5016	2298	2414	2114	919	3208	5399	1494	802	1233	2578	3297	376	526	4094	5773	5560	5701	2182	2472	1501	3292	2677	3627	366	632	5926	4975	1709	1775
Row 34	3936	1886	1923	3665	2097	4594	5169	4404	5635	5323	5128	5974	3305	3094	296	5719	3450	5741	64	4610	973	2973	4067	4284	5198	1700	3148	4949	5969	1707	4177	4881	1481	1372	672	4748	3472	5651	5935	2777	4944	3850	3819	2818	1750	5607	5980	4193	5930
Row 35	3548	813	3341	360	3321	1326	724	2021	2679	2814	5013	3076	1311	275	5447	2276	2030	4934	152	2123	3334	3164	2292	3956	3890	3725	4802	3548	4474	5376	2022	5378	865	3985	3073	1133	5471	2975	1289	437	996	3828	4720	643	4620	5008	351	4247	1638
Row 36	1067	1671	5569	4014	3775	2283	3141	3653	4595	1074	804	4519	4463	1290	4975	1824	3472	4350	1813	5817	2659	2087	1474	3881	2690	4709	5548	1356	3134	5357	4805	2845	3434	2036	1546	4350	2114	4468	4821	3823	3396	1743	1470	1095	3564	4630	5267	4181	5559
Row 37	565	2302	1467	2088	1315	209	78	3036	4635	3376	2720	5728	1991	298	3035	5819	1440	5922	1867	2889	1486	5730	2551	1648	1344	1349	580	807	3386	5734	2504	3248	3030	1427	233	1988	4700	3617	4806	4747	5395	5571	5968	4098	3241	3356	296	3178	1144
Row 38	2270	1613	4055	932	4836	740	2304	3844	4177	3203	257	5905	3516	3184	4341	5069	1851	3355	5810	3504	3481	5999	569	3857	161	2478	5332	3667	4883	2218	752	5276	928	5185	5943	4212	948	2870	5678	3721	4954	4522	1891	3598	3982	2877	3909	4177	3888
Row 39	2038	4326	898	4680	5981	2530	2669	2919	636	4769	4340	4162	1873	2825	4815	4295	5055	244	2163	586	4220	254	4024	4020	5916	5907	696	4964	802	2242	5800	1745	1199	5995	5900	3877	5397	1410	5620	4073	3228	4616	3814	2650	5069	5502	3932	1093	2733
Row 40	2421	1027	5781	168	2029	2277	1453	4410	5012	5192	761	24	2014	392	2040	2324	3701	714	2116	1803	3170	5467	201	3767	4367	5694	3525	3496	707	2537	3696	2975	2848	2082	6	1359	725	1343	4411	2146	633	521	4474	3687	3805	3086	2435	1703	1154
Row 41	1274	5504	4019	2920	5832	5158	4824	2574	901	5584	1956	1393	4214	3411	38	4988	2406	2531	5317	5652	2515	5068	2105	1698	2026	1042	3724	3719	2819	4090	5895	1912	5616	3427	4427	2974	4334	5657	3191	166	6	3031	5715	1793	5489	5787	1725	3846	5495
Row 42	4784	5868	5379	493	635	2375	5683	5149	2447	825	5477	5643	4818	1452	465	5693	131	5002	2021	3771	3756	1199	119	145	2251	5550	964	5717	5663	2519	235	1514	5593	94	3466	2662	4139	4561	3934	5480	4101	1618	5633	4314	2292	1496	331	1204	639
Row 43	1106	655	3492	1822	5018	463	3405	39	367	286	3397	1999	5028	389	5130	444	4539	2907	1041	4009	3954	1370	2255	522	2652	2787	5011	829	3259	1926	4813	3081	899	283	1469	3029	40	3187	4183	4778	5561	4970	3500	5684	1687	1729	2044	437	1637
Row 44	3342	5183	2637	484	1587	1022	5926	5427	2410	5699	374	3328	1046	3466	2789	1827	4040	1478	5392	1229	1253	180	1269	4341	1643	2197	3374	1915	4728	1971	241	4450	1274	2891	87	3683	1856	3081	810	1441	1756	805	4016	857	2726	2012	5923	5854	4421
Row 45	2830	1497	1938	3300	2788	1238	2882	3272	2157	3947	2007	683	5092	5475	3605	3192	2022	2524	2727	4595	3607	4381	3585	956	4551	5411	3522	4016	5024	2912	5323	579	5031	2956	497	4720	4396	3613	62	1053	4125	3234	5606	3982	5034	4027	3624	1334	1898
Row 46	4507	98	4947	5232	5593	5590	427	2845	1513	844	2047	2809	4061	5804	601	4020	480	5067	849	5362	2641	4259	3348	4658	3493	2474	4465	330	4177	288	3217	3968	4292	4918	699	5574	2076	3092	510	1305	2651	2229	4499	3066	3148	241	2314	570	3637
Row 47	240	5410	596	3943	4315	4365	846	4600	1441	965	5324	5971	5657	3058	2412	2554	3332	4738	4713	339	1508	4186	2887	1442	5019	5640	2745	2225	3936	4383	3907	4395	2619	963	1080	372	5915	34	3869	3016	367	5659	5260	2003	1396	2692	3111	4270	4724
Row 48	2353	1795	3977	808	5589	3435	1274	2285	1136	1708	2132	1131	3342	3242	3165	4761	3360	427	3308	4287	4972	3538	1953	2820	1553	158	1210	910	3295	1445	3938	4526	4554	1888	2500	2411	3779	4730	3458	4347	5510	5787	4944	4150	5363	5042	92	944	2955
Row 49	3689	4392	1766	508	1355	1706	4377	3424	5546	2985	2329	951	4417	165	5569	5239	5385	1800	1621	3873	5607	5116	4101	5391	1485	1633	1918	2586	3195	5225	5139	193	2809	5635	3561	3720	3323	5582	4118	3763	5436	1680	2134	1120	783	314	3774	236	1343

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.