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	1176	5394	4687	3098	5784	4436	3890	4582	864	5741	1963	9	2347	4885	4936	4473	2680	5577	5371	4273	4137	4848	1762	866	2244	3789	2560	642	410	1581	4112	1586	974	2798	4684	758	1234	2573	5340	2097	2314	1302	2105	4661	186	1041	3133	2865	617
Row 1	2503	1138	4754	1351	2899	5619	3595	687	2179	4236	1097	3759	2348	2682	4733	5146	1366	5490	379	3938	4829	2476	252	130	4581	4912	316	5621	2045	3181	238	4548	4318	4992	5898	1216	4610	3493	1902	789	1729	2999	4547	4076	5680	3279	3222	1046	2769
Row 2	3600	4983	1598	76	5234	1728	4656	4146	2043	4276	190	5223	4513	4737	3541	3504	4635	4756	2114	2127	658	2902	3856	3656	1449	1931	3336	4728	5153	4381	1496	2753	3364	3094	2828	2598	4821	1483	743	864	5759	932	86	4272	5668	3627	1776	4302	2382
Row 3	3890	429	3040	792	4284	695	2240	215	4031	968	5367	2411	2464	2119	5775	5557	4947	2372	4377	430	3114	5240	189	4045	5326	4460	3713	2952	236	2015	5334	4125	2444	2373	4916	727	3068	1156	942	1098	2123	309	3509	4586	2428	3283	4142	1374	5655
Row 4	2519	1803	2768	1759	1991	813	1085	451	4525	4037	686	540	3371	4811	2983	5743	3727	3709	2810	4883	4651	3908	1005	4959	1416	5591	1386	4699	3733	2760	4353	251	4563	1121	2010	554	1933	3095	1004	458	1132	1690	997	4502	501	3979	4244	4227	1688
Row 5	1054	3109	338	4962	4114	5297	378	3704	683	5076	1436	3442	3429	1687	2004	4550	3697	2558	483	792	3561	940	1923	5251	1937	424	5752	5915	4668	3979	1603	5722	1088	1941	4683	5201	1237	5060	2905	1919	4136	4341	5361	1565	28	1365	114	3725	3922
Row 6	596	4516	1483	1536	438	733	3472	862	485	3387	5530	4463	4989	5251	5550	930	3933	4751	2166	2993	1656	4085	1128	5997	3445	2692	24	4809	2805	3749	2730	3401	2264	4212	4936	2702	4945	2407	3564	5429	5794	3093	3892	4783	2343	3442	5712	276	2192
Row 7	1878	3268	3848	5962	4396	3844	3407	1087	3867	2215	3892	1615	4945	1292	3879	3157	228	581	2101	2634	4144	1530	2428	1236	5421	1210	3579	2863	922	3854	5054	2799	1122	2902	2760	5517	745	166	603	4611	2381	4495	226	1325	5786	4105	4481	13	4685
Row 8	582	2647	2828	2111	5075	4064	1532	284	1643	4394	1205	5497	3448	4004	618	349	763	134	1093	929	737	5704	3309	5231	5930	4634	5017	4035	3114	5030	2719	3696	1677	5547	5807	751	3611	1338	1034	5253	5732	2239	4749	3180	243	5367	3529	1005	5501
Row 9	4622	1934	237	4326	5242	5468	4255	3876	4485	2290	990	3514	5008	4685	5190	4555	4491	5941	2165	5829	975	1418	5560	3213	167	2740	3455	5533	268	4460	5033	4889	394	5270	3214	5635	4738	1469	3511	3222	3758	4500	736	2766	3184	5926	1320	1675	5866
Row 10	3485	1503	840	4903	1063	4053	5069	3802	1508	4601	4069	5968	3634	2958	361	2903	172	5996	1640	1641	3506	4862	5399	2005	5597	2165	5189	5522	3484	863	5388	969	2365	228	5871	3427	4280	4939	1229	5788	3540	5298	5755	1173	2255	115	4075	2427	111
Row 11	5715	4067	3616	4576	3466	5621	4172	5630	4810	3694	3114	5672	3082	4082	2037	3309	3953	5464	1589	2891	692	1376	431	5989	1131	1603	2244	1246	5677	4670	1356	5392	2737	4972	3967	202	4593	2139	5832	3402	5833	2945	3074	2914	1026	5111	222	4979	4574
Row 12	1811	1870	5266	3186	2300	5255	4316	3902	1498	5561	3579	168	916	2970	2904	5888	937	3106	4480	3075	2937	1881	2907	5881	4954	5820	907	4065	42	5885	2638	1852	1755	1904	5037	4054	1158	3353	1955	2655	2913	5534	2822	3829	2503	5726	3716	3440	2831
Row 13	2196	514	5768	4076	3420	5649	3030	3240	555	1094	3281	440	3732	5133	2194	5635	4170	248	792	1522	2203	3446	4435	1736	268	2264	4239	5994	5980	1678	2824	2175	2191	2592	250	5611	2240	3280	2850	2795	4373	131	3235	2104	5263	5429	1738	3432	5676
Row 14	2530	4954	1878	5976	3389	3613	243	5652	1852	236	5631	3529	3060	1806	5720	5652	2056	5330	1891	5335	2180	4685	3708	2310	1920	5811	1572	1348	1549	5004	1023	4078	3957	2900	4053	1345	513	4296	997	2364	4532	628	5893	1592	2433	5612	1243	4489	4942
Row 15	3134	3823	1121	1819	1531	3430	3738	1341	5002	5085	2890	4006	107	968	1963	3007	5021	3308	3520	3317	4304	5884	1849	4932	5777	3440	1365	5388	4683	5853	4330	1816	3676	5450	3634	5206	2880	1371	547	1882	455	3436	5887	562	4404	1850	3569	3424	5157
Row 16	1089	741	3460	972	2589	2392	748	28	3756	136	4710	3608	4465	526	1283	3915	4159	488	795	5529	1034	2676	5984	4470	2563	546	2873	4412	4114	297	3568	5202	1038	1028	174	3626	3419	922	3654	1174	1058	2364	4782	5523	2889	64	3437	1048	552
Row 17	4232	576	1586	907	560	55	3470	1105	2928	1881	5219	3225	5449	4421	4262	476	4594	1887	3895	5516	5540	5069	573	1904	3850	95	4792	3914	3532	5839	4466	1763	415	51	2670	975	105	139	2079	3033	2020	1297	257	1468	5717	4518	1943	4311	405
Row 18	5838	3826	5945	4906	4399	1848	2756	4493	640	670	2024	478	5136	3787	893	5186	456	1867	5291	595	3946	2323	2614	5243	2580	4081	4960	1097	24	3270	1502	5862	1096	1446	4768	5494	3293	1524	3986	3932	2193	10	4410	1328	3797	5303	514	4253	1169
Row 19	5804	4848	5114	2127	1461	4357	4707	5542	3316	5803	5566	585	1304	5427	1681	2750	4194	1174	42	5718	5160	3974	1911	5170	2384	3239	2967	1686	3752	1219	2854	3556	66	1968	5683	1527	324	4389	1069	3640	4192	634	4224	5496	61	5905	2245	4255	1079
Row 20	2286	3972	238	260	5882	5408	2643	3120	2374	4328	871	3593	1182	4427	3659	3150	4109	5185	3473	2498	253	1112	689	887	5336	184	947	5241	2428	5201	319	4714	3172	557	4973	3053	5964	1616	173	2338	5943	1044	5931	1125	5470	3589	4274	3579	2774
Row 21	1747	76	3027	2859	764	3913	2195	947	4859	1435	3375	4060	1753	2088	1231	2310	1061	4284	2273	2677	4456	4611	2620	5500	4541	3744	4969	2130	2017	2547	4903	3763	2623	1929	621	3386	5842	2816	4333	4700	4250	1708	2760	3	3796	3991	2312	4857	2274
Row 22	4585	1533	730	3195	4152	229	1736	1895	5198	3865	3912	1745	2768	1675	4367	4696	2296	1753	4537	5111	86	3237	3360	1794	5997	3362	5589	3987	5673	4445	261	4258	5977	991	1452	4129	1219	3188	23	417	1053	3935	2162	3820	5609	529	2516	1904	2282
Row 23	1052	1014	2367	4289	4374	4161	4285	1736	3749	2272	1409	2193	2532	5666	2170	3522	1118	298	4741	4305	321	5157	5357	4256	1319	3176	3864	1847	5691	5768	4128	743	782	495	5032	5155	4655	3317	890	2403	5588	2298	4596	2120	1963	766	5641	3081	1064
Row 24	4381	1385	1385	3538	741	5640	4856	3917	3504	703	3608	3271	4830	4351	4052	5325	3382	3207	3979	699	4097	382	287	394	4978	2406	2357	5744	2046	5437	807	427	822	2191	3965	1563	1830	2820	5479	5334	3523	3087	2604	2352	1437	656	1677	4819	3862
Row 25	5655	5517	1959	37	5803	2352	5014	2208	4709	4758	4254	4146	5564	4680	4967	1754	2645	529	3584	5465	8	2918	2987	3094	5521	5339	4530	177	1015	3348	4039	669	2865	5997	706	2667	2348	5720	4875	1057	4477	3129	5202	4040	1809	4169	5794	4453	4698
Row 26	3378	3917	4705	295	903	1799	5816	241	329	5992	1255	3677	4030	1924	541	4026	2630	3208	374	2349	2083	1431	825	5211	633	4865	1019	4801	4659	5472	3499	2037	3388	2203	2331	4291	4002	2147	4532	4330	2138	5786	2006	168	1710	2547	4194	4339	5755
Row 27	4567	688	1837	5998	1513	1048	630	377	2067	5431	5036	1538	2929	1072	4926	5131	3402	3216	3133	5548	1747	1462	1686	1533	3468	1853	3243	15	47	1581	5769	4614	2269	1605	4611	3781	2653	5240	4157	4719	4670	3192	256	1599	4263	5182	730	1665	2397
Row 28	3862	1213	4144	5324	2899	5677	2791	4752	2919	2805	4798	4500	2574	3411	768	4178	2021	4548	830	1261	2705	5549	5931	5897	5805	1529	4160	4986	2258	5825	1383	119	1037	5526	5442	3936	5202	2233	2687	2121	5038	1484	620	1611	4894	1387	5789	915	5935
Row 29	619	2175	2640	167	2106	2536	5971	3634	696	4957	5892	520	339	10	1557	5864	5452	5492	5066	1685	2178	1186	722	3661	1805	2333	2555	3192	2121	3470	3127	2739	5644	5766	2906	1749	2302	2877	5383	2997	1833	5274	3517	2171	5284	5073	2035	4736	4565
Row 30	1101	420	742	2286	1142	4403	4091	3474	958	1283	5595	4427	4409	2334	4071	4175	5240	5820	476	2116	5202	3473	3949	4476	989	119	3759	62	2154	2495	4626	3254	2915	5367	5540	4057	3770	3631	1531	4727	4913	1125	3154	3322	3459	1224	1497	2698	1043
Row 31	1972	4813	245	5445	2761	4720	433	2880	2479	494	5034	4974	5120	2287	1888	4487	1827	5944	2256	5457	1475	983	4370	2599	4137	1691	57	5360	3187	2755	403	5159	1567	648	4603	4328	5368	5036	1208	1847	5530	241	820	4649	2528	2708	3135	4354	2652
Row 32	5391	3810	4126	373	2179	725	4509	3870	782	3869	1057	3536	4271	215	5103	4919	4818	3430	4286	3853	4638	132	3383	4878	952	2031	1406	3659	5166	5759	311	4556	3569	4436	4928	5748	5160	3437	3617	5942	1305	4673	3477	5576	4888	2579	4494	3706	9
Row 33	2780	1559	4646	2911	4941	3524	3862	972	4929	1521	137	4688	1831	4692	2256	267	3619	2003	5427	1056	5620	5368	2360	4293	2844	1936	3181	5423	429	886	5431	3208	2445	4077	119	1385	1601	3981	2356	530	5502	2493	5217	1332	1184	1473	1599	4803	3476
Row 34	1025	5858	3095	393	2218	1388	3237	4153	4568	2659	4582	5454	2090	1790	1898	167	1909	3283	1767	5889	5638	2296	5390	2131	1513	722	3314	2986	2320	2117	461	3345	1975	3556	3738	4192	4943	974	2345	3511	3633	927	2964	5722	2716	4861	5889	4624	2143
Row 35	1655	4513	1781	3951	3902	3912	5464	4624	1226	2449	944	3342	2910	4288	5316	465	2026	3508	5408	3000	5852	2918	632	779	5882	354	3494	4743	242	2118	886	1897	630	2667	5848	4532	578	5311	3155	1803	1760	4098	5145	4669	2386	4460	5133	4411	1968
Row 36	4541	1411	1820	1458	2042	2598	1340	2396	91	82	2638	2209	967	4534	2838	3634	4381	1370	4211	3692	4524	14	5451	2622	5158	4119	5007	3618	3252	3418	5585	1792	4828	1404	3250	870	4001	4590	3265	4092	4671	5902	301	5638	4436	3138	3271	2816	4508
Row 37	1482	508	3031	1495	5958	5652	653	4077	4659	4270	1328	2077	3854	3120	905	5258	370	1774	3259	4959	5039	1351	3629	4941	1651	3267	3376	4789	538	192	3296	2019	699	327	3514	657	5978	4166	4733	4637	2435	60	713	289	3180	1617	5546	3549	3391
Row 38	2805	2508	2430	4155	137	1370	5805	3403	4746	4594	3940	4938	1889	5959	5636	2215	3472	293	2193	1637	5025	829	4071	5085	1542	4360	2264	3159	3905	5813	549	709	2320	2979	4864	2456	4348	4669	5859	3093	3262	3798	2031	5150	3757	1666	1364	1228	1959
Row 39	3557	2865	983	4385	936	68	5927	5295	2332	3085	3200	2144	3634	3909	4464	612	2772	920	4960	1440	778	2053	4701	4576	4083	3851	2332	5749	5214	3560	1707	2770	424	2689	1155	1359	2757	1082	653	5088	4166	3852	1231	1800	1760	5695	2412	4532	614
Row 40	1371	5971	1392	3423	4672	5967	1506	2522	2299	1254	1736	5858	2960	4506	281	5649	5660	1640	2405	741	2292	1492	4907	144	2723	706	1904	2418	3118	436	3031	4488	406	4422	1911	5078	4389	3416	1599	687	4670	3335	545	1629	1840	825	1278	1500	2465
Row 41	3683	2240	4757	5175	1147	4901	1898	1853	804	4315	4970	1239	1346	3458	1645	5767	5368	723	4156	2784	2322	4843	1453	5656	5387	3082	1495	212	4360	2994	2676	2043	5234	1432	1217	380	332	3114	2233	1136	1429	1202	2375	2774	4660	4020	2541	4027	4742
Row 42	696	811	1063	5539	2264	718	4925	5346	2213	5136	3705	5206	1811	5747	4439	3243	964	4819	3575	4078	1051	4711	5506	2253	1085	2280	912	5105	4820	4939	3846	5516	5749	4909	5054	2012	5627	3978	1358	1839	3114	5062	1044	4925	4809	5483	2167	5772	4301
Row 43	5742	3850	5351	4452	3355	1604	5537	5634	2515	4641	4454	1453	2487	3969	1202	1396	3023	3214	1022	1000	4571	2861	4114	3632	3905	3038	2441	3387	5205	2213	1688	4946	62	1039	3398	3417	2642	2934	3051	5156	1574	1504	609	4061	5473	1810	5456	2495	5023
Row 44	478	3495	3593	3338	1608	1225	1243	4646	3665	4629	3850	5877	317	2796	5939	1355	193	3355	3996	3126	405	3152	4700	1909	3760	2761	1381	5569	2217	3876	4592	2694	1370	2184	32	2978	3409	1274	1623	1073	5903	5473	950	219	2268	889	1573	2461	4243
Row 45	5569	5586	4648	2721	4286	556	480	1047	1936	49	3263	5812	4641	5956	1181	824	5987	4159	4233	1261	5782	5306	1163	5254	255	1381	1522	1144	2954	3982	5386	2522	3568	4033	5242	1854	4589	5722	2900	525	5771	162	336	4411	118	1516	5235	105	5675
Row 46	3467	1365	5456	2772	2527	4710	3027	3908	231	4170	861	4212	3556	3383	1779	1589	2625	3632	177	2346	531	701	2117	693	1036	527	810	2552	5762	915	2227	3228	2279	1682	6000	4806	391	3026	2714	622	1196	3574	4833	4751	957	612	339	3581	4243
Row 47	515	5926	4774	1216	2042	5467	2251	2569	277	4803	2330	1191	1029	5558	3470	2711	5557	2276	3102	2583	4989	3723	3778	2563	2556	2528	3519	3167	2867	1099	1410	3382	1025	184	4597	3067	5650	848	5635	5927	5650	1964	1117	678	1521	4587	3389	1078	862
Row 48	490	3660	5851	4212	1437	2413	767	3965	5932	3934	831	1030	5343	4212	2054	5526	2809	5120	5176	3656	4755	5102	3306	719	219	3984	2239	4805	1372	3317	5667	1861	976	5518	72	2412	1931	839	377	1862	4772	1207	2892	4115	5419	4946	3640	2228	4066
Row 49	2816	5883	2820	1917	3188	3538	2136	1171	5777	940	2543	3093	607	4403	4069	124	4475	481	2054	5313	857	3916	4084	2064	807	2198	1483	5752	5838	3710	3818	2654	3592	637	4570	780	4175	706	1951	3952	1645	4493	1045	2252	2895	5113	2376	1369	5593

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.