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	511	712	4431	3829	730	1562	4608	1491	3582	1349	2917	5866	1795	4765	3621	415	2262	420	2648	816	2326	188	32	4929	3543	2166	5648	3791	924	5453	3296	3963	1257	4677	4939	1155	4959	1985	5438	2911	401	1661	5679	2772	840	3741	5661	1752	4416
Row 1	4503	560	3854	5572	91	2556	5534	3149	2619	2937	1123	2409	5299	5948	1541	2761	1688	2829	3901	2020	3024	2101	3048	1638	207	878	1416	4996	3924	1314	3259	2474	5643	2609	4547	659	4647	661	417	1624	3683	4278	5129	1790	5405	241	1254	3502	694
Row 2	4455	1815	65	2240	651	776	5371	3259	3377	3475	1226	4867	3124	936	5072	3095	4503	5506	793	542	4836	1182	2517	1737	4312	2450	5321	4458	4176	2339	1932	4487	2526	4456	889	5645	3834	4782	5948	1319	919	5895	2748	4763	1323	2219	738	1129	4799
Row 3	1921	5114	3932	5483	1297	889	1293	931	5149	493	713	3067	2965	2926	5449	3847	367	4752	1642	1566	3769	1077	2122	5432	2328	3723	5358	2169	909	5018	5464	2879	4945	4151	450	2216	2066	74	3688	2301	5132	4499	810	5171	5047	359	4520	299	92
Row 4	5681	408	5054	1026	3798	2249	2437	1198	2898	4310	1494	5889	5168	5194	1389	1305	2792	3043	1267	3924	865	2321	4971	5460	2358	3517	5170	205	812	3396	3115	3861	3330	2736	3392	991	2177	4394	1068	3699	4494	1576	982	1233	3495	203	1709	166	4397
Row 5	5509	4060	3497	4015	476	1028	339	4874	3938	2449	2937	1142	2825	1924	2002	3307	2614	5901	3559	1788	2984	549	1168	5487	3851	710	3266	3253	3545	1320	5141	5285	514	3144	570	2202	1402	5783	4290	1513	3605	4362	857	1961	4623	4173	2751	1316	1466
Row 6	4745	1343	4273	1635	2310	2590	963	4193	3359	3887	3732	1532	192	2336	3530	1266	2972	2004	2642	1256	269	3295	698	2638	542	3477	3951	549	3249	3332	1620	5208	3872	38	4677	1571	3825	1653	4365	4782	1076	13	4370	36	2442	1563	1905	3640	3144
Row 7	1588	4244	464	4271	4063	3021	2188	4509	5460	1812	2398	5726	4355	153	3585	3864	669	5002	4393	5934	3759	456	3352	890	618	3395	1367	3504	1746	2971	2881	2806	4546	3795	1649	4660	3595	2873	3007	1972	5615	991	4967	3135	610	2685	2365	37	20
Row 8	265	1096	4838	1599	5263	2374	5765	2344	1727	1893	3855	1292	5789	420	4027	2468	1356	2174	1198	4644	1796	2273	3998	1478	3034	1039	247	1626	5614	304	4169	3125	1808	929	2745	3082	760	745	5396	5303	2272	5109	4030	4074	4968	4857	5542	3017	4169
Row 9	2389	3664	4731	233	1711	3478	246	1884	833	5058	865	2258	3823	535	82	5081	3308	2755	4930	865	1328	5143	4918	1329	5861	546	5722	1809	161	578	3245	1524	3093	5711	2106	5752	5070	5910	5276	4875	1610	1664	3019	920	1972	1945	4155	4725	3675
Row 10	2775	2472	5148	3594	2944	5066	5407	2519	1417	928	4199	1070	2301	3534	2659	1814	1615	5882	5701	469	4183	5219	3820	764	225	2505	5396	3411	396	1999	513	3073	2506	83	3295	3624	3976	5359	506	4686	688	5381	3905	4305	3224	4088	1863	5230	2895
Row 11	4224	2679	3821	1602	1288	3038	3106	5504	5681	1545	398	62	1578	5406	941	817	4326	1043	5738	5255	1786	4865	243	4965	5127	4877	670	1503	472	1627	5650	1737	37	5840	4296	15	571	1421	2192	3053	3646	2140	1389	3377	1867	1762	644	104	3222
Row 12	274	5886	614	5133	1248	1377	1542	180	3422	4992	296	1807	3678	3214	4476	3727	2420	5086	3817	4422	5620	202	1281	4621	1245	1400	162	2264	2314	4571	5253	3310	5214	2679	393	3882	5882	3370	30	3701	3824	2950	1273	716	355	3130	5357	3193	3583
Row 13	2470	814	3138	4623	1062	3388	1354	982	3593	1798	2247	4556	1635	5677	222	1779	1425	2354	273	5510	4239	3784	164	3665	2279	1360	2490	5974	1272	5380	3826	2861	2448	1482	5783	3028	3609	1581	4458	4592	4272	1315	4408	3260	2164	416	5181	2328	5886
Row 14	4670	4019	4107	5589	1179	4519	1644	5064	422	1244	1953	4048	3947	3893	2286	2663	4235	492	4376	1652	2524	4787	3312	5153	2739	4599	300	1658	3133	3359	5883	2017	3156	1643	809	1228	5748	5718	33	3734	4471	1337	2546	1630	1072	213	4728	5557	4334
Row 15	152	698	2736	2004	5521	1186	5224	346	1422	226	5605	2993	842	4898	1380	5727	808	383	5782	1286	2532	8	4156	1338	1874	692	4912	2611	3080	920	328	1850	1298	2497	4723	4795	258	5368	3659	3971	1207	1861	5803	4904	2314	52	5723	4218	2971
Row 16	5343	4958	2699	4232	1785	1229	5966	5084	2840	5208	5615	3605	1718	4468	5218	122	2270	2932	5689	3733	4218	1206	4712	4643	2722	2663	2385	3728	1279	5631	803	1231	3432	1833	2959	4855	1209	4259	846	5257	2706	2941	3883	1458	2946	2939	5771	5560	3602
Row 17	5663	1726	1333	5399	1773	1527	398	3492	1561	5291	883	568	5452	1832	4173	2774	5074	1212	2353	5574	5330	5607	2453	3800	4347	5420	1416	3376	4703	5992	5322	4359	3984	3781	3634	4279	4841	1377	1254	914	4039	1402	1729	178	1018	5213	1067	2184	5820
Row 18	2486	3674	1607	4455	132	3708	2128	2838	5468	1814	1598	565	1976	447	5561	3185	1105	638	5089	5697	372	961	2902	5090	3294	222	1833	1447	5208	3585	5713	4299	3251	5079	5413	3245	5396	2179	73	5213	2787	2694	3218	2865	2146	5176	171	804	946
Row 19	1444	4930	582	3391	3190	3448	287	4552	5210	1666	5728	5803	368	227	778	4806	4677	924	5731	5177	5277	5089	591	5142	1578	746	1150	459	3142	333	2053	1275	717	129	954	4011	5822	5457	695	1663	5219	3987	4853	3371	2764	5596	5488	2535	4213
Row 20	231	2334	3132	2574	1500	81	4061	14	279	227	4018	2454	4332	4345	3535	521	209	2707	4339	3162	1069	593	864	1157	400	2983	1097	5809	393	1904	2522	5137	3787	2329	3134	1181	3876	2932	614	3722	2942	5449	5965	3146	4311	4587	156	1796	5399
Row 21	4634	200	5198	954	3611	3253	5260	3754	1586	229	2451	5296	3175	4317	5491	4121	1469	2578	4228	5291	5677	2777	415	3550	4143	1003	2864	1524	1521	3693	1778	1629	2823	1344	2543	5597	1943	2392	3682	5682	5176	3197	3967	2191	4363	2703	5963	4538	1032
Row 22	1524	1790	3197	3886	2042	2821	1861	1095	3978	3593	4165	3635	4857	243	3765	2606	4994	2320	3526	818	5892	156	226	471	4038	5969	1938	4413	619	5265	1982	4472	2345	4490	3822	838	2505	4408	914	2870	394	10	5254	3678	1754	4090	4776	4391	1455
Row 23	4537	2543	1468	1208	243	3740	4097	3260	4465	5806	982	5530	1860	1135	1150	3219	1739	5013	960	2632	3638	5618	2446	4493	2495	5331	2498	1536	2048	5365	2806	383	4820	5568	2327	4543	5233	1398	3708	1610	3602	4212	799	4456	2233	5266	2469	2799	3286
Row 24	2980	5534	4090	3425	58	120	1087	2993	26	3089	3393	2290	1280	2408	5880	5646	391	2509	3787	5943	4505	518	471	1735	958	3073	2790	2346	1144	2602	5195	2549	596	2287	5734	660	2173	2191	4071	2496	4207	4022	4718	1326	2559	1024	1371	709	5681
Row 25	1197	1290	208	5398	876	2605	368	5170	5272	795	5613	2699	343	2675	593	1210	44	3973	1053	4845	4969	4758	3126	4356	5058	4016	293	321	679	5805	5588	5334	3957	4135	2964	4741	2071	5185	2299	5495	1894	1726	3118	5696	2096	49	4365	994	3712
Row 26	5577	5966	2048	5173	4309	669	3745	2852	1518	2909	5802	4848	3634	1600	3046	3756	3673	5703	1831	4454	1727	5413	1885	1057	3202	5412	2437	400	2909	4350	1437	906	2720	135	3504	1917	5592	2974	5210	1170	3817	5773	4243	867	3145	5142	5408	142	1181
Row 27	2861	1074	1831	4514	3011	5616	2439	362	3862	1922	1210	2318	2888	5456	1375	5882	2656	2202	1888	4027	5939	131	2175	649	318	5308	2738	2256	2488	590	3342	2040	3852	2540	983	1691	4642	2124	2368	4567	5982	759	2333	2483	482	2536	4006	2260	3183
Row 28	5256	1083	4125	5916	5592	4851	125	2063	1741	29	2539	792	2569	3677	539	4220	2209	758	3517	120	4337	2681	2538	3955	2609	1137	5199	1073	4923	3843	2927	5284	2354	3416	352	546	1506	1435	2119	5111	2857	4008	5671	4831	1372	2010	2820	2846	5301
Row 29	4953	3743	1296	2110	4988	2629	84	2708	2163	4533	524	2291	1983	5623	5315	2615	5210	1496	4184	2298	2893	1758	3609	4251	3818	2734	1195	2242	4485	4768	2697	2709	2659	4578	2326	3614	5250	140	3246	2769	2707	2185	3868	1679	4731	2432	210	5058	1948
Row 30	2377	1149	5861	1764	1822	399	3175	5374	1050	2345	394	1563	5036	4192	2367	4451	585	5832	588	3730	2538	120	2422	5576	4558	507	2667	3059	831	2465	3931	1255	3969	536	1111	5786	4601	4485	5959	4395	296	4631	304	3187	5308	3976	182	2892	1117
Row 31	1824	2761	869	351	3819	1501	5699	5820	2924	4781	4632	598	2966	1387	3905	3102	1853	329	5324	3532	3251	863	2318	4257	859	4030	401	3165	470	957	5175	1601	3367	5177	4235	2766	1305	4229	3030	2478	4532	4684	2084	2290	4586	1332	4372	801	5752
Row 32	1649	2809	5567	215	4471	4051	1204	1244	3208	5122	2171	2224	4212	2991	565	2121	716	3168	3659	3697	3764	1787	4216	1736	1656	3612	4488	564	1021	4333	2514	418	1904	3833	4731	4443	856	2629	5443	4818	4223	1849	5997	2576	2156	4976	463	1518	5505
Row 33	61	818	992	3619	409	2511	641	5769	4880	2079	2222	4373	1951	3772	4424	523	5205	4495	3028	1308	662	3926	1697	4741	4820	1868	5383	631	2948	3449	4416	1262	1036	382	5452	3452	1506	2351	5931	3848	1832	1445	2385	3983	182	881	4065	1393	3223
Row 34	1638	2509	1732	5980	4592	1639	2024	1953	5439	2631	1023	456	1216	415	1299	3719	2010	3041	4141	301	3104	3698	816	5629	3850	1243	3812	5505	3754	3785	2641	3750	4086	4818	956	3504	262	5060	1869	5862	4593	4362	3653	3152	3963	729	3097	1200	5820
Row 35	1644	3499	1459	3670	1227	2229	4175	5115	3463	5931	5607	5560	652	5617	5712	3336	3619	1763	3281	1105	3300	2	98	4967	5814	13	1885	3158	1895	4422	1889	4917	5767	2824	4184	105	418	4797	3169	4438	1494	2878	3619	1040	5797	5860	3433	3140	815
Row 36	4092	3188	1597	3261	1274	3802	466	2081	2394	2786	2518	1654	2896	3617	4493	4980	5018	1272	2311	449	5588	1300	5227	2984	3019	2112	947	4391	1084	621	5725	1576	1276	2496	2288	5054	448	4691	1975	3275	1239	5385	5349	4471	2140	4438	921	4388	4397
Row 37	4312	5466	635	1613	3393	789	1339	3381	2245	903	4440	3980	5732	4912	972	4508	5531	3816	3184	3698	5842	3992	2560	1562	5796	5266	105	5073	181	5826	3768	1752	2363	5845	5414	5676	388	5514	2469	2757	2824	2030	1069	4789	34	617	2520	4182	5791
Row 38	480	5636	1395	2372	4310	2878	5392	303	1477	2249	5553	3075	4706	3317	4927	3588	2638	3277	2587	1212	5068	3723	2218	2621	3556	974	5828	4858	514	3973	1308	4877	3928	5323	4158	1227	1439	1129	415	5395	3589	871	1520	98	5011	2298	5112	3476	4742
Row 39	260	5594	290	2550	1326	4009	4388	3797	3620	4070	4106	5270	5293	4604	2346	3631	1267	5970	5955	77	4158	4705	5777	133	3772	1305	4525	2983	1811	5845	1788	4886	5730	1876	255	855	5203	1766	2349	2836	3878	564	5330	3683	5283	4713	2626	5810	4940
Row 40	4887	5520	5252	3099	3063	3802	2474	5279	268	5913	3705	5091	2891	5999	5811	2357	34	3855	5017	1967	4204	739	3365	3235	4804	1103	5427	1842	1144	715	4721	5351	5185	2964	938	3022	652	1984	4394	3378	3943	4652	3590	1290	1698	4289	3059	1725	1232
Row 41	5789	5238	5716	3817	4766	5736	4349	1464	2884	1807	3244	2008	4275	4628	4850	2547	1280	3306	1498	3815	4305	4256	2065	1420	3038	5076	4000	3350	2259	2425	4	1436	1042	2087	4327	5813	3551	2874	5048	185	348	2987	4018	216	3422	501	1436	2511	4090
Row 42	4011	5139	4862	4681	1862	2097	5984	1375	2168	530	2293	2331	3887	768	1102	612	1428	4824	2581	5447	1894	3843	695	3826	1471	2541	371	273	900	2025	3475	2258	403	1189	1447	5987	3179	1645	4550	1913	2352	3767	418	1274	2399	5516	182	2565	2739
Row 43	1356	2329	74	811	1893	5441	2521	3006	2934	1485	429	690	4433	2293	2405	4039	1533	3147	3035	1445	2465	808	1776	3730	5441	3527	4730	5030	5411	1321	3787	2404	2844	699	854	852	3212	3981	4918	2667	361	5673	3040	1358	2695	4382	4195	3121	2033
Row 44	5161	666	3284	4822	4474	3862	4255	1384	1238	5492	541	5165	3291	2586	4463	4327	1004	2781	1131	1096	2938	1703	5083	5446	2669	231	888	3574	2573	158	3351	2870	3408	4131	933	4133	163	371	1142	2563	97	1363	3709	4358	876	2566	908	1094	5321
Row 45	1941	2954	2331	4231	4892	4193	3237	3953	2010	693	895	4087	2926	1136	4604	4890	5150	3977	4399	1072	4451	4468	5936	5705	5375	39	2938	2653	186	3593	3242	3313	2493	5267	1080	4424	1073	4576	8	3160	4412	836	2330	25	3578	5172	2426	3920	3684
Row 46	4893	396	5232	3373	2875	1220	22	628	2154	3467	1710	4059	3064	1352	2576	3848	4975	5683	1192	4145	954	4130	4713	4617	3941	1118	2659	4334	3901	944	5458	2844	4739	4762	3339	4883	3361	4840	4976	5373	4493	1299	2934	4074	4904	5389	1297	25	3124
Row 47	1536	2628	3750	4596	5801	1732	4779	5766	5703	5959	731	425	1451	4035	247	373	4066	307	3140	4480	910	97	86	5865	4294	2119	577	5772	2185	2993	1739	3409	4910	2451	3917	4534	3614	4616	1628	4854	2351	4508	1325	4410	5183	2091	2244	4442	5691
Row 48	3464	1256	3781	1893	5552	3884	5637	2645	5349	2312	3456	116	3521	1475	2739	2841	5212	4774	3505	3737	4414	5094	2804	5214	1526	4794	354	1117	3755	2881	5101	4118	1900	5866	1945	5750	1881	904	1902	4533	593	672	3877	3490	5699	5078	2626	73	3670
Row 49	3989	957	2192	5070	4800	2858	3436	4833	1523	1146	3786	328	4511	2184	1571	5570	515	4886	1572	5093	1986	3201	4251	1695	5094	2807	4383	1043	1076	2468	4116	350	618	4551	1362	3010	2635	4641	2682	5507	1271	1137	5216	1092	190	35	5317	732	5066

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.