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	5809	484	1298	1525	812	1834	4187	4400	5567	4592	3578	33	1570	1819	33	3381	528	1232	5377	3720	3662	4576	4519	893	5587	5463	5437	943	2727	5223	1283	5501	5569	4781	2253	4219	1070	198	4869	2733	865	5289	74	2495	4149	1578	2994	274	3841
Row 1	4072	3734	3467	3393	2676	5694	885	4465	1805	432	4512	3917	4240	460	1094	4003	146	2325	1812	2865	4095	612	1569	4119	3848	3707	4070	1222	2398	3900	3787	4888	4299	5588	4299	792	1815	2500	1463	2415	3438	601	1152	2619	1251	4650	5374	5763	4803
Row 2	71	4103	420	3530	1286	3986	508	1481	2267	4976	2917	1946	2741	2439	173	1137	2003	818	4943	5445	1509	2012	881	4036	1910	4329	4702	4961	3821	4995	3418	1882	1576	5921	4285	5381	3094	483	1001	2491	1910	154	4032	5111	1441	4617	1168	999	1158
Row 3	2248	4405	3321	483	1409	4203	5691	1650	1425	3568	5672	750	3242	5577	4616	1094	1243	4201	3090	4715	5631	4522	4423	2467	5081	113	44	3595	5784	52	2205	1507	5994	5779	2402	3574	3339	2226	5716	289	5833	1034	2703	89	482	1463	5588	180	3760
Row 4	1682	245	4958	3065	874	2195	2979	2166	2120	2683	1584	3103	3693	3176	2422	1696	5958	1455	5759	4162	4861	4873	422	1556	43	1190	4584	5503	636	2453	1303	4890	2449	4988	1080	3642	4862	3917	5355	22	3350	3826	5730	2437	4522	5459	2947	3694	4733
Row 5	1271	1624	1273	2026	4908	3948	359	5996	413	4563	5079	5554	3737	3102	2116	2507	5611	2339	5776	1324	2626	3747	3926	2531	814	1950	2101	1476	2656	1082	5271	356	1499	2107	613	59	2877	738	1551	2791	752	2966	3660	1201	661	2660	3308	37	2694
Row 6	2492	4195	5068	3355	754	3154	5047	1689	2150	172	1420	802	1733	5329	2124	1174	1997	4302	5381	1032	2623	131	3801	1828	1475	798	1718	2905	1746	108	2990	4806	1618	1003	3375	3967	2820	432	1948	5422	5066	5140	1393	2002	1634	2265	4910	3200	5673
Row 7	3203	5231	2755	49	1677	2066	1576	5094	149	5400	2531	3922	5453	751	3392	5180	5586	826	4926	2333	4674	2726	138	789	1501	510	4059	5524	4052	1295	5236	2464	4931	4901	5015	2031	709	650	4483	1613	4798	3009	3010	3525	643	1412	4986	4551	1578
Row 8	3160	1181	763	2096	1407	2966	386	1077	5916	153	1969	4771	2280	5254	2160	1558	3828	694	5741	5235	3878	3539	1354	1240	4029	2399	2781	5779	1037	3215	4319	177	2342	3939	3066	4028	5	2049	3571	341	4769	3569	4171	3195	5495	1534	3652	5648	1796
Row 9	3053	5102	669	4867	5225	3804	612	5599	2265	3909	4295	4803	3103	3839	5378	2983	5204	2097	5477	2661	5361	164	2910	2770	5843	4775	1809	520	3019	4236	2021	4236	317	3658	1716	901	5571	4511	2710	2961	896	2643	873	5530	700	3227	4275	4166	1615
Row 10	88	1459	214	4539	1842	3395	4371	4768	5658	1797	983	5473	2573	652	4604	4857	2589	2260	1682	385	4920	3039	4826	2987	2081	4742	4487	940	1175	1344	1292	2995	701	2721	4167	5984	3485	1456	74	5628	2989	5815	2338	3121	630	592	2338	4456	5053
Row 11	2842	2623	2480	960	4242	966	1177	1760	4872	1051	1124	4033	3630	3060	3912	4879	5448	419	5128	1112	5496	1772	5280	2923	2395	4678	148	3551	2027	876	1983	2049	885	856	3124	1526	4122	5111	4609	1633	2251	89	3920	5494	2711	2798	2309	96	5004
Row 12	4129	4676	4418	5976	743	652	2822	5651	1136	2218	5164	3732	5664	2371	3601	5938	5982	453	5173	1961	4292	619	4648	1453	4245	4499	4936	2254	5695	1940	4218	5876	4074	5942	2923	313	2009	4346	3995	3756	5941	241	2552	762	2833	699	3264	3053	223
Row 13	2602	1421	3755	1583	3543	1254	5821	2765	5303	5269	435	761	3554	3818	4629	394	461	2542	3536	5019	379	3718	5241	3006	4277	2632	135	4723	1006	954	864	854	2175	2519	933	856	5758	851	5670	4773	1255	4774	1887	5690	2626	1416	4842	3790	2944
Row 14	1494	1553	4812	1947	2584	5398	5353	962	4921	5896	4429	578	3565	1158	1066	4507	2777	2232	3690	4088	715	2851	4630	2872	4786	2364	4999	2085	1701	1112	2573	381	2324	231	3423	2249	3122	328	2363	4764	91	430	3033	5761	3814	5516	4560	2716	1474
Row 15	2193	5539	4000	496	4322	169	5860	2957	4300	1911	1038	5000	3714	180	3005	1976	370	1622	2167	434	4945	2430	4345	5655	2688	3931	244	5862	118	380	4244	1553	5628	3696	423	3471	413	2944	3513	4940	2813	1698	3179	2733	2176	3889	4959	4928	954
Row 16	3799	2404	5636	4416	1126	4856	4987	1416	3424	4216	990	5124	2706	963	5505	2362	465	5858	1470	2676	5637	3388	5405	170	4817	3690	591	5581	5972	4184	1259	2213	3568	4823	209	3161	1143	2251	3347	1999	4304	2716	374	2479	2844	4832	1870	735	169
Row 17	5437	271	2747	3402	1734	4459	4395	1738	5095	1616	3744	4918	4479	3781	4928	4577	132	5209	2398	1211	3105	3917	2889	1332	352	2880	1594	3768	1176	2790	4575	3044	4715	1317	5097	4886	3709	1896	1672	2573	1505	5317	4584	5301	5672	5732	3801	1141	748
Row 18	4818	3525	4336	2329	1336	5150	909	3093	759	4558	2559	3278	543	5774	4729	1417	4946	438	3856	5071	5931	279	5988	4135	3862	1489	2017	2654	5194	3084	1503	3301	4851	2370	362	748	1270	963	3400	4552	1858	429	4482	2407	101	2539	3552	5784	872
Row 19	5369	3136	4650	234	1119	3094	2559	44	133	1837	1546	2853	4781	2648	1614	4291	224	4762	276	4073	135	3447	496	5734	2855	3635	261	969	4257	1391	5225	4548	4930	5535	789	906	5242	3878	2419	4549	5711	2411	2826	66	993	3719	5531	3406	4078
Row 20	5260	4680	2374	1324	1042	5153	2146	746	4970	389	5586	2189	755	5901	4306	4335	549	3016	4661	3386	3260	2459	3592	2640	5052	1147	4878	862	4119	3342	5339	5638	248	312	1213	4639	3535	2973	1033	4384	2778	1418	2339	3458	663	4114	2329	5782	806
Row 21	829	511	4478	3949	2036	2634	4152	5481	5118	2019	5495	1016	5134	3832	1373	1755	3537	5298	577	5508	2845	1417	3122	1058	1657	3581	2683	2459	1084	4162	4235	2861	4090	4764	4868	4591	3879	5357	3601	420	1192	4761	429	5635	5351	5136	5174	1579	4952
Row 22	4626	3943	1470	2876	62	5275	3797	4225	5485	5961	1326	5946	3322	383	2839	1669	3210	4323	1699	5905	309	3345	2651	2956	2717	694	2665	461	608	2789	5435	5027	3400	3941	3171	4744	4369	98	4968	372	752	5402	2458	3717	2251	242	1963	3857	3652
Row 23	3173	3370	4161	2472	856	160	1347	2015	852	1833	234	5216	615	978	168	5430	4548	5005	4975	785	276	1770	4301	906	5955	641	1537	4653	4495	1729	1324	5546	613	3481	4745	4636	4168	208	5943	1600	2325	5298	995	4352	1868	4631	2715	4640	4237
Row 24	4046	5140	1024	5152	32	3567	2749	5875	1313	794	1542	1572	3732	1881	5399	3495	3720	4933	5725	3533	4786	5690	1731	325	3189	2950	1219	4616	5777	2150	5117	1639	5191	1507	2352	4588	5197	210	2553	2659	4502	5179	5506	4356	3992	5894	1233	568	1335
Row 25	1015	2728	16	1996	2012	5973	5844	2672	5666	1161	3559	313	4770	4662	4152	1207	2790	1840	927	902	1343	1659	5839	3569	4312	1334	3561	2611	694	1052	5332	4497	1308	3533	3373	4319	1751	2972	3711	5471	4967	5457	4309	454	5081	2386	98	996	1759
Row 26	2582	3159	4581	2149	82	1736	2873	827	457	154	905	4862	2202	15	3136	5964	4309	2156	5797	5808	5841	2873	5541	2620	2962	86	833	114	2057	2780	5424	660	3146	2844	2065	4083	3571	315	738	1823	763	1227	1525	2682	1399	3294	4175	2748	1776
Row 27	4387	2504	3563	3650	5946	2194	966	3654	32	3375	1182	2275	1420	4129	2522	3329	4365	3184	5805	5703	1876	1113	2318	4396	459	2333	3572	1184	111	1714	1079	5065	885	5521	3989	2909	4760	539	5649	5638	4030	4141	5998	2305	4890	272	4839	2422	291
Row 28	5696	4154	724	3565	1205	1836	5031	4602	5269	4799	5420	5838	3733	4050	670	2265	1555	2919	3901	4274	936	686	1511	5871	352	4538	1430	4286	4449	4686	4869	674	843	5172	3199	768	4813	3499	1438	3290	3604	5212	5893	4540	62	1992	4232	4184	5412
Row 29	4377	3523	3228	3567	5171	4109	2909	2380	1602	61	5379	1687	2299	2870	223	1760	1441	2226	4460	1214	2558	1913	69	3765	4022	1265	4433	4558	2674	4745	4301	3591	4230	3146	1232	2191	2406	2786	2773	814	2691	5707	5466	3128	3153	5274	5400	884	1621
Row 30	4707	4882	780	2296	5404	2667	4632	5738	4837	3511	4825	5581	1847	1627	2769	2399	184	5607	5677	4880	4394	1864	3191	2142	2259	1464	1637	1783	2801	3715	3107	915	2698	3976	5569	4781	4032	5804	903	972	5680	5815	5433	5377	5852	3953	4622	166	4860
Row 31	3217	5389	2779	2368	5713	1981	166	619	2422	5957	20	4766	5243	1223	807	1017	650	1887	3402	4380	711	3393	118	3463	4476	3653	5490	816	842	775	5619	1701	3696	894	2847	1870	5849	5044	1392	2636	4252	2584	616	1571	5857	3779	3055	1712	3665
Row 32	107	476	4695	4932	434	1150	3604	5320	3572	3206	1490	3752	5419	5876	5102	5431	5859	1548	500	3657	3364	1812	5881	2156	5991	4552	2728	5231	2883	2317	1299	1831	1714	330	2016	5026	5050	1069	5238	4943	5870	3104	1744	3964	435	5197	3444	5262	3357
Row 33	5886	5995	3116	1239	660	1275	832	3354	3578	4779	4251	4262	32	5768	3059	1089	4983	1968	3056	3112	4234	3529	2054	2736	576	5652	2879	5588	1003	1038	1134	1433	3901	4116	2260	3357	3327	2531	2950	5295	5695	3232	3027	5318	4360	3732	3163	2173	4097
Row 34	5665	4568	2289	5291	5151	381	829	2774	4774	4419	1481	46	4961	2525	329	1344	102	3651	2820	2624	4667	1724	1517	5879	2880	3226	3408	4003	1104	4860	1753	152	4849	248	5849	3566	4897	3250	1556	3919	568	5398	5255	3079	834	2802	4846	1709	420
Row 35	5478	183	4861	1352	3593	2647	3146	5352	4028	2114	4209	5583	720	345	4360	837	679	4664	1927	667	1256	2561	258	2353	5828	5813	2226	3042	2810	5938	4786	1437	2101	2509	1939	2644	5268	2068	725	5727	5555	716	1057	3830	2190	4618	5053	2339	4899
Row 36	5912	2631	4144	3133	2463	660	3426	5913	5507	2049	937	709	4460	2523	3724	2375	5753	5087	3645	4892	2760	2459	4546	1166	5457	4836	1933	1235	678	5744	1397	1900	1136	4619	4464	3065	4925	4621	2599	2762	800	5797	4922	3928	3887	3385	5385	905	1682
Row 37	5011	4444	2135	3504	5084	2706	4068	965	4118	932	2962	5398	1629	3232	5974	3187	4547	912	4951	2254	3745	1914	3125	1801	4633	3070	1801	3346	3854	93	2188	2976	2060	990	4863	527	1601	3670	1237	5074	4391	1526	743	4516	3062	1901	2889	776	3122
Row 38	2635	797	616	5108	1112	5504	554	1381	1908	5457	2186	3789	5673	5102	4086	3955	1448	4799	1663	1957	838	813	151	2284	3678	5966	919	5624	4404	4588	3492	4191	90	2693	2926	4905	857	2220	4673	5253	5663	3025	4444	4745	5484	1740	4878	3187	5114
Row 39	74	1693	151	3056	394	1068	505	4164	5547	653	4151	3567	2388	2552	60	1479	341	5595	5141	3599	3715	60	5557	1489	812	715	3992	3984	5567	1884	4863	165	4100	4063	1247	2412	2578	1209	2948	1533	1462	1045	2818	4352	1017	5292	2923	2366	1690
Row 40	431	5994	4429	1605	3829	464	3618	2388	158	1578	816	426	2166	3925	1340	4990	2544	5780	598	1610	5952	5237	5225	1482	4457	5804	5837	5923	441	3658	4623	421	3135	486	3647	1446	1212	4399	5053	5978	3052	5443	5320	4336	413	390	5431	5673	2641
Row 41	4258	2699	1153	5370	4362	2290	1869	924	4665	2443	1531	1406	1645	1375	1441	1262	5634	3771	4129	4987	5957	1583	1098	3916	2323	4871	2645	1062	3520	5805	2437	1481	484	5094	707	2625	4932	5338	720	467	1775	1726	5105	5296	4786	2335	5266	3611	3262
Row 42	5604	1673	3190	3942	660	3124	3726	5813	1457	1679	2475	4676	3768	5356	1791	464	2970	1921	4232	216	623	4028	1696	2955	2417	4160	5416	1587	2822	118	3413	3915	3069	5687	1042	4892	619	4020	1551	940	4487	2280	3135	2989	3391	4109	844	315	2011
Row 43	1872	5574	2464	1271	2287	2338	1868	4768	218	2768	4924	218	3063	5048	3308	3310	3737	4228	3812	848	3990	4843	3961	228	377	1657	5249	5491	5436	5696	3140	3263	4669	660	5579	4904	143	135	5649	2346	3364	4655	5143	3375	4563	3776	2660	998	2805
Row 44	4878	4626	3475	4881	2464	3416	2822	5150	3570	919	3935	235	981	1169	3838	4965	2352	629	3378	3442	2097	1722	4979	2648	4046	1910	631	3993	4077	4246	418	196	3827	892	2795	3700	222	828	3621	4631	5706	1496	989	5001	3975	2202	5056	5226	1795
Row 45	1518	3543	178	2046	602	4813	456	2923	2280	4752	297	3497	5344	3720	832	1256	2492	4765	5735	3811	3547	4552	2782	5253	1911	3161	5147	5767	3929	3326	1544	1522	2224	1772	2254	3317	1291	3376	5681	3608	5968	5314	3733	4208	3512	543	2891	4789	5841
Row 46	5147	4863	2669	1863	4974	2852	642	3625	2308	1699	598	2521	4301	5195	1567	1165	5989	3229	4786	2114	1113	989	1766	3295	1483	1655	5041	3149	5149	1989	5566	2416	1873	550	4166	1647	868	3885	1754	1250	3143	2515	1134	1822	903	4092	2862	1310	4023
Row 47	4084	1908	3786	3993	5961	2067	588	5983	3334	5960	4462	2559	1932	4826	5478	314	1659	3299	1223	2236	4798	3069	2388	4091	624	631	1421	1275	278	2113	5226	2321	2391	625	4057	4946	5088	3828	1671	4866	1550	85	3774	3181	2620	364	3353	2322	1750
Row 48	4698	139	1599	2100	5722	4350	1157	2139	5710	2382	3113	5084	2193	655	674	634	716	1932	1731	2976	91	842	3548	3488	154	3132	4250	3541	5789	273	3242	4174	3994	804	4433	51	3485	2303	2611	1316	4690	3427	5570	2215	5258	103	3863	1695	1735
Row 49	3684	1522	3109	2793	391	2351	5739	4845	175	5953	3339	2912	3674	5206	5803	2240	959	5573	5657	187	3618	5347	1564	3403	787	4356	1665	4560	4274	808	3423	4243	5450	3368	3801	2533	4933	1257	5369	2853	2799	5241	3170	3775	2119	5606	1524	2315	5482

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.