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	1672	4214	5281	3659	625	768	5887	4984	1325	4420	3156	1126	5209	369	1895	1041	964	1804	2095	4548	2806	565	1373	666	1444	1807	4272	2673	734	5657	4974	1385	5104	3500	4452	4973	636	1827	3529	4616	3432	1998	747	436	1736	1958	1932	132	3666
Row 1	2671	5638	1876	4890	1767	251	283	1816	3258	3180	213	5670	637	3116	1012	5771	4056	5532	4407	3223	2104	1446	4749	5843	3130	148	1669	4	451	5376	4240	5889	5642	4341	3304	3483	4578	5981	3407	874	3044	962	4512	1799	787	503	1693	5632	5040
Row 2	1591	2890	1985	2798	5829	509	1096	4398	5018	2348	742	2013	4226	3657	3252	1968	4204	5018	1542	22	2143	3835	4460	3121	5872	4236	3439	3205	3288	1754	4569	1823	1864	5721	3290	1736	1221	5661	2121	4426	769	5226	758	698	4386	749	5773	2495	763
Row 3	1214	4510	4962	5185	926	4447	2055	2355	4656	1774	762	1599	5112	4609	2646	2755	4615	2880	1264	5056	1476	1452	3477	4425	4110	89	2492	2782	3676	2129	2703	4831	3214	5997	2584	1323	3303	1272	2980	2026	5408	1658	983	5962	5468	3732	629	1548	5072
Row 4	1237	5107	5256	196	985	4912	5244	3458	2005	5555	418	5543	1590	5248	3343	1587	1516	2998	2576	2856	3998	143	1379	2021	765	1634	1008	1458	5067	2068	1180	4695	3094	3660	1032	5758	5294	222	4824	646	99	5418	5324	4426	5157	5754	2320	4002	3069
Row 5	911	4965	1759	612	1380	3116	5181	2606	2618	624	3789	2706	3756	5722	3378	3067	4124	5836	4822	1891	3892	3569	2111	4499	3498	3495	5622	4754	1516	88	314	4777	4214	3721	3024	712	2221	4767	4004	3581	899	4924	2081	3962	4114	4672	152	2325	3872
Row 6	3806	3651	1899	3	2099	81	3793	2095	5991	2562	2105	1284	959	5507	1405	3473	5781	1379	5230	623	3024	387	518	2067	113	2235	2731	3953	2161	1114	5258	2366	3140	826	2724	295	448	5465	4541	620	4288	2588	5598	1112	2465	358	1891	357	2545
Row 7	5692	4549	701	1272	3008	5394	3868	2928	1829	266	4376	5188	4497	4596	313	3865	4066	409	1595	3641	263	3275	4175	3156	4023	5066	4804	5557	5677	644	5495	5577	63	2759	1165	1317	2858	1974	4816	2819	5665	1584	5379	673	3083	5989	3228	2087	1580
Row 8	2201	4006	928	4339	5218	2199	4674	4749	3944	5520	5318	532	2388	780	1889	3306	2664	4058	3328	3941	589	634	2594	3093	4068	2057	1435	1667	528	3962	4038	3504	5595	5544	3652	4829	5678	224	3023	5556	140	679	4737	1999	541	2851	805	3632	4953
Row 9	2029	755	3119	4339	996	3850	5115	2656	3043	3922	320	3377	4264	4596	4596	5268	2758	5099	1688	4537	4337	1642	154	5165	1515	3190	5885	1702	3133	2526	4178	4384	4872	828	862	192	2492	1365	4423	4797	4206	1738	2802	101	1809	357	4070	2875	1558
Row 10	1147	3736	5623	1472	1914	5472	1634	4534	955	5270	3057	4312	1910	2620	4760	2356	1965	4888	336	689	665	3693	526	4013	5352	852	1540	1100	536	5146	4316	4727	78	4065	3025	5504	1236	764	2800	1241	230	3362	2215	5773	5763	1469	2923	3035	2359
Row 11	61	5075	2014	3878	3668	3577	2322	5342	475	2615	390	4837	3797	1635	1560	2795	3004	1237	2879	1714	1898	176	3250	3696	671	2003	4202	226	1130	4909	4138	3875	2370	5341	349	1231	760	1533	3898	3823	4065	2841	5790	2180	2904	1505	4819	352	2928
Row 12	2696	885	4484	3503	492	1190	3622	4286	1257	549	1135	33	2595	5558	2894	3922	611	1313	1470	2427	756	5253	1326	5194	2656	5982	5278	3625	1388	5231	3626	2662	4905	4493	1099	5154	4899	1183	5154	954	1110	5652	1172	1101	1664	4739	3614	4165	1494
Row 13	5624	5626	5613	3770	1062	5696	1240	2579	3675	1487	2972	3893	5842	1110	2323	2637	1302	2159	3619	511	1295	598	4852	2152	635	5392	4592	2918	1064	5114	5509	3496	1330	1424	2495	3812	4345	4051	3734	4560	559	4556	2908	517	3872	2871	1883	5933	3670
Row 14	4879	1748	2516	5727	2816	3274	4426	5400	4723	4115	3567	2676	4890	1232	3355	2985	2914	5587	4916	673	4269	4931	1511	4385	2497	1584	5125	1444	4893	1788	5337	979	613	2396	1726	5723	2110	5720	4462	2110	1366	4708	5288	128	1285	3672	5133	857	3061
Row 15	5052	908	2239	2049	2183	4170	1395	3385	1635	2602	3287	1229	5968	3867	3019	5085	239	1089	630	3165	3942	1445	1341	2205	3026	5125	503	794	2243	3436	2459	3369	1352	3650	2098	178	3188	1068	4918	380	1471	3505	5314	3004	5842	3708	981	3768	3375
Row 16	4620	3347	3886	1525	4782	3854	3024	2389	4953	3737	574	2307	1844	3829	276	2639	1077	2925	3215	3552	3036	3405	2667	2492	2413	2760	1280	3021	5742	2639	3777	4853	5090	5926	1524	894	88	478	5574	3698	3769	2583	5938	2918	2310	5830	798	3488	220
Row 17	4947	2527	1320	3401	209	4408	178	4783	5573	1799	5778	790	2021	4030	3350	1426	787	1723	3837	5329	3643	4342	4018	898	4177	5274	4447	5497	3536	5226	278	3999	1547	4445	1772	1561	3721	2494	5496	5670	4895	5022	4720	1693	3458	1140	3215	3739	3761
Row 18	2298	1301	368	4928	5833	4080	323	2241	221	478	2682	5065	3286	1832	3471	4590	296	5546	4547	3120	556	5883	2457	2807	4183	697	31	2333	333	5850	2568	4910	3538	2658	4001	1498	1995	1803	1803	2476	1626	5655	4215	347	5008	4089	2873	769	1873
Row 19	795	3755	146	4828	4383	371	2813	3650	5768	1250	2988	2514	303	5406	4023	2181	4802	5541	491	968	1728	2805	3479	1186	2886	109	2458	1399	5056	598	5461	4483	1981	1258	5405	1196	1581	4686	5598	1717	1201	2458	3934	4688	4138	2704	5171	5386	474
Row 20	1742	1157	3752	5874	4209	4211	1626	833	2911	1121	1997	5783	488	2856	807	603	582	5835	2111	5820	3124	3030	2536	4805	820	2064	3360	845	1876	5114	19	4251	3273	3975	3609	5601	4237	2442	309	729	844	4229	5757	441	5100	2390	830	5440	5008
Row 21	3872	5260	2339	2117	4018	3558	2469	5389	3302	3215	3003	1847	5514	1835	990	5005	2397	3029	4872	4637	1362	4398	4657	4768	4901	5255	4394	2097	5786	5358	695	4102	3745	1384	5008	1874	2935	2059	5235	4241	103	2632	4429	112	4614	4369	785	3320	1499
Row 22	471	3354	3239	1719	4477	1722	216	1486	5351	436	5929	3188	544	3425	1532	1967	1660	3845	3968	4413	1651	2530	3770	3357	4446	5503	1563	1474	1072	3467	5174	4858	2614	350	5698	4854	4193	1784	2772	2713	2983	2543	2532	4888	547	1907	1347	1554	4084
Row 23	3514	5358	5197	4769	4129	760	4694	3076	1467	5662	199	3033	3723	2905	642	4364	3766	3201	4778	4052	5530	2436	130	3091	2680	860	4996	5216	1092	2222	1455	5812	3936	2689	296	3605	2664	3623	5276	1520	2375	478	713	5724	4234	5740	2237	1442	2841
Row 24	5840	300	3631	935	4491	4571	1247	5790	3153	998	1257	13	983	2331	5039	995	5467	4781	1346	4209	404	1760	3502	4657	1943	1044	4331	3869	2406	5398	1098	1743	1333	5433	1963	5146	2769	1090	3732	4718	961	4541	1581	4057	4968	2926	5864	2245	1984
Row 25	4942	2708	3574	3070	1767	3018	4341	4179	2591	3386	1947	3959	3666	3838	5205	4048	5807	2484	5951	1048	1606	5444	1737	5062	3974	2578	5368	25	650	4673	1614	5463	3834	5519	2924	2336	1842	3216	1337	5035	4972	2445	3639	3533	14	4641	3911	4333	5821
Row 26	5615	3591	2094	4531	582	929	5206	2319	71	2936	3146	1880	719	3635	2971	3428	3709	4083	933	3732	271	4185	2442	958	4303	562	1569	1302	3169	2579	782	713	3040	756	2408	3586	1646	5764	1893	931	5112	2465	1426	4196	66	2791	2191	5793	2558
Row 27	2017	3303	1733	2751	3935	2689	782	4149	4863	4794	3746	1927	4524	3490	780	3776	3495	1086	2268	4457	1915	1894	516	701	5107	5956	4175	4086	4896	2653	5966	5030	1006	2267	4432	1249	3370	5075	2738	3598	1054	4912	1923	4944	2808	1905	5741	2635	1089
Row 28	895	2313	3777	446	4570	549	4879	859	2893	5111	862	353	2941	3433	3514	1131	5743	1053	948	4415	3639	2973	3915	3619	2097	580	3059	5654	1109	1973	1954	1847	3656	3022	953	1507	4786	4927	3907	729	2939	4194	3027	1464	2126	3677	2745	2038	3758
Row 29	4307	4961	516	5163	3187	3271	558	3441	1424	1251	2793	263	85	804	2040	250	4586	5545	2893	3182	5225	5429	5790	2381	2276	396	4694	3899	749	2135	622	769	962	2149	2442	1162	1084	1842	3443	5940	138	3062	4031	3998	4526	3745	5565	660	5267
Row 30	3678	4545	2696	822	3994	5260	3606	2455	3228	3324	3702	435	3181	293	4970	5720	3458	5792	3247	5681	207	202	2237	2527	4444	3509	3972	5809	4984	2848	128	215	3684	5378	697	1214	4650	1662	2223	1593	986	3538	3322	3968	1247	4152	226	3119	2862
Row 31	2428	2359	19	5957	3022	371	1564	5360	5264	2551	4514	5703	355	121	55	4391	850	4410	3367	1676	1992	5780	2098	755	2806	2970	3831	5376	2183	1846	5818	3222	5681	1047	4082	4511	3879	5140	4840	5574	1116	5699	4574	3691	5680	3564	3774	2936	1582
Row 32	3652	1884	5172	2461	1486	2764	4616	3222	4704	2342	3246	2888	451	2696	4116	5604	145	1453	3584	1308	5987	2440	4300	1863	5172	4484	4429	3820	2285	3181	3497	2270	1263	5179	1008	4499	2203	1643	3709	4722	4420	2405	1569	3008	3134	283	5855	2690	4233
Row 33	1866	4150	1683	491	3920	2411	261	4349	4597	877	16	4022	2870	3919	3308	1692	1139	357	3157	5017	3062	4890	29	821	1866	5105	3466	3340	1661	3893	805	5344	5633	4487	4299	2833	2246	2546	5185	3114	4804	5295	1719	159	3850	3114	5188	4529	1922
Row 34	4105	3830	3634	3338	4999	826	1053	4483	1282	5555	4984	1837	1469	5244	42	5664	1921	1316	5974	703	326	1813	4731	5517	4658	2578	171	5228	4108	4242	3618	5700	3004	674	245	2180	5943	2903	1888	836	464	4925	2948	781	2620	4257	4032	3609	4474
Row 35	3442	5824	2587	4520	913	3954	4871	4167	4007	181	2323	1484	2482	4297	3667	3512	270	5467	2461	173	4273	1215	2869	1913	4426	1423	5317	972	1808	3184	867	3335	5461	3555	1220	104	2830	2861	126	1859	2874	20	5465	2948	2692	1165	866	1009	2588
Row 36	1832	4476	5385	2723	5056	4852	5841	5506	5377	2754	258	2236	3716	5016	1630	5186	290	2345	2402	683	5868	2125	2049	4609	709	2670	2996	3461	1663	4270	335	5207	5130	698	1334	3601	1749	140	2029	1501	766	3385	2094	3214	4147	3570	2699	3752	1248
Row 37	4218	2372	3963	96	991	1050	4987	1592	3688	2889	1732	3718	4866	3413	2003	333	2503	4176	4479	3678	2939	5210	280	5572	443	2052	4546	496	2448	3514	3641	3746	1692	2936	2277	763	4998	4672	1	2130	4632	3789	4510	2487	1750	5751	5102	1555	728
Row 38	5966	4898	4557	707	3021	1207	5794	2758	4060	2163	5361	1105	458	100	4530	4623	1262	2490	1787	1488	1646	1817	823	2374	3510	1933	1150	2220	851	5048	4573	4716	5667	5131	1603	2523	5202	3045	25	4543	1127	5426	1260	4406	4595	1729	5183	2553	4632
Row 39	3554	2369	1673	2434	4488	3454	4506	5529	2851	5286	2510	239	3213	1711	5850	5507	3444	5371	1193	3281	4551	3106	4778	4479	1708	3810	3694	4249	5263	3265	640	264	5808	2483	5775	1559	5645	5095	380	526	3497	4740	3832	2319	5425	1347	2694	2786	1118
Row 40	4125	96	1580	4012	3359	904	3054	4463	4417	4785	5105	3651	468	2180	3357	715	4485	2529	5314	2663	1320	5795	3759	1573	75	2711	3607	243	2332	2007	5864	3616	205	2917	1350	394	5225	3094	3615	1215	1880	2690	4110	2682	5369	1525	3939	4026	3297
Row 41	3116	3273	5628	5126	2705	7	258	3113	4738	5098	3972	5859	339	2011	4519	5404	5615	3263	2447	4446	5542	686	2660	566	5810	3806	4711	470	1157	23	3903	5812	4377	1622	228	4784	1771	4847	3075	5922	5271	4266	1635	5265	3481	5311	5343	5981	1157
Row 42	3840	5076	1717	4900	5680	2586	1335	45	1036	5217	5336	2854	1551	2018	3398	4054	5708	5309	2273	4412	5246	4906	3747	1830	2335	3938	325	879	3163	5727	1000	5336	4163	18	1370	803	2069	3638	6000	1669	2558	2301	4721	2437	4030	5351	1613	5239	4657
Row 43	1676	1184	4038	5901	574	790	3509	5878	4614	5965	1471	3095	2445	2350	3632	3667	852	1000	2926	1355	814	2025	4081	3471	348	1542	3970	545	1628	5103	2060	3032	4676	3421	95	890	2404	3943	673	5378	3881	5821	3527	4370	5814	3850	4027	5911	5944
Row 44	160	1610	5197	3077	3422	5603	3594	164	5828	3835	4950	4574	1440	5648	4089	886	5921	2818	2002	4102	3395	5855	2275	3344	549	5281	5661	1245	1652	1533	1557	1344	1054	599	721	5544	5567	41	3855	2779	321	986	2924	1767	1793	2304	1815	89	3013
Row 45	1002	5462	4968	697	2887	3851	1794	3312	1724	3403	2391	3060	995	5747	2651	3973	4836	4007	5907	4867	5716	547	3664	2581	2937	5626	2983	3963	3999	4475	665	4053	1453	1336	1814	3609	584	2116	5462	3819	3965	5139	2794	5406	5401	1707	1095	3928	4790
Row 46	5170	3344	2675	4868	3205	1766	3079	843	1584	1026	1528	4950	4836	1169	4841	2983	2848	4269	3678	1097	411	151	1008	5867	3230	4756	2882	5428	2250	3708	3322	2811	2813	2338	5343	3296	1527	1212	933	1753	5616	2330	4597	2525	2690	963	1449	126	5070
Row 47	1707	241	4759	861	207	5688	1663	1387	5111	2008	4425	4911	3575	1756	656	5633	731	3731	4308	288	2563	5273	4599	2850	4926	2114	5845	4376	5072	2695	167	3610	4008	765	278	4422	1664	3922	4921	4318	1518	740	4249	5214	5294	4787	2668	5213	5947
Row 48	3122	2196	969	3975	1065	2209	5440	4424	5245	2418	2296	3034	3585	3	1623	5196	518	2165	5966	72	699	3948	5285	3905	5715	702	897	4437	3657	1742	5669	3127	1687	3431	2575	589	5071	5462	2532	3901	5113	4941	5234	659	4107	5992	1697	4278	3678
Row 49	1732	3600	1999	3343	3628	1816	3214	1597	1079	3649	4831	2909	2071	1396	5300	2945	5276	5963	3768	3049	2153	4384	5057	4070	1599	1294	2383	4684	4407	5712	1102	4161	2268	1185	2760	3689	66	938	2166	4207	5117	4360	1353	1935	4131	3566	4726	5662	3206

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.