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	2242	5787	4194	1788	2671	446	3526	1610	1688	729	3081	5507	3108	4241	2696	747	4830	949	4234	4346	2872	3618	132	5048	4531	2251	3164	792	4696	5694	4887	938	5480	3080	2726	2151	3525	251	3761	5213	980	841	4719	4088	5082	1415	4835	3911	2364
Row 1	3068	2257	5235	686	2388	4282	5216	4639	1446	8	3335	1139	4894	4272	618	1974	997	2768	5498	1248	528	4711	2228	1369	3430	315	450	4844	5149	4360	1207	2217	617	442	2902	3005	4723	2118	1643	168	2125	4977	1306	1019	3249	1924	2992	4246	4692
Row 2	2490	5494	5220	1201	1722	588	4630	2037	1037	3474	1186	5397	4681	3402	14	5122	304	3018	3845	2421	4660	4012	4546	3637	5318	5564	886	1242	2556	5132	5933	5045	4625	5152	245	346	5740	4875	2382	777	2349	3568	174	1030	969	187	151	1273	3204
Row 3	3996	3694	1863	2007	2239	5500	1325	1803	385	2567	4359	5516	2500	3403	4141	1652	3648	4487	1391	2523	869	2167	4872	4436	2340	5901	5404	2526	51	677	5730	4046	4370	1592	53	608	1092	1378	2411	1477	3944	769	992	444	4172	5133	2095	1820	3619
Row 4	3485	4343	4487	5652	3214	2922	1991	3114	2326	4517	3165	3002	4246	1211	1371	5838	1263	1979	930	2641	4389	2406	585	5158	3398	1028	3330	2530	3122	5149	148	607	3492	4634	258	705	1555	2249	3818	3880	765	982	882	5011	2192	2252	4849	3455	4230
Row 5	5778	96	2619	2184	680	1777	5581	1707	5106	2110	4829	4255	2257	5435	1746	891	5692	2450	2445	1941	268	325	2706	1250	1206	1716	3442	3458	565	896	1688	343	992	4306	2526	1671	82	2106	3378	5188	4215	2206	3443	472	1641	5188	1362	1333	1638
Row 6	3807	3273	1906	4131	5978	3155	5337	1694	596	2795	2258	1492	4482	2601	2483	2787	5126	4154	2869	1231	1531	2057	5446	3737	5499	5917	5378	4687	1278	710	325	5084	3982	2230	3215	3960	5384	2552	5653	5980	5347	1911	1472	3828	4511	3955	615	3636	2108
Row 7	3484	4867	3639	5540	4313	1376	5039	4229	753	3725	5507	1462	4049	4591	5444	279	1806	3403	5663	4358	3055	5642	3704	4965	1114	1532	3476	5068	2146	1111	1176	5629	5978	4814	5169	4290	190	4208	2518	942	1933	2025	2403	5982	616	1847	260	2421	5249
Row 8	5922	778	2303	5564	4482	1268	678	13	4743	5745	2159	5854	921	1788	5831	5735	956	4121	5924	5164	639	865	1096	2663	3268	1077	3278	5114	1337	5699	4362	1259	477	665	822	4958	1933	1500	4971	676	1244	1129	530	2165	2916	360	1899	3872	4480
Row 9	1822	3035	5118	2687	4131	1781	5954	5208	5059	5068	545	4757	3430	1803	5233	4095	2625	4190	27	4124	3161	703	5368	4289	1232	1532	1205	1592	3431	5076	72	5253	2111	5190	1939	242	970	1893	5450	28	961	5994	4784	4390	1796	4017	2484	4420	2207
Row 10	2511	2544	5367	3214	1911	3656	4445	3442	4860	36	872	3936	108	124	47	5297	2063	288	266	3956	5737	294	4916	5730	5078	3305	1526	3094	5789	5945	5300	2299	2488	4666	5513	4399	2322	3957	1841	1181	3993	2713	5116	4100	2837	5162	3396	4899	5450
Row 11	3662	2854	5186	3956	1769	4916	3033	5074	441	126	4862	386	5426	1161	2874	4092	673	1272	413	4630	3112	1593	2622	5824	709	722	2661	5871	4117	1559	5320	1779	4413	4505	5734	182	3421	2767	5255	3861	2893	4116	4246	2318	5277	1120	410	5949	2391
Row 12	822	4578	5503	2415	1199	5327	3123	1921	1987	2994	38	3546	2313	1816	1958	818	1550	2139	4238	4316	1394	2099	1208	5509	345	3526	4785	1464	3935	4734	3855	4756	3311	3357	1171	4510	2684	4294	430	4671	1287	468	2216	3599	2283	4174	4416	3833	313
Row 13	2654	2148	1706	4752	3356	1215	5096	881	6000	559	4816	4733	4414	3571	2044	1771	4742	554	4454	3035	984	3125	4321	1451	5340	1919	3733	3514	335	1566	3827	2988	3713	5533	1740	1069	747	835	1950	747	1394	765	5479	5807	4336	1523	1577	3077	2076
Row 14	31	111	3060	3155	4432	4510	2495	350	2243	9	685	3808	3835	3672	1521	3367	5411	2589	4114	246	4539	4860	1639	5303	4339	1446	3638	5862	3023	715	1937	3054	826	4996	208	5257	3506	2703	5606	5748	2712	291	3555	546	3962	5075	3913	3373	1664
Row 15	2026	3619	202	886	5258	5505	5224	703	3142	5086	3726	3857	1022	779	4682	18	987	3938	3524	3689	3544	3271	400	3834	825	946	1796	5900	4859	5169	1564	884	2787	1765	1770	2044	1269	994	2747	4411	79	472	2268	1101	1250	949	1119	2236	4886
Row 16	4642	5925	2430	1912	324	263	2737	1270	2059	2637	128	1227	4200	1012	4013	5965	2781	57	1234	3775	2803	5645	3853	3274	1912	4953	4524	2860	71	759	1746	4713	684	4175	624	1008	4438	3361	2277	496	5997	2405	1722	4196	3416	5735	4160	197	5791
Row 17	5394	3971	2594	5038	1823	5867	949	776	4391	3808	847	5150	5554	5559	5833	3728	183	840	2165	3543	3117	2661	3539	5521	4382	1735	2936	4116	5895	3133	3907	5288	1103	500	4325	2926	367	5274	3702	4757	3082	4548	3907	2635	4107	3739	363	4289	4579
Row 18	2528	1832	1695	5188	5371	1216	3570	1106	4152	1686	1000	1284	5592	288	2387	91	4613	5312	458	3886	3013	5215	967	1561	3121	3602	5668	860	3964	3956	5438	491	5788	1133	5679	5159	2348	3248	264	499	4933	1264	1783	4524	1551	4169	4615	163	3480
Row 19	5073	4049	493	4287	5015	2054	1407	2617	1721	2266	580	5677	1704	1071	5464	2836	750	4622	5184	3997	4886	5682	2930	149	1465	1454	1699	5633	68	1862	3113	5140	5910	3605	3427	4925	5658	4833	1542	1378	1098	2121	1055	2802	3192	518	5637	3941	5140
Row 20	4820	1938	4025	4502	4867	4174	5966	320	5873	5598	388	1734	2710	5528	1644	315	2954	569	5973	1786	2110	1351	2884	4231	2405	5685	1422	2922	5322	5363	2062	4142	1300	87	2643	166	4260	2608	486	4133	2206	873	5867	4916	400	1511	5230	3354	2079
Row 21	5202	5140	4189	552	2024	2420	2956	1709	3841	5878	1030	3204	1940	5171	4503	2026	1814	4669	286	4421	5154	4418	627	27	4284	5542	427	5794	4772	3780	1873	3973	2919	62	4525	4942	2481	1481	651	322	1359	1680	3525	3298	851	2028	5323	2664	696
Row 22	5609	1085	5850	4026	1711	5876	2310	1253	302	2104	24	4082	3976	3997	1000	4037	2521	5942	517	4002	592	839	5360	2272	4363	2657	3122	390	1980	5786	1086	1588	870	935	5614	2581	811	1923	3833	1112	4026	3857	5193	2002	1853	193	39	4374	135
Row 23	555	2375	726	1394	1735	2998	5756	4392	119	145	371	5905	1231	1958	774	2165	1571	3355	2975	3494	1187	4087	1519	5043	3280	3520	896	3472	3559	5269	3606	4113	1644	4332	5507	3378	1329	5262	1770	1448	5407	2140	1352	637	4098	2125	2802	5669	5479
Row 24	5776	3162	666	3863	4681	5709	1142	2201	604	4613	5759	5873	2219	3872	1516	550	3378	4894	1878	2639	663	3325	2045	2803	4676	2682	900	801	5483	568	280	5259	3729	946	3121	2409	654	4263	4609	1258	2876	4367	1130	5094	2238	2646	5643	5615	1540
Row 25	1521	2254	2203	4846	4299	5005	3521	980	5905	4322	463	473	4601	5722	4202	5546	2843	611	200	1105	5219	1457	3980	3586	2587	3073	5824	5232	2716	5439	772	4236	1693	2975	3081	5991	1980	602	971	1884	4924	1434	2356	3524	1155	557	3070	3997	1167
Row 26	3270	5102	386	4726	3081	3972	1313	154	3796	545	2870	3235	1316	1105	4928	4291	4186	4919	270	4788	5889	2153	3711	1323	4509	1235	2477	5066	4305	474	233	1574	5576	619	300	2657	4591	1612	2810	2387	2157	5679	5621	3472	784	4549	1763	4970	3467
Row 27	2032	3757	3356	4184	1468	4678	2693	2702	1155	1759	1006	1629	1991	2580	1204	2609	2879	3860	1200	4491	670	3586	647	348	3207	4119	1132	1755	5881	101	5222	1912	3858	2577	96	5325	1254	2789	2027	2408	4547	3033	4037	538	5612	5240	3146	2491	3100
Row 28	4346	981	3769	1931	1628	4117	5138	5747	5248	892	5627	5349	113	1539	3207	2689	1634	2531	3943	4423	4558	351	2969	1590	4387	3506	1202	3626	652	3692	726	4997	4673	4494	928	301	2610	65	47	1858	957	5673	1206	1070	1212	4412	3759	2846	943
Row 29	1701	1268	5500	2051	4236	1090	438	1742	2292	4064	2394	5983	4789	1391	4656	3282	2318	4956	5891	2383	5002	1749	3339	4675	2954	4408	5886	1366	2166	2731	2308	3867	3999	1808	5918	2235	2897	355	3976	5188	4418	369	5171	3206	1759	3827	488	4077	2783
Row 30	379	459	1785	2127	3798	459	5080	2205	345	445	4371	3076	2753	2237	1074	4560	2154	3308	1457	2509	1284	645	926	1653	5816	4132	3412	3642	4620	1488	424	4998	1947	2208	1124	5744	2667	204	1949	3012	649	319	88	3402	2556	1162	1962	4710	4470
Row 31	3418	1218	5753	4063	2144	1405	3878	275	4817	1520	4894	304	1944	3892	2251	4152	5016	1994	819	5220	3942	3830	5869	4261	3917	3270	816	5079	5231	5525	3548	2649	742	3300	711	2886	4705	4589	3160	3521	109	2054	3825	2052	5946	75	204	4961	2068
Row 32	1022	4180	10	4852	4048	4270	2769	1318	5086	1847	548	4610	5394	3196	5352	2694	3907	2237	1398	2496	5397	4919	2604	1451	2743	4656	1397	2818	4860	357	4886	5881	4537	4895	4733	2585	3165	1501	3902	2250	3347	4450	859	2741	1646	211	5434	5553	2448
Row 33	831	2048	1845	5750	4652	3295	2493	3308	4691	5310	2167	5048	4195	2048	3585	3090	780	170	254	2280	4072	2503	5627	2521	3362	2367	4167	3573	1800	3719	20	2631	5767	1864	2381	4418	5159	4873	1726	3850	4182	3892	2897	2377	5939	482	5466	718	651
Row 34	5720	2998	4722	2222	2624	1243	5584	4991	5409	3156	791	3127	3175	3421	2894	5039	5802	1311	4197	4674	3036	2046	2856	928	4943	5232	867	5425	4698	1585	75	4417	4582	4797	639	1206	39	222	196	5448	3378	986	2575	552	4407	5468	5591	4208	779
Row 35	3787	2882	3814	5833	5737	4742	4775	4969	5608	4200	3666	1192	4274	2083	5774	3071	2722	979	3110	2943	1175	2557	321	2160	5131	873	567	4598	463	4775	5376	4249	1656	3190	4082	1392	1931	2857	360	1539	1056	4026	2730	5330	108	2504	2400	2829	3482
Row 36	5509	5772	4656	2066	93	816	1196	965	1383	5794	1427	157	5170	5676	1812	2359	3757	3204	4290	613	3564	5829	1668	1589	2559	998	1697	5062	3397	4526	2543	2906	4298	1199	4972	4390	2014	168	5354	3396	5961	781	3552	5130	456	5364	1489	4212	2568
Row 37	5779	4825	131	5607	493	1720	2165	1490	3416	1226	4887	1942	3768	1793	239	4966	764	4629	980	931	3982	4375	892	4762	1927	21	5218	1291	1510	3429	3858	1288	2254	3989	894	2746	5708	3058	4236	3124	4284	3123	5066	2051	4915	5305	1017	5679	3933
Row 38	1996	610	1914	371	1501	676	2298	1522	5893	3588	3032	3322	1446	4319	5575	5434	5213	2321	5142	2271	557	2266	554	3679	1331	2605	2594	636	3621	2273	4568	5617	2882	482	5987	4383	1157	2285	5905	1050	5872	2936	4371	1317	1255	3946	751	467	266
Row 39	5893	2738	823	2159	3291	4501	3490	5895	1094	4125	3516	3367	2692	3132	248	3173	3119	4631	4330	5403	4535	5379	5275	1471	3749	592	2725	1695	1343	3192	1961	1235	5929	2783	3393	3220	1283	882	3114	2377	5007	630	5743	1698	3762	5991	4870	880	4621
Row 40	3199	283	3156	2578	5558	4626	326	149	1351	2020	1491	4542	3981	2726	4471	763	119	1690	2046	1001	4804	4422	7	5433	4165	1704	3194	4156	574	4074	2777	3773	4357	5932	350	3914	4558	676	4062	5908	2696	5553	4450	676	2278	2921	1438	2397	4610
Row 41	3483	3397	3414	1905	3403	2846	70	5107	40	4225	5680	4114	1001	3453	2470	932	3803	383	5490	4478	4445	5398	1174	3998	3847	1849	275	767	3287	2671	5377	769	68	2790	2674	3470	5636	2743	2577	5675	967	2257	3789	1968	5709	258	2900	3511	641
Row 42	2389	1989	5086	1786	3162	3083	5633	5010	3358	399	2297	29	5776	3065	96	2566	5739	3566	2201	2481	142	1876	3448	2398	5664	5415	2107	5922	2314	5617	562	4703	1606	5647	488	4767	2730	120	3777	87	519	73	116	294	3138	211	2860	2876	3776
Row 43	5061	5357	3918	936	2805	315	600	2219	2421	521	4533	2038	1082	3235	3643	729	3723	2410	3459	3842	187	3545	4360	259	3660	4654	3397	3871	1514	273	1647	574	5629	5564	1509	2434	5878	2108	4652	2299	2629	3185	4336	3711	420	1979	4439	4142	4389
Row 44	1898	1983	4575	5443	343	4834	3102	4997	2230	973	510	2502	2619	1083	2131	2182	2591	4564	2060	4699	3216	4358	1327	400	2694	5038	820	4673	3477	4961	3061	5374	944	1635	4816	1286	468	1918	282	2698	2890	792	5199	5509	1874	1329	1690	4465	5893
Row 45	3750	3164	3108	2107	4491	3508	4801	3528	4327	3473	1004	3288	534	377	4231	2169	5192	5517	2637	1109	5799	5334	3999	590	4532	3507	2463	5861	5197	928	5754	2946	4091	2861	5053	2581	368	3854	108	4695	1326	1111	1982	1860	1488	213	4028	679	5730
Row 46	664	1788	5528	5997	5786	118	4529	3293	2581	4390	2489	3508	4143	5435	1598	1004	4487	4178	1372	2340	4286	66	3666	5396	2048	5525	883	2261	3553	1562	1990	4217	3349	1518	4213	3135	1635	2742	428	4215	1132	2916	1723	5274	2351	3320	277	837	1498
Row 47	1648	3177	5783	1714	843	5179	3762	368	62	22	3920	1624	2011	2136	4973	3529	349	2108	5163	3091	2535	3378	4222	5451	5100	3496	1801	2420	3773	2638	3917	5421	5814	3700	1134	656	2879	4895	1024	2940	4917	4943	4564	927	1079	3536	4456	1428	5643
Row 48	3618	4519	2177	996	2740	1627	95	236	3427	2514	4008	65	431	3429	5878	4131	4562	534	1009	3457	1557	3949	2373	500	2512	3300	1579	48	1755	3007	5690	5373	1525	1866	368	4265	3493	463	4500	920	2976	2508	984	3407	5936	862	1537	4498	1395
Row 49	2546	1955	2952	494	4327	3452	3006	1627	5030	3053	3382	2036	2743	2755	3560	4608	3122	1825	2101	3584	324	3020	560	2832	4004	3967	2768	4865	5504	1265	260	2049	3220	3212	2543	1547	663	5549	3173	5693	2601	555	1729	5343	3309	5288	3951	430	1113

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.