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	911	1233	2998	5094	2249	5628	386	1531	1611	931	923	2724	4274	3712	3885	3865	2126	5483	3437	2908	5414	3378	480	2146	840	4673	1730	128	1136	2254	3361	4216	5139	119	2197	4092	5953	2109	3157	2481	4517	4675	2583	4255	2231	4745	5199	451
Row 1	4132	5604	4824	679	823	445	5852	5856	151	442	5600	4449	5034	2200	3810	1099	2540	686	4111	5208	1789	4496	744	4046	2707	5831	3095	1517	3647	2461	2736	4736	3732	1742	3552	3587	5594	654	4094	4104	3431	4288	4781	4255	1826	5032	5710	2596	5883
Row 2	5632	1698	2923	4582	5546	5666	3962	3451	1238	1062	2962	54	5921	2444	664	3556	4556	1037	4885	460	1011	2334	897	1330	5250	5816	1733	1574	1417	5741	3558	2465	4518	4501	1391	670	5125	1137	3801	1928	4314	409	141	1992	5246	3374	5676	828	5181
Row 3	1889	2744	2364	3457	5501	726	5471	4668	4017	3184	699	1490	4581	315	3119	3086	63	3847	4900	3267	2804	693	4643	5690	3238	324	487	5672	2994	5883	1708	1637	3641	2598	5117	1087	1856	4300	1445	3622	970	3447	1655	2437	4185	3575	3375	1658	3031
Row 4	2033	3940	2506	2502	2584	4487	2584	777	3341	3600	4471	1311	2315	3815	2678	5041	2685	5313	2742	2864	4569	3823	5714	2980	4977	4510	4449	4047	2848	3121	826	5204	5494	5935	1752	3436	3429	2669	2375	2324	1577	2919	3334	2940	2548	502	5648	3128	1941
Row 5	391	3276	4725	4047	4884	1646	5595	5318	905	2696	5727	1083	3516	5969	5703	802	2076	5751	4389	968	2994	2322	4911	173	5016	1406	5752	5999	701	5089	3075	5796	4196	4714	1039	5069	3753	3283	4060	3228	410	4343	2500	2302	2944	5933	3836	647	3460
Row 6	4529	4086	1825	3939	2661	1611	4188	1985	5082	1163	3439	3351	3033	1007	346	5335	5392	755	365	561	4512	2461	3430	4656	3422	3230	4930	1182	5069	1359	5880	1921	5526	2459	364	1309	3291	3938	789	1547	4832	5431	5028	3758	5679	5679	2433	1789	2601
Row 7	3190	9	1583	2478	5840	2833	5753	1737	3580	4916	899	967	5489	3564	350	337	128	777	2407	5133	3902	217	890	1080	1543	3036	5473	5455	5707	1350	5196	2867	1213	4788	4726	5104	2026	2590	1824	5066	5369	1936	1220	4646	1341	5676	3568	1361	4997
Row 8	5608	4262	4993	3856	3101	5881	38	3515	5525	250	3584	5499	1121	2564	139	22	1072	1553	864	5253	1115	4396	1938	5194	3165	1723	392	4998	675	5894	5393	4713	3358	1054	1243	1649	4057	64	5136	3336	1347	659	4986	963	1173	2931	1448	3175	264
Row 9	1015	2432	3120	4039	2425	625	4955	2247	1125	4208	4414	1462	2935	3328	722	3054	1999	4132	4862	1350	2150	898	1584	2476	2347	4164	1923	3772	3185	1034	3726	813	2581	4960	3680	3207	1347	3211	2692	4581	5042	5955	1142	5426	1762	5699	586	11	5451
Row 10	5189	4688	2497	4780	9	4269	5604	4168	3100	1280	5873	2721	5491	5529	1271	887	2320	5719	3821	4944	2306	3165	2997	1724	1371	2963	155	5029	3183	3958	4913	1588	2158	1263	2694	3675	881	5707	3882	2214	834	4721	4141	953	867	853	4293	4119	399
Row 11	1504	3075	1492	340	152	4123	2421	2582	1110	3250	292	1222	2204	2324	4659	5172	1424	3666	1154	834	587	1978	3059	3348	2130	3395	219	536	4609	2110	4409	592	4484	2705	2375	5933	3294	4019	5840	4879	1682	5427	3115	3182	2280	2327	4178	3390	3350
Row 12	2187	838	1440	4749	1421	1336	5065	783	2808	4723	2666	1460	1167	4168	2759	1281	1341	3359	5827	16	5465	5710	4853	3632	162	3486	5153	3032	1494	2659	3114	19	588	2862	2716	5409	577	5025	1257	3563	3867	1598	5165	4149	4913	2660	5630	500	82
Row 13	2045	2989	5933	872	1913	3281	716	4563	5718	981	3362	4978	764	5013	5299	2081	1723	1366	2887	1998	208	815	4576	216	2977	5191	256	1536	408	3966	5066	1216	4864	2866	5919	5991	2468	2500	1714	4314	854	1423	532	3375	2439	4712	4331	2793	1525
Row 14	3658	5441	1322	1777	4250	2684	1906	5056	3420	1387	773	555	5047	1917	5151	2675	417	437	4080	2064	188	1180	4549	902	3176	708	123	4026	3958	2628	4834	1853	1724	3244	3457	4264	264	1948	1518	2320	176	4421	4594	2077	4009	1698	4313	2956	258
Row 15	1387	1870	496	1963	4174	976	2069	2968	136	5281	2500	4594	1912	415	2257	3764	4492	5979	4034	5571	231	2737	4290	849	2254	2311	634	5020	701	2322	2717	2469	5521	3397	4076	1979	2102	5045	1408	989	5928	2303	4776	5785	1768	3472	5107	5636	5852
Row 16	2863	755	1435	4166	5229	518	3060	565	5517	1223	766	524	5604	4551	1410	4269	2147	992	4421	3873	2594	4608	5187	1897	1384	3007	2411	3365	240	4507	5428	2010	1204	2062	5149	440	1445	4859	3465	1764	3097	3070	1664	784	4000	1583	1046	5622	2158
Row 17	2405	1159	1911	4114	1380	2731	3009	2850	987	19	3922	555	4683	4610	2682	2592	183	5533	5741	4083	3001	309	1336	2646	4006	4253	5697	1960	268	5800	2946	4179	234	5411	5700	3575	5130	785	5063	5364	1309	2254	3810	5912	4318	3623	1571	2694	3387
Row 18	967	3909	496	2310	1961	3471	4602	2792	2878	5288	3962	4864	4724	718	5413	2305	444	1938	197	1682	3470	2628	978	904	5859	2640	5404	2901	2377	4765	1911	4288	2945	1621	3969	4203	3226	5119	2406	5821	2271	4375	829	2720	3897	4088	2213	671	3219
Row 19	1872	5769	4198	327	3906	5207	5135	3384	728	119	1780	4341	5027	624	3687	1211	2048	4617	347	4314	5695	1444	5194	2821	1507	4958	3509	5605	3312	4644	4662	5931	3660	4491	4699	712	3551	1761	4427	3407	3037	4456	5600	1023	2268	4308	1648	4974	5043
Row 20	3614	2625	716	733	1130	320	3638	4756	3736	4577	2124	2366	2172	4786	1377	5549	225	3321	2723	1238	4196	8	5226	702	1323	3038	4827	1313	3342	5160	4958	5710	253	4701	1790	3248	4793	3363	5495	1039	1342	1215	2870	4095	4196	4025	4213	3837	12
Row 21	5386	1933	975	840	4421	4309	5738	2160	2570	1107	935	2256	3179	3928	4208	2431	2430	2414	3361	3656	5268	1684	1241	5530	1274	5420	3934	153	5297	1390	1942	3375	4391	4239	4623	2777	1215	294	5623	110	4052	3386	5482	5849	2043	4376	1979	1799	4853
Row 22	5475	3319	2097	4802	5802	952	853	3206	2559	3845	4848	4562	1228	5109	1521	898	4767	3159	4546	3592	5464	4671	3190	4483	1946	2951	1583	1677	382	1819	2120	5984	3869	2790	4808	507	1329	3501	512	4493	5135	3584	1955	1487	5467	1241	2080	2008	1253
Row 23	5840	4053	2408	4341	903	1535	2859	407	5009	4394	2717	5783	106	505	3644	4575	2466	1687	5064	2118	5876	1340	5318	3496	5593	3015	4036	2901	5635	487	1730	5760	958	3063	4974	5038	1658	1375	5659	5653	5329	5137	1030	2812	4094	3530	5101	2568	3988
Row 24	2663	1503	3502	3317	215	102	2183	2008	3397	860	1051	1551	2897	197	4040	3110	5114	1093	1268	3094	2446	1221	529	5600	3829	5624	4238	5168	2151	1107	4218	2155	262	1952	823	3480	1328	4552	5002	4778	2043	2219	3727	1562	2286	1500	773	3243	3593
Row 25	45	4702	4893	5759	4087	5664	1498	4920	1902	4482	1947	2654	487	829	1833	1309	5411	3747	3064	5600	1228	3756	4564	4982	3385	3467	4562	1122	3270	5962	3132	2894	2855	205	3044	2548	828	3136	1752	4248	4678	1111	3208	861	4579	3380	5838	5375	2659
Row 26	5675	2279	3851	1684	5226	899	1177	68	5932	2316	5374	2842	5920	5932	3452	2469	2113	2285	904	4656	4145	5801	4657	2953	5159	3706	5338	2195	126	3082	3435	3088	2587	440	4198	5462	688	4894	1239	3262	1544	5092	1518	4013	3545	2804	5277	4443	494
Row 27	3953	2502	689	2986	5132	4035	4699	564	315	1985	1782	2929	181	1551	2129	5985	2642	2782	557	2010	4325	1077	3456	3042	3905	4030	3300	5359	1609	3896	2085	490	1443	3934	2413	1855	4194	3584	3683	2039	4764	5178	3134	3788	1193	5348	1858	2416	3825
Row 28	5414	2426	609	3408	1832	2288	5623	2595	3182	5613	3286	327	4541	5866	5225	5295	1688	4970	2784	2890	581	1606	5078	3137	2502	5146	432	3602	2459	502	5717	706	2164	1716	5970	1345	344	676	668	5996	2118	4041	4425	355	3126	3425	3853	3571	3927
Row 29	1721	1915	4262	4730	3314	1616	4254	4363	4186	2372	998	1318	1682	5426	3762	5069	3487	3745	166	494	819	2884	4484	2447	1552	705	4849	4964	977	4301	3453	3626	3419	3212	1243	5464	3871	4022	4726	1315	5483	2866	5564	1412	4017	38	3420	2002	2556
Row 30	2977	5131	2584	3630	402	1490	4231	506	317	4482	4671	769	5089	4344	4364	4561	3367	4176	1806	143	1372	2111	4262	4470	1733	5931	3180	3642	3735	3722	1514	4406	3570	1190	760	2702	3615	982	932	4458	4235	4373	830	1885	3558	4645	2298	1739	3786
Row 31	5014	1260	4352	5589	1926	4372	5262	3496	5227	661	3816	2989	1593	473	4478	4856	4058	2858	4923	1911	1553	1361	4257	5282	4210	1027	4205	371	3331	516	556	331	434	36	2742	1095	133	585	1803	3391	2346	3946	1593	5866	441	4033	5762	3248	2227
Row 32	3959	317	4471	2959	1167	5870	1596	2710	1834	5574	673	2328	1690	2216	1522	230	3525	3238	4300	546	2382	508	1418	4494	2017	2536	2364	221	3973	5132	3490	1861	1802	4016	376	4360	13	2831	4054	1139	1496	260	4031	3047	2543	2108	3506	1343	5033
Row 33	3245	28	139	3834	673	3784	290	959	2374	3001	798	1976	251	4155	5360	4619	4139	851	1297	5034	2165	5782	4379	3818	5494	3055	5671	1529	599	4571	3175	4252	3	2764	4776	4609	4061	974	3990	4599	5421	5884	3958	1992	3342	4231	1642	1271	3452
Row 34	3866	2663	3076	1268	535	5793	323	2858	679	3993	1651	1571	459	4272	1550	696	1192	4684	1139	592	5366	5376	3070	1967	3831	5066	2898	4525	600	4574	3665	3772	4797	3958	5856	3851	609	3460	1918	4678	5869	3736	4042	2185	2727	3201	4301	13	798
Row 35	2852	4981	5140	1212	2100	249	4435	4651	4535	897	1390	4828	2670	3297	3036	215	1331	3629	3418	2486	3739	3178	1450	3680	906	5448	5165	4626	4350	4892	3800	1635	5669	5743	5929	1109	2236	5988	5344	5608	4139	3590	5382	1343	3498	4640	4269	3947	5377
Row 36	4587	3652	255	1957	619	3161	3932	416	5867	1532	2122	2720	5244	4617	3297	5017	79	1142	1702	342	4397	725	5320	1403	1906	5140	4012	2367	4370	4076	4489	2010	5713	3149	807	3767	837	4145	211	2126	4492	2806	4352	2696	1791	4757	5277	5008	1533
Row 37	5559	5402	5612	560	5218	4102	291	3444	5476	4108	3148	822	2843	2653	4036	2024	2068	5421	32	1355	2782	3384	3713	5867	3504	4356	1210	3052	2249	301	860	5881	4531	2569	2970	1422	4639	5711	2734	1560	4143	41	2262	1858	3071	1919	1845	2193	4404
Row 38	269	5378	5108	2484	2980	3935	2870	4635	3379	5066	4405	494	2250	3782	3664	955	18	3296	5549	234	1498	2318	917	3951	2383	2749	230	3745	1791	397	2110	1463	3980	5621	3261	5066	5836	2680	183	5423	585	3715	2300	5674	1431	2701	4260	5601	2354
Row 39	2565	3974	2116	1648	3409	1884	338	2277	1534	5665	2845	795	3355	1342	4543	5915	4307	719	2469	1964	1605	4039	4140	5898	5663	1114	3583	2705	4058	4803	5345	1966	555	1103	4885	3852	2872	5521	788	5971	1461	5867	5693	3032	796	1043	581	4766	5548
Row 40	2573	1317	1810	3888	4365	3644	4927	4265	5238	398	3468	4106	180	461	62	766	357	3438	5058	1193	3345	4179	3495	1845	4232	2370	2543	456	1562	4607	4694	1935	5827	869	5835	5539	4769	716	1685	3963	3618	5981	1811	1290	5890	2658	2366	3019	3680
Row 41	1576	1623	394	264	2344	5366	2684	3039	2986	2787	1861	1980	4240	2104	364	5333	4259	5295	2189	4759	5473	1949	2214	498	3857	520	296	3563	1051	1117	1251	4154	2210	3704	3019	2480	2826	1470	2216	4537	5652	5835	3709	4898	3226	4887	5645	1663	5816
Row 42	1706	1206	1288	4293	2833	2037	5592	360	2374	2613	1032	4856	4730	5170	2952	5122	4400	5438	5702	6000	1496	5054	1926	5346	4993	3777	4214	4302	3035	1703	2569	3280	877	5517	4349	1588	5599	1142	2946	3985	2678	2892	2026	2611	2866	3141	1637	1169	5472
Row 43	1541	1087	4311	3015	1816	4459	2546	5229	3916	4500	2307	3918	2925	951	4215	4677	2133	4012	5209	428	1091	5657	5164	3353	4334	3372	5440	4536	1852	5318	1712	2014	3984	4827	2192	4850	677	973	3907	728	961	2470	537	3143	4434	930	144	4222	3082
Row 44	1696	691	3563	5561	2918	406	240	2551	2673	5458	3581	662	2595	4169	4475	5685	3514	1426	4174	2152	5982	4901	3768	729	4390	5116	3618	1262	4358	5271	4473	2271	592	3130	4148	1239	234	328	11	4982	2840	29	3909	5361	3221	1904	952	947	4301
Row 45	973	2404	44	719	5992	717	4924	2361	2546	4558	306	2040	2330	5086	3146	2332	256	1246	5679	3659	1600	2431	3871	276	503	4871	3801	262	4850	1446	3644	23	4587	82	1341	1600	3520	1685	3264	3465	388	4979	208	4922	5159	3645	5755	1628	744
Row 46	5712	463	4860	4052	3765	79	5960	5213	4935	5832	5710	5591	2079	2963	4986	5776	5600	1795	3287	1808	1135	3334	4681	751	901	1250	4548	3348	3375	3048	394	3063	2302	5931	4862	579	2473	3231	2018	2195	3789	5741	4593	1605	4349	5552	4751	4280	5366
Row 47	3588	4272	5643	653	68	5941	1332	3696	4313	5708	4621	3882	3440	4325	1702	2249	336	4680	5485	5683	4069	5609	5196	3057	2710	5097	3430	1943	3230	2214	3178	3286	5720	5105	2830	4355	3126	4743	710	3279	5694	969	539	5266	5118	2910	1537	3435	5346
Row 48	4725	1665	276	5126	5346	2950	2960	2359	24	4217	1606	1209	4336	3191	4319	4512	1587	4464	4966	2161	5719	1546	5640	5739	5322	2252	2351	2476	27	1297	5918	1008	5050	4303	269	2662	5049	5718	4249	4467	4446	2774	793	5610	5941	1156	2077	2100	1748
Row 49	5178	2032	3529	5197	1804	56	2347	445	646	2453	430	948	3666	361	161	5426	1795	1311	2739	5349	3027	2173	3198	4234	1816	1970	3375	1404	4618	5159	3902	5239	4943	3986	3358	867	5526	4566	5346	23	5222	1560	2335	4709	5415	5736	4195	3771	1700

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.