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	3612	3281	5239	1324	4853	2510	309	5844	1731	4559	4971	897	1903	5373	25	4834	2398	2349	1863	2014	534	1644	507	2414	3183	2046	2912	4311	2122	5333	1304	5734	2613	543	1057	1466	3053	1366	1309	4783	5924	280	5680	1827	5653	5705	660	2051	2053
Row 1	2523	4064	2587	4166	4571	5000	1348	616	1912	5659	2738	1244	963	2471	3857	1505	3528	5322	4557	4893	631	3340	4816	911	3020	642	563	2724	1302	2613	4776	3824	677	1362	1990	5247	362	3338	5863	2273	2996	2601	3516	3958	5071	1373	5463	2598	695
Row 2	4020	1490	1325	1360	306	2236	4379	948	2799	1102	2249	5412	5878	73	88	1239	2062	5335	1600	5399	5197	3873	2395	1797	1388	353	868	2761	5815	3466	3455	3835	4956	4780	5194	5261	1015	3573	208	3813	4675	2457	3224	4552	2530	3312	5790	4591	2646
Row 3	1390	3990	1843	5262	385	3640	650	737	4507	3410	552	1972	864	4386	927	5643	3580	188	658	1152	396	4470	5826	2852	1694	4378	5381	5005	4167	3972	1650	5557	1962	3493	4818	2346	1132	5468	3082	5638	2877	3633	1610	3741	2019	2537	3383	5598	2725
Row 4	4040	750	3120	2510	576	5972	4203	4953	5353	3208	3120	3324	4858	2676	5285	2350	1494	1630	3481	961	4712	3119	3838	2344	4729	1578	4363	1266	4961	3960	3990	3001	4710	1110	5510	5286	1081	3713	4238	433	920	1358	3757	5778	4033	3042	2127	5527	4671
Row 5	5608	487	3383	2726	4325	5727	1455	5902	4089	2720	4862	2049	710	1862	758	1820	1372	44	2900	5084	4281	3333	4	5638	1090	5781	3671	4131	1908	3197	2802	1515	3684	184	4241	2009	5910	5696	1910	3998	2416	772	46	3125	2634	804	4944	4005	847
Row 6	1844	3089	5128	5177	3093	4766	266	2874	2436	4396	4781	5633	1197	296	3317	1381	4536	5325	1290	4231	1235	5288	646	2006	5334	3771	4639	138	2715	2644	985	4559	5732	112	3735	2825	4877	4001	5698	1313	2396	4478	946	3593	4773	4263	4974	3309	3587
Row 7	264	1540	4822	5551	2186	827	4885	5957	5466	5022	2672	2109	7	1230	1840	118	4965	4665	4995	2965	4362	308	5361	2840	1254	2954	1613	5516	1927	4921	3103	2190	461	1924	1741	2646	2751	625	2603	2216	5647	5274	4324	5653	503	164	5771	5468	4828
Row 8	4766	2432	3190	5073	1793	29	326	4746	1641	5842	672	562	2944	2861	1022	4868	4602	3668	1618	5227	270	3834	4873	5543	2157	4526	46	2321	4297	5514	1149	3062	1946	4338	2134	3738	4367	2460	2483	7	2301	3154	568	5245	15	1590	4112	4616	5257
Row 9	5730	3842	5527	3563	2715	5070	5720	1241	5116	2041	5537	4629	3190	2599	574	1527	4732	4311	5894	1192	793	5900	3493	3947	468	2737	3961	2058	849	2576	1314	579	418	841	4141	3132	5910	3861	4373	5025	5902	3909	3654	3091	507	4227	4618	5239	2538
Row 10	4511	431	3331	4411	3923	1277	4878	660	5237	935	1509	1813	2249	2087	2230	3089	228	5362	2999	4089	3734	2023	3990	1643	5677	1080	2150	3903	5697	1389	441	4208	1819	3771	2618	5742	5048	1496	401	4285	2431	1909	97	4680	3995	2327	1769	4223	1689
Row 11	4767	2311	5423	790	300	1066	466	1380	3215	4369	1077	4604	4809	5284	423	2580	1902	164	1627	3397	564	5911	5828	2473	8	4507	468	2335	275	4690	4023	5042	1001	3446	5831	1300	4511	296	2680	1726	4664	3756	329	3473	3039	751	53	4940	915
Row 12	1679	2337	1478	1590	2165	3951	1598	671	4419	3933	946	3109	1956	5987	4109	5401	5817	5409	3911	113	2088	5636	4777	5843	5965	2249	2882	716	2301	1822	1630	3980	4159	3108	5570	323	1058	1168	993	5476	5100	1939	2584	1055	1925	693	456	1742	101
Row 13	4366	1854	2188	4002	630	2031	3967	2879	4912	4682	5180	733	312	3160	4891	3419	2730	5213	4477	3897	206	3953	2997	2145	536	4052	4069	1229	4507	5811	1329	2873	1665	3517	875	2294	5547	4842	5173	4458	3524	4352	5191	3835	1512	4082	1253	4241	3295
Row 14	5729	2137	3501	3681	5134	5645	4217	3185	3714	5446	1692	3524	774	4565	5188	4291	5440	1482	3837	4281	654	2295	1804	5006	1486	5638	517	5567	891	4757	2861	620	894	361	4301	27	6	2518	3212	3719	1963	4904	1242	2737	3468	430	1027	2907	1911
Row 15	4863	1188	2565	1158	2991	1571	2643	2629	2087	2210	3520	844	5071	4139	1737	5431	2439	1764	5437	4957	4976	3155	919	3879	4397	3655	1347	4826	4681	4254	737	3544	5441	3302	4701	2432	4872	1344	5060	959	3553	2579	1802	2623	718	3538	2054	3157	5302
Row 16	1490	2113	4277	4644	3032	2156	3041	686	3503	1867	5367	1756	2603	2910	1197	5905	1611	3628	4776	2954	2688	5734	507	5267	1535	3129	5984	5073	5182	3141	4375	672	5253	2652	5316	2284	4807	2356	2970	2309	4223	2336	4065	825	5246	5261	730	856	2889
Row 17	5506	3810	5576	5239	4316	4843	774	1445	4827	5847	626	1967	4221	1298	1219	873	613	3503	5679	2969	473	1988	1191	2808	53	2016	2053	5313	2745	2909	2202	2251	719	1778	1489	5034	620	2263	478	5446	2110	1104	1412	331	2401	2631	1203	3014	134
Row 18	882	5983	606	2869	1174	3413	2921	3189	5466	2234	5934	2375	4436	2184	3093	213	3673	2127	832	5936	2604	277	2046	3708	1689	2376	109	4319	3579	3123	4452	4460	3105	5057	1329	4278	2470	4250	1467	1936	483	1401	4310	4918	3584	1403	5131	1257	3529
Row 19	5962	1193	133	239	3238	3840	1927	5614	3948	246	3192	1070	4697	1651	4175	3754	2979	2452	224	1228	3919	2159	1711	5319	469	629	2903	1871	5759	4159	5400	5721	5352	5532	5959	2589	3372	1886	2202	1319	2131	5393	2389	828	1044	563	4581	4023	3015
Row 20	4804	5250	933	963	961	252	1431	1589	3154	3302	1348	1313	2702	1068	664	2234	1027	3253	5605	2912	5455	924	5042	4848	3312	5869	5891	3875	4449	3913	890	3253	3163	1823	4216	4123	2074	5647	5712	5227	2949	1059	540	5650	2127	1204	1883	3153	4456
Row 21	1488	64	3910	2411	5105	2757	5723	4973	2648	3598	3422	560	4487	675	3722	309	4890	1845	2383	4536	1556	1610	1484	2615	2149	1134	4741	3352	3017	1894	1808	4504	1957	5718	915	1062	2474	637	35	5121	4235	3457	5681	2722	4131	3403	3031	3021	5247
Row 22	5413	1557	803	1022	3040	3418	3171	4174	2159	523	1190	4052	2330	5694	9	2047	608	1070	4521	1245	1104	3642	5479	4560	3322	2200	2691	725	5230	5711	5971	4643	1267	774	5665	4307	4191	2835	2480	349	3358	3670	4401	5688	3363	4409	1735	3971	5478
Row 23	255	5215	582	3897	4694	5142	1219	894	1832	1943	124	1543	1914	4766	2809	2687	4431	1116	878	1266	3596	1227	4623	1265	5627	4311	4628	4035	45	2599	3513	300	1814	4095	4196	507	3236	5415	1401	5068	1357	1524	610	3271	290	3419	5957	4721	4534
Row 24	835	5986	2129	2062	4609	3394	1688	2919	2022	5723	2963	4620	3236	3263	433	1330	1459	940	4566	873	2340	3633	2229	3864	4242	5499	4154	1660	5456	2874	193	291	2860	2322	2352	1468	5715	4040	4386	1736	3762	1349	355	998	4611	788	2327	69	1727
Row 25	892	941	4066	4524	3170	1930	2766	2669	83	4425	2125	2957	4618	2415	5816	940	4766	1283	654	2806	5668	2390	567	1017	2745	1564	5627	3532	3891	5696	5258	4783	637	3324	3306	3807	5253	72	475	5336	4496	2599	2292	3114	5014	2107	4053	3780	3389
Row 26	4707	585	3057	1096	1151	4073	3841	2715	3700	1373	606	3396	630	5388	4032	3954	2694	1838	3207	2765	2313	2542	1261	4911	4834	4375	3924	940	2427	1703	4329	1133	2287	1385	2229	3438	5458	70	153	3158	1442	759	553	2072	147	4585	25	2840	422
Row 27	3232	5605	2735	5773	866	1645	4606	5240	5569	5546	1667	1272	3874	2800	3559	5259	5029	997	4716	5098	1150	1874	539	1908	2426	2610	2054	1010	2635	4894	1432	5866	4499	4167	5639	5364	5811	4244	4604	5380	3790	270	652	1664	3070	4211	922	2098	5207
Row 28	5638	1195	357	1511	1733	2264	3937	4342	4318	4947	977	3212	379	842	1710	4545	480	1074	4356	4724	5677	3735	2513	5947	4387	4176	3016	2597	5098	5113	1804	4735	308	2160	246	2040	4424	4182	382	2741	3128	1358	5953	3506	2200	1662	2051	2679	2735
Row 29	406	1402	2412	4141	3915	2359	2527	2091	5374	5123	1188	4487	927	5923	4794	3086	168	834	1509	4350	1216	4250	1478	2573	4202	4984	4772	5864	1034	1451	2599	1439	2853	5010	5579	767	1368	2106	2858	742	1228	4045	5229	2155	3968	4023	5240	4135	4857
Row 30	749	2485	72	4998	3962	2645	3200	2946	1417	3063	3979	2867	5661	5418	5719	4671	4996	486	39	1101	3343	781	2329	1388	9	4483	5355	4032	3723	3490	2888	4471	5974	2959	3469	3936	5604	668	881	1020	3731	4860	3886	3391	4277	3605	2062	3272	4090
Row 31	2100	4373	1432	2880	702	2819	2889	5184	2174	920	2907	5663	3808	1378	5637	767	4846	3572	370	5514	4453	1389	3245	3312	5275	636	1588	2879	2697	4859	968	4796	3232	2400	1676	3933	5218	4564	3116	1392	5484	23	1054	3291	1400	690	4057	245	4262
Row 32	4426	5759	2714	5815	3003	25	5089	3638	1612	1967	334	471	2934	5130	3702	5333	805	1634	4551	5368	4750	5943	4851	4772	996	2142	172	1686	198	417	5947	4624	175	2660	4438	3178	2685	3526	816	4296	5492	1149	4766	2426	279	2467	1759	1083	4101
Row 33	310	451	2851	252	5302	1622	1248	1443	1793	2933	1641	2209	2880	264	2384	5539	4702	5561	2223	2227	376	519	1719	1525	5284	4144	1804	1751	5903	2887	5852	212	3337	2702	463	2639	4323	1711	4082	116	4643	5723	2325	1522	5986	4709	1061	4688	4270
Row 34	3284	914	4646	3802	2632	170	3086	776	1973	4836	678	4860	4687	889	2197	1389	1352	4835	5712	3062	2917	5827	1705	2639	2152	3226	2625	861	4287	1312	5130	1570	2226	3775	5372	4857	3945	2457	5633	5918	1293	310	4777	5980	1198	973	1368	2550	5808
Row 35	1079	5612	2724	906	1316	5363	3058	4542	1988	3918	2828	3299	3047	4397	5524	822	3768	4381	4766	225	4013	4683	1517	4323	3459	1496	5520	4431	2864	2070	4239	3942	1681	962	4847	2996	325	1905	1537	2312	5822	4365	5611	2869	2762	5135	3690	530	3515
Row 36	2455	754	1528	1137	2271	5850	4596	3766	5370	3027	629	1439	1265	4571	3120	2227	3418	116	2551	5322	1653	4863	5143	17	4473	2011	2778	3607	5701	3308	1122	2155	4061	2650	3292	331	2499	1887	4097	1869	4913	4726	3308	178	3296	427	2404	713	543
Row 37	4955	35	2195	3818	5177	2212	2290	1188	4990	5897	888	2297	1019	3043	357	3668	334	688	167	2221	4785	2035	1134	3510	5342	1311	806	5769	3715	1518	311	2670	1552	2505	487	729	4716	2777	1917	3705	2674	2805	2	3692	5847	358	1359	180	1046
Row 38	1526	2400	5830	3560	3533	3339	2901	4844	4144	2670	2558	5662	2980	5228	1214	5485	5714	1943	4201	2491	3859	1906	5164	663	1907	2855	510	2265	4214	690	3310	5740	3090	3140	3299	623	479	200	5466	4623	2869	2024	4284	5848	1251	5498	5332	965	1441
Row 39	3532	3455	5299	5438	2618	5962	1344	5473	472	3608	3687	1161	918	3426	4250	4057	725	4872	4535	924	4338	3157	3792	361	1441	3640	1611	939	2972	2575	2379	504	30	1678	5941	2647	1640	1284	2120	2111	4892	5807	3271	5809	3233	1521	3865	3957	393
Row 40	2400	4881	4730	5557	2673	5090	997	312	701	1936	3284	3276	4314	3787	3305	5991	3728	5952	1631	5012	2072	3741	3903	1878	1012	3712	5110	2532	1577	3067	2925	3976	1947	1654	3532	4619	743	4529	4930	1443	465	2214	4719	4778	1	2023	4769	3728	1974
Row 41	399	2739	4045	4140	642	5923	5151	4353	5033	1683	5929	2099	4607	3905	4045	261	1436	2663	1003	5965	1593	2446	429	3807	1164	5207	3807	3187	3976	1534	5160	4375	4273	3205	2514	4915	3128	1665	3267	2160	3348	3196	4258	1955	1100	2302	2215	2536	4965
Row 42	3218	2501	558	5663	2929	4364	827	2136	2170	4013	111	3704	3173	4485	1977	378	999	891	3505	2663	4157	5664	10	1352	3921	1965	2452	223	4179	4987	5188	1396	1487	5745	1059	4416	4109	1886	552	279	5899	662	3982	3071	5147	5958	3448	145	848
Row 43	953	2808	5005	616	2818	357	4537	4782	2808	4760	2960	1795	3947	4356	3281	3692	5415	1697	1801	1300	2248	2079	1198	2910	60	4269	2056	18	1717	2201	866	2669	5008	5870	3285	1825	227	1821	606	3034	580	3566	4828	4527	1921	2109	2219	1336	3805
Row 44	4019	2635	53	97	3832	2962	157	2101	5017	175	3817	1218	1040	485	225	910	3769	2050	1136	5589	2656	4170	169	221	2998	4696	2142	5106	914	3477	2911	4933	112	2963	5029	3943	5925	5186	43	4942	5361	3860	159	400	4344	384	1310	2112	2433
Row 45	2445	1701	5088	615	1870	5309	3612	565	1450	2717	1479	4927	5628	411	5038	2591	5440	2981	2515	4626	3024	1456	3986	883	1615	4386	5226	1998	5695	1338	4430	2140	3039	3518	2754	4908	2826	365	5473	4276	3082	952	3202	2710	1362	2240	5300	802	5220
Row 46	1815	5427	2243	3270	3413	3126	4884	1798	2351	882	1493	3689	5311	3632	727	2829	386	5634	5655	751	5107	3931	3833	58	1132	542	1420	3372	5842	2221	2591	1656	1648	4834	4925	5060	1959	3809	857	4310	4690	2349	1998	4001	5981	2724	830	366	2358
Row 47	484	1116	1465	4414	4948	1522	5546	5490	2942	2918	5331	5162	5508	986	810	4342	5911	5869	300	3719	726	4609	2409	3075	606	409	3055	3330	1239	3421	5687	1722	4536	1152	136	3484	2673	5682	2973	5615	2599	2303	4777	2107	3289	5586	448	3199	5455
Row 48	747	917	180	5356	3326	3254	5962	3735	309	3291	4973	3729	2978	695	2265	4129	831	5748	802	513	2721	416	3111	5024	5193	5218	2312	4778	5665	5510	4232	412	427	4412	5767	3752	1665	5728	1487	1974	3019	459	5702	5997	1154	1966	4126	1984	1714
Row 49	4927	2496	4434	5343	5607	3457	4535	4824	5768	3313	4488	5278	1545	4900	5704	5956	4666	3456	1621	4394	4942	3594	1413	5400	3296	1409	553	5261	5534	2537	974	4461	5032	5407	3804	4638	2864	2339	3462	2632	5651	1949	1909	1195	848	1612	1151	5514	5067

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.