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	2267	2548	3140	4077	1666	2575	4428	2414	1975	1670	1661	1134	3328	5618	2108	557	2110	3876	5175	4285	3176	4312	5464	2187	3197	146	1440	2230	3923	5503	5974	3584	3795	3747	3802	5548	1404	5067	5896	4219	4460	4647	639	5763	1678	1068	1558	2051	5345
Row 1	1429	4857	5131	4352	3297	2000	914	2992	5623	4974	1581	5947	495	3039	3898	3984	1640	4652	1445	2553	3141	4720	4599	925	5593	2914	4829	3834	4333	5347	99	4802	2261	4290	2502	5438	4858	168	5296	4369	1950	4350	3875	4511	3123	3952	2923	4147	5334
Row 2	3708	1123	4359	4218	2745	1682	4654	3937	1199	4082	2482	4247	2267	4849	267	391	3998	5934	4573	3396	1199	2022	5624	3739	3769	4835	4459	1504	3179	1362	3983	3207	4934	4438	4007	3844	3627	1348	2950	4832	1779	4668	2258	1565	5483	4092	4475	2890	221
Row 3	5597	5388	1707	577	2322	3259	3501	5897	566	3644	3113	4503	4053	2313	5306	1932	2980	5614	4466	5208	2993	4381	566	3167	2153	3420	18	2696	280	4179	1123	5350	5920	5877	532	4277	2509	299	4515	4924	4460	3966	2599	4775	3914	3651	2084	242	5721
Row 4	3348	3498	228	2794	5518	4735	3552	130	4127	2284	3168	5119	3909	1150	5193	1540	1831	1526	5029	5573	2139	86	3627	4582	5315	1014	3299	4778	3925	5615	2570	5806	2688	750	3256	234	3172	4415	1805	5249	4197	3665	3754	3241	4238	3629	4452	2802	2966
Row 5	4842	5152	3369	3757	5449	2539	3743	3407	57	478	4655	2944	2216	3996	5326	4999	4712	4172	625	318	612	5946	4390	2680	1922	599	1151	1053	651	5851	5868	5107	3292	1066	3536	510	3590	5622	2212	3540	4651	3313	233	4131	2820	4195	4530	2574	2034
Row 6	1213	989	770	5784	4297	4922	2406	2435	2953	4774	3747	3660	3758	4341	1692	3159	3906	2975	2610	5658	2984	4962	954	4294	5497	5042	511	713	159	5065	5327	2958	4911	4907	3477	5065	4536	19	1176	1848	2140	4298	3449	3859	4064	461	3084	5684	4313
Row 7	5580	5640	4330	3652	4808	5202	5896	1872	2113	5223	3522	3391	2977	1685	1523	1385	275	320	5578	5411	2008	2430	1598	1101	3200	633	595	3261	2467	2076	4884	5451	5172	4343	3274	501	3620	2553	5452	4502	2762	5930	1239	1380	2718	2916	1963	2684	2177
Row 8	2037	5062	2984	4825	803	3371	97	1324	5416	2809	5735	372	1701	1801	5952	2081	795	364	5253	4367	2736	3734	5163	3397	4533	4340	3814	1738	88	245	5793	3784	3374	2902	549	5358	392	5756	5843	262	3606	2830	2996	2460	5439	1511	119	1540	4938
Row 9	1092	930	4440	71	1640	5495	4631	1242	1399	3961	3859	1616	3690	4573	250	2147	3120	3840	1378	3629	4981	35	985	4106	5539	1119	257	1211	5959	2945	1091	3332	64	2129	3057	5482	5035	2851	2023	149	4390	2053	1776	734	160	2706	313	1560	1048
Row 10	5602	2087	1882	1235	1855	2159	5608	4932	1463	14	2538	1568	5714	4221	2913	166	3108	2813	392	3192	5038	4044	4066	617	5204	1172	4182	4149	484	2815	5020	2498	4230	5410	858	4360	5441	1917	1461	338	3769	2220	3909	3409	757	1854	3419	5893	3544
Row 11	5732	5899	4360	2366	4368	187	2917	1263	5511	5549	3554	1035	566	1029	2567	1714	235	2847	21	1486	928	1071	2999	2814	270	1108	3339	5945	5107	4523	3628	4953	3617	2210	1507	4135	3634	2737	5828	2406	44	4106	5016	5442	2738	5899	2027	942	3573
Row 12	5483	4103	972	359	4113	4907	2301	3716	3619	5541	1641	3264	3698	3403	4503	2199	322	3042	5597	3443	1897	3602	1933	5941	1648	2390	4222	3473	2456	2615	3775	1526	5332	1320	4146	5930	3230	4796	601	5128	5434	4292	1573	605	2000	2865	3401	2013	803
Row 13	5549	2252	300	1618	4993	1407	1749	2670	179	2260	3571	2253	1159	3931	2582	3373	2381	2314	1029	5220	572	1344	4314	481	1841	2833	4169	757	3081	5662	5852	163	666	5009	4724	1403	894	3296	4423	2690	5061	5501	3334	1775	4457	2640	2240	4471	938
Row 14	5423	976	1075	4534	2819	2211	4898	59	4612	5117	4513	3381	5923	2364	1178	3682	832	3372	2089	1736	1159	3135	5119	4185	936	4888	648	1495	4719	2570	345	470	3268	1143	626	33	4192	4346	1316	3426	5248	2790	5588	5677	4692	691	5640	1009	1438
Row 15	1456	2104	1130	2026	4926	5989	1204	2301	3928	4880	2900	3582	2950	1712	4304	2430	1482	1560	3662	4443	2811	4746	4249	2613	795	4034	5916	2119	2407	499	5782	4405	2154	1345	5734	2227	4051	2383	4253	1322	1810	4790	3129	2334	1215	3668	4872	4876	4792
Row 16	3011	803	2969	3289	3380	2338	5227	4300	532	1226	3955	4019	2523	3923	138	605	5663	2986	4775	2770	1283	3948	3383	1314	3274	4199	2695	4718	971	825	3742	5619	461	5322	2867	4371	845	3524	951	1314	4218	4648	4964	4150	5183	2801	5251	4351	3756
Row 17	5098	1575	5331	3615	3691	2779	2136	1567	1144	4215	59	965	5852	4846	1943	3479	245	153	5991	3240	1400	3163	22	3362	4219	3229	5981	2224	5431	4729	5162	1375	3042	5574	379	5203	1921	3964	2031	155	3056	2025	3159	4670	3107	1442	1237	1321	1957
Row 18	1526	135	4919	276	5908	1141	1260	3638	1213	4262	3960	1873	1407	391	3048	1319	5735	4311	3036	3782	5267	4031	2265	1789	3000	5890	1509	3449	3437	805	1511	5650	691	5187	5973	2356	2761	5492	5027	1941	5983	459	1518	1104	843	1087	763	1329	2400
Row 19	453	3924	5714	3039	2396	2158	898	5946	2076	4175	1712	468	2049	5150	5785	5413	658	3489	2503	1749	3474	4851	2679	5070	4473	890	5150	2019	2401	5441	324	5659	1385	3799	3863	5448	1250	1955	3636	1703	3192	2746	5470	5363	1857	4045	2743	1928	4856
Row 20	4721	5481	544	61	3225	2698	1065	1612	5554	561	477	4896	3605	4775	1948	255	3705	1891	3115	1759	4465	4915	4069	3693	2816	3205	2162	4200	3634	5277	5848	3226	5440	5177	3515	2181	2431	2113	78	2694	2465	3647	5506	4377	4291	2674	3956	1849	4545
Row 21	3683	2659	5817	460	2511	141	1451	781	513	2639	3749	1153	3157	4589	824	5440	4801	809	5456	3682	5364	546	2969	4251	4560	5180	4337	2191	5080	4236	5742	5609	154	3318	3722	345	3402	4787	66	823	3023	2577	4009	4655	3274	3652	597	3780	5042
Row 22	4575	4109	2088	332	374	4276	1749	890	4520	5471	4408	390	2256	1948	4726	2844	5780	233	3365	1616	3928	363	267	3084	5996	4785	5691	5458	326	4307	4192	5595	2694	5803	3193	2973	742	1524	2332	3667	4912	3677	519	2437	479	2495	5198	5606	1569
Row 23	2297	2404	3767	894	1211	4024	5764	4174	2381	641	1122	1240	672	932	3904	1996	2171	842	804	5609	5726	1224	3508	2524	2708	559	2176	3427	4293	297	1979	5263	4892	3171	4867	5623	2664	5811	2808	44	1956	5982	3341	5099	3800	5877	5677	5976	315
Row 24	527	3545	5652	579	279	1501	827	4358	1340	1127	1013	5462	2263	3763	2097	116	5382	2383	5809	4292	5301	2375	1681	3096	5511	2224	3738	1728	975	5492	4123	3729	4686	4992	2272	542	2044	2655	3540	925	1733	501	1197	1087	5342	4379	4953	3537	4673
Row 25	58	2233	1610	3198	764	4329	1753	3840	3411	5063	3563	682	4524	943	2204	2020	4413	3697	1569	2449	4045	3250	5712	1510	2775	2839	301	5494	5250	5134	3818	2011	4000	3600	1222	3530	174	2579	1656	5515	5857	3587	4080	899	259	5140	1360	1217	5646
Row 26	4022	1161	5854	2318	2483	3	982	2029	2843	70	5105	511	4586	684	5680	4695	1456	4864	822	1460	589	4631	121	662	5688	3972	877	5318	2588	4178	1552	625	2317	442	3919	4834	46	3758	5819	2921	3078	5851	783	177	3811	4881	608	1961	386
Row 27	4296	4627	5728	884	851	43	1222	3106	1765	5756	5526	5679	5006	4514	2689	3049	2923	1379	4871	4476	570	532	5677	1660	3604	5066	121	2047	3340	5618	4283	512	4481	4314	3105	3285	1075	2706	4666	286	5386	1075	1742	2334	3709	2012	594	5376	3642
Row 28	2884	3492	3140	5845	1911	4191	3051	5955	4062	3890	1550	1020	4221	936	3234	3166	3490	4146	659	5531	4956	222	1100	234	4249	3065	5252	832	65	3558	4469	2368	3959	5587	5899	4637	2164	802	5160	3920	2647	3997	4482	2794	375	3674	304	2728	1712
Row 29	2863	1074	3082	3970	1171	1603	5831	1412	418	5289	2189	5359	4070	5251	5700	3547	2045	1716	5245	3175	5195	5629	4592	3717	5437	895	1561	3102	3610	2477	2386	5296	1981	1822	5801	3759	1719	4201	4946	773	5554	1614	4073	3266	952	167	1030	5199	1768
Row 30	4409	4096	3691	2229	2497	740	4268	2422	988	5433	2580	3148	3294	816	1763	5922	1510	4478	1854	5362	483	2231	1848	872	4222	3945	758	2356	2404	5431	2353	1342	1108	3646	3754	5135	5321	258	1993	1068	57	958	5760	4951	5492	963	2524	4196	2438
Row 31	401	5373	2174	371	4197	3206	5148	722	5887	5327	3005	209	1143	3484	3401	1323	2485	4533	3036	3063	691	5348	127	5000	2519	497	3660	195	1449	1555	5007	5324	5126	2261	5369	5711	3387	1711	5340	3995	3227	5176	5062	2421	3319	4411	2026	3411	4544
Row 32	1881	2066	4763	2647	267	1067	2024	2365	2953	2151	3971	182	551	1820	741	4643	3563	3627	5333	933	4722	5969	3219	134	1117	4275	748	2791	5941	3447	4966	4935	4653	1563	1126	2770	3926	2673	5410	415	2549	726	4450	620	2068	5358	2951	4379	4570
Row 33	5603	4121	105	4415	4173	3311	1594	1566	1845	2845	5117	2490	2334	5463	4478	2191	5306	3287	4786	5112	1812	1620	589	1018	5984	5109	4163	1766	833	990	1268	317	780	4773	5168	268	5012	1317	3778	4026	5693	333	1325	549	1510	3454	326	1025	5559
Row 34	5601	2917	3310	370	1326	2013	726	5052	3440	5152	5388	4658	4153	1267	3867	3980	5313	1071	2305	4660	1545	5933	951	5929	5657	4279	1191	3485	1538	1390	3254	2545	2573	1792	551	134	5492	217	1369	282	4564	2897	4412	4231	5943	2390	3093	2939	331
Row 35	174	861	3782	3794	2197	317	2368	4811	4999	2548	2701	3507	5061	5724	29	4257	833	1917	4301	97	3663	87	110	2324	5078	65	4043	383	2079	6	5656	5640	2587	5341	5243	1093	1709	4785	5553	5369	2474	1356	3720	4919	2628	3388	5332	845	2832
Row 36	2100	1419	4888	5396	4805	3652	1912	4610	5773	3496	2159	1380	586	3537	5327	2351	5769	4804	3744	1832	5856	1761	704	1788	2123	2175	4434	2390	2044	4607	4768	461	5612	3451	4932	4528	63	1920	5028	2190	4062	2993	88	3789	952	1318	2955	1574	4975
Row 37	2410	4509	3442	2831	4155	1106	3122	195	4718	2106	1400	2152	1869	2657	3027	1704	5472	4987	3194	4612	3553	1472	69	5138	1868	1120	1226	5230	5352	1360	578	3424	2105	5106	5214	942	3830	5074	3718	2315	1477	265	3459	464	1567	4119	2803	406	3238
Row 38	144	1485	964	54	5618	896	2113	4593	413	4418	1755	29	4460	1196	4489	957	2775	5157	4998	1537	1399	3941	774	184	3783	3366	1203	3002	3306	299	2303	5089	5684	3781	3417	5652	4028	5520	4358	5580	1843	2636	4131	5310	2940	2951	4580	1353	1238
Row 39	2641	437	5189	416	1334	5125	1800	1118	982	3581	1304	932	5040	5888	376	4338	116	5892	1518	4917	3062	5148	2239	87	5520	4625	4397	2133	5454	3093	137	3208	2552	2450	5283	5838	5683	3969	1590	3652	1443	4865	5317	3397	866	2554	5274	5589	1251
Row 40	5250	153	5154	473	2002	1711	3336	178	5254	3879	3337	4474	5130	1471	3199	5351	996	4584	4980	3313	1014	2668	995	4564	1030	5347	2061	1392	3248	5508	857	5150	4770	1410	760	433	3570	4257	216	520	5551	5542	581	3825	3732	1130	5788	3902	5918
Row 41	1467	2843	4704	1265	1377	5532	2119	4905	2352	3092	905	2525	2687	5589	5592	2280	4071	4728	1792	4131	3933	4227	3138	617	4127	3130	4379	4198	2859	3535	368	2343	5181	5580	2404	3660	3414	5942	3879	1894	3629	1755	4518	466	5002	150	3016	5719	5456
Row 42	1405	5944	5864	1636	1778	1378	4744	4467	5214	3324	4642	637	1155	5311	330	4118	4525	541	2529	1982	3963	2706	5506	4532	4839	1987	1906	2463	5052	2358	4677	3211	1216	2461	2329	1964	5912	4702	427	4691	2232	5417	5977	2724	4945	958	3207	1024	115
Row 43	601	1220	4014	1734	506	3773	1378	3132	3733	724	4419	1562	2381	2039	1842	29	1189	5103	4093	6000	4399	3010	2508	466	364	2145	4189	2922	3817	1408	5945	3908	5553	4408	3509	831	1636	5749	5139	2142	4582	1992	5132	660	2219	4134	729	4422	5968
Row 44	4660	552	1835	3565	2176	1715	5559	4707	3612	4276	335	1834	308	1569	282	5847	3332	1484	5386	4629	4635	4633	4932	916	378	4222	4637	401	1110	3077	4758	4607	355	3939	739	350	4949	4055	5368	1463	4958	5834	5898	5033	4859	5622	2954	5734	1320
Row 45	3010	76	2395	3868	3973	1594	2636	5091	5335	2962	5381	5449	4131	2379	1291	2727	4849	3866	4981	2529	975	5538	3811	1579	2954	1932	3830	2666	5173	1558	3015	974	180	3559	4545	3342	5980	642	521	5453	618	4177	5932	2041	2644	4486	5776	2309	3447
Row 46	5314	4100	1771	1978	121	5445	3654	825	4533	4145	3691	1678	2994	5463	617	5470	4862	5100	944	4868	2423	1627	5818	4579	3303	1111	3511	5075	2851	5713	1376	135	2076	3171	614	2942	3165	2747	4578	2404	2898	1386	1878	857	5490	3443	3147	2423	4641
Row 47	5751	4595	4688	1057	4707	928	5972	794	3876	541	5344	88	3395	1597	2012	2201	4799	3207	5643	4144	2337	2179	1376	1301	2516	3325	4451	562	3183	1324	4749	220	3323	766	5961	4360	4454	1852	4531	2143	5819	3811	5075	874	3037	2100	2579	5032	4777
Row 48	4103	4663	1732	99	5095	2020	3668	2947	5894	1821	428	3477	1157	2183	4280	3409	5236	4597	2286	1865	3609	5697	2804	2251	1301	4009	1198	5553	1143	1663	1675	1817	4407	4119	4195	4237	1054	1752	1307	5091	1363	5778	2895	60	116	3052	1081	3639	3679
Row 49	1061	1304	2347	5746	4336	1299	981	4263	2756	4189	3278	24	5934	3086	117	4794	3241	4642	5541	3415	5118	4046	2977	1249	5348	488	811	1864	2443	2470	817	3536	1060	3199	4639	5282	3466	2040	1252	5855	2856	4810	4877	2592	1456	5200	1484	1094	3168

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.