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	5644	1786	763	1356	4117	894	5380	2463	4889	5464	2852	2719	1025	4970	5643	5903	241	339	1283	2848	4803	4171	5088	984	5075	876	5375	5116	692	4012	1184	4653	5589	1217	4078	4511	1058	2677	2001	308	1103	3077	5926	1604	4444	1660	781	4361	148
Row 1	2382	1988	2699	2060	1072	2920	3566	3760	4	5196	2491	943	5506	1699	1336	2967	5445	4886	4158	4320	995	3498	5323	2542	1988	3098	1022	3481	3579	2127	3991	76	3827	4712	300	515	3114	4418	5391	3044	524	3734	643	526	1514	5560	4176	4776	4828
Row 2	204	4429	5976	4915	2363	4971	727	4625	3621	5893	5937	922	5930	4762	3119	4261	648	779	3161	4497	4784	3294	2176	5519	1464	2946	2994	2784	656	2664	1489	1116	2159	5576	4645	4555	697	3643	4649	2286	2033	914	5865	1077	625	5614	2639	40	2232
Row 3	2083	1454	5757	1039	2758	2969	1531	4638	2743	1653	4443	5189	3200	2685	246	4971	4017	3105	5058	5125	26	3182	154	858	2535	5775	441	5265	3426	160	1369	833	4747	5881	2089	2753	934	2062	1125	3438	1058	1379	3844	5854	2962	2794	4753	5139	3141
Row 4	4562	3330	3074	3671	4974	2539	2283	3655	288	2549	5372	1052	3418	4760	2592	4708	5292	4976	2641	2439	1159	1215	1382	242	4529	1487	5307	790	217	327	4073	3356	3291	5308	2589	5145	1831	5041	3591	3873	4595	1700	3157	993	3178	5820	5293	4830	423
Row 5	2579	3666	371	401	2028	406	1783	2282	3454	5120	1723	3681	687	4603	262	2292	706	2601	4088	5927	4457	5622	3518	196	15	3569	4355	5901	3709	2076	2898	5550	1889	2796	4956	2544	2212	3262	2165	2416	2185	2545	2313	865	1859	3999	2893	2575	3493
Row 6	2182	954	2794	1455	2854	4818	4841	568	5253	323	657	5382	4434	858	5408	3454	717	1098	2390	1003	4447	2811	2553	4783	5943	2492	5406	322	4913	3562	5445	5136	1429	5361	4192	3831	2384	909	4475	2699	5785	4161	4052	1421	205	904	2620	4867	3709
Row 7	380	589	3242	5448	154	4287	3309	4255	1656	3627	5036	1509	3610	2400	1389	3700	34	36	2821	3729	2061	4710	3496	49	5267	2493	4792	1548	2781	3446	3950	3705	3631	4581	5708	2126	688	1337	254	2897	4576	586	2542	559	4492	1625	519	3601	4245
Row 8	1844	3940	2646	1907	653	1347	1602	4111	1911	407	4383	1172	3676	1720	1972	5871	692	2992	4322	1326	2602	3099	4918	3740	1311	1230	1917	2911	4069	1289	51	826	5655	3149	3076	987	5518	5646	4179	3060	597	190	3417	4455	384	5160	3477	4744	4172
Row 9	1520	5957	1794	754	4613	1544	105	4637	5738	3076	1756	4686	4810	2122	5742	5685	3645	564	462	100	5331	1347	2419	3131	2640	2057	2521	4576	2139	2706	1685	2687	468	2515	3529	4535	3802	1009	5395	3702	4309	4721	3595	3940	2167	5305	3391	2924	3959
Row 10	5474	4494	2962	928	1618	4968	427	1733	3264	1663	1568	4178	2133	2974	4979	1872	168	916	2058	4933	2141	5358	2449	100	5307	1185	205	4759	4307	2603	725	1724	737	370	5668	2291	5699	1358	873	2584	450	550	80	3641	1353	2126	4023	3120	2441
Row 11	3207	4065	5646	1940	3409	520	1767	136	4520	1276	1963	1123	3896	1787	129	1244	5606	30	4101	2975	1115	429	3290	5320	5683	292	233	1704	5109	690	5208	2565	1606	883	3469	2615	5293	3431	3821	1523	4223	367	2979	4928	5641	4937	1876	3926	386
Row 12	1160	1770	1216	5451	4438	3612	1018	5110	2422	2301	1331	3430	3489	3105	5129	658	1780	2889	3591	3882	4892	4151	1914	5952	2357	4181	2673	4433	1276	1025	1984	192	1615	4878	1161	2206	5835	3624	2447	5777	3877	3791	5860	1729	2625	1658	2224	4895	2851
Row 13	745	4561	4855	572	4143	1862	592	2541	5540	3706	5525	4650	2824	1291	15	4903	3077	5440	1591	5992	292	4600	3785	4568	5765	4062	1676	384	309	399	3403	579	2009	2744	3382	3556	5142	4553	663	1661	2914	4735	5669	3589	2554	5459	1702	5490	2974
Row 14	3084	404	1770	947	200	70	5327	471	1583	4150	3208	606	215	4941	5174	595	479	112	3350	5361	1216	1419	3975	1282	3122	2895	2611	2982	406	1217	1538	4704	4061	2522	1386	2323	4411	3515	1979	847	3182	3719	4834	1821	3968	2540	1522	3386	2629
Row 15	3853	1888	3911	2417	905	5618	5443	1114	3719	3391	2437	4797	419	3645	3033	4069	593	2727	3929	3982	1210	1249	317	4267	5446	3368	3177	4892	4195	1305	5310	2820	2354	1394	3275	5163	500	3774	4113	447	621	2196	5695	5457	5237	404	56	3160	734
Row 16	921	5224	2886	3201	235	1494	5588	3032	1641	3877	5814	5836	5448	4508	3164	1104	3022	3496	5124	2931	1456	302	3116	3545	3010	4610	5143	2651	767	1150	3040	3253	2293	2960	4070	2630	2539	4735	5626	3310	6000	3015	4931	399	2686	3336	1608	1812	5807
Row 17	336	1833	1687	2913	2163	4202	2074	2486	2469	3134	4714	527	2192	2542	2752	2169	604	835	852	3419	1843	4050	5522	4487	5668	5450	4549	4721	1999	2708	2796	1230	1377	1830	2689	5367	3401	1747	5076	4288	4924	4735	5529	1785	667	5097	4675	4228	4006
Row 18	1003	5288	1537	2194	1089	1686	3348	3612	4404	1925	3851	1634	1018	4389	3412	2098	5621	2795	3100	3206	3576	3225	1750	5599	2213	3639	2726	1572	5933	3337	141	909	3287	4662	1226	5739	417	3273	2523	2823	3557	5433	1974	4202	4859	799	4483	3989	1439
Row 19	3822	417	542	1042	4381	5928	3512	1987	4029	4382	2475	5689	136	3600	4401	5288	5517	1291	5323	197	5848	484	2818	5688	3766	4492	3818	222	5148	2673	5441	2864	5759	1110	4809	753	593	4681	3488	4248	2876	3975	101	5916	2167	4806	1644	2730	3081
Row 20	5735	2657	4340	5364	3701	42	1010	3082	3967	38	5318	2022	1878	1390	2477	2187	2687	315	3449	539	2422	1735	1789	4435	3136	3805	773	2119	4146	2278	175	2943	1354	481	4395	3013	229	2644	3999	2299	3466	4100	1484	2040	3333	2879	983	5946	43
Row 21	5964	3524	3546	1279	83	849	2391	1286	4408	4263	1529	1479	5414	3478	3977	5196	3653	4166	5927	2680	2734	5433	5413	3338	5408	971	2661	1503	2257	3550	4902	121	5551	2994	3800	134	534	3490	3733	2943	5816	753	5705	2012	508	3657	5747	5362	1635
Row 22	400	429	1543	93	826	1260	5392	3089	491	2337	1895	4876	1558	5247	4638	3071	2332	4480	5218	5544	5278	289	2384	3840	4233	1929	1704	4642	1255	361	34	2655	4713	1700	2657	1757	3191	2211	5579	4662	819	3415	3515	2842	4862	4328	2896	5806	5636
Row 23	5012	5015	1673	4557	5137	5724	5117	3983	5179	5015	3477	513	5443	4177	4711	148	2273	5695	4016	5982	668	5408	3034	4790	2981	2464	5382	3068	2501	4314	4819	2372	5326	3634	3511	5676	2849	4604	3952	4956	489	4261	1289	1767	412	2478	3890	289	2432
Row 24	3890	33	4786	4521	425	209	4154	985	2418	970	3494	3710	2363	716	5369	1807	4347	537	3141	5302	2397	4802	4646	5026	4002	34	3340	3077	3039	3844	4775	4564	4483	3034	2778	900	5501	791	4767	2891	5752	2831	27	5329	4288	2067	701	428	2798
Row 25	5122	952	2000	203	5690	4492	1650	5335	1605	1604	2431	3534	187	1300	1126	5327	5219	656	5692	3430	1168	2913	4068	244	3117	2073	4267	2207	2703	410	4622	2225	5774	342	5899	3140	681	2675	3136	3373	162	1742	1315	2581	3664	3939	1580	47	1605
Row 26	855	871	2562	3239	5175	2039	3652	708	2570	958	1032	2997	2006	2564	677	5833	5083	4113	2559	1025	3196	5880	641	2889	5734	1562	3835	5178	3965	4947	4915	2680	1439	912	3432	2431	5684	2053	2262	480	175	5401	5359	2487	2202	232	402	3760	227
Row 27	5396	3348	1131	2225	3199	1089	3960	5759	4690	2554	4207	4588	3859	4133	3505	4197	3231	3233	4861	825	971	1252	3057	2936	2677	2111	5621	4107	460	5643	5847	849	1925	562	1224	2497	2504	4132	1216	3608	1913	2301	4689	2085	2198	2086	2446	3634	4423
Row 28	3143	1712	2885	1499	843	4578	618	2326	1364	864	5087	3170	4114	4198	1614	212	3062	74	4999	2055	2606	667	300	1985	2302	3700	3072	5224	1927	1184	361	1344	2977	4813	5323	1019	284	494	2165	3335	5860	4959	354	4350	2685	3409	4649	2910	3087
Row 29	4090	832	2407	1643	3890	2738	5333	1457	1617	1138	5909	822	518	2139	3981	3087	1182	4565	1032	3664	2323	344	5161	4150	276	3980	5978	3048	4221	3883	4583	5442	4954	1349	2138	4345	3655	1978	5553	1394	3128	4891	1824	4812	5078	2863	2320	1280	3731
Row 30	3798	2237	2032	2582	4640	1449	3557	4256	3202	1131	5395	3265	5108	4957	5189	284	5333	2751	4213	2063	4814	2299	1815	2390	2480	2478	4991	3426	1437	399	2551	1396	2595	1564	5416	5640	4172	1640	4997	4945	2732	4547	4442	2766	4638	1753	3604	2443	5707
Row 31	3039	4439	5191	4712	5565	4618	5451	1514	971	862	4773	2866	5986	2784	4063	1671	3846	2052	495	5857	2360	5567	4112	520	3524	2846	3246	5881	4441	721	2528	4898	1745	1102	482	1321	601	5046	1354	454	2190	3890	3239	2612	1370	3458	3523	3253	763
Row 32	862	600	1567	4877	4735	2887	2910	3957	762	690	2598	3259	5339	4540	2240	4337	2710	5917	2766	2275	1862	1674	1076	1643	2693	2261	150	3935	2829	5210	4989	5715	5139	1275	3801	5808	3832	4757	4787	1316	5989	2729	4550	2221	338	1130	1477	5780	3359
Row 33	518	4183	5042	1969	3430	4223	4151	5397	1875	1465	2566	5781	5209	2294	5532	4524	5872	797	933	2800	765	2079	3872	3177	4238	3194	1253	16	94	4607	3315	3681	2040	1283	3877	1820	4955	4882	1631	1966	4761	3327	987	2567	3720	5038	2985	3274	409
Row 34	4650	4583	4419	658	773	2967	4037	988	4955	5957	3303	3111	5439	3050	5395	2750	2724	1605	4300	1200	1395	4005	2428	3372	3141	3552	42	3212	1054	1849	1963	1279	53	1265	2234	5807	1533	4077	3746	4771	570	4646	1866	1859	4473	2492	4949	4168	86
Row 35	1663	4449	519	4688	4569	3943	3888	4760	2931	45	309	5299	4640	738	5124	543	3940	1254	4991	4349	849	4492	2759	872	4848	4860	5776	5628	2096	5468	3723	2797	4934	5164	1207	5986	256	2316	399	3379	4670	2643	4653	1944	2000	357	4487	5327	4352
Row 36	1922	3072	2940	3790	2753	4808	4806	1491	4204	200	4683	3793	4598	5230	4499	5700	3650	5940	3566	3257	4747	3887	2195	2131	1432	1525	950	5342	3943	3538	2666	2069	749	3738	3522	350	2028	5490	2936	5819	5244	4296	1935	4668	1504	2491	2006	3743	1361
Row 37	5884	5227	3803	3798	478	4871	3886	3453	4114	3833	5468	4474	1435	4696	4174	4631	1614	191	5251	4700	1327	5321	5611	62	3064	52	1296	5522	3135	5926	651	5996	3670	4102	3979	3996	2190	4524	2931	5081	5802	1956	320	464	2055	1635	1956	4365	2987
Row 38	798	4285	5882	4859	4516	4865	4200	3351	2595	3143	4769	1614	4341	2684	4678	5589	3529	3520	5657	3208	1770	1628	4638	4745	726	1760	285	3872	1622	4668	149	186	1091	2635	5327	4227	2727	4918	2993	2333	3634	3449	5966	3880	765	1651	163	4457	3864
Row 39	5498	94	2489	1263	4882	4899	894	4880	4581	1408	2934	596	5852	599	21	203	4114	2947	4281	939	1835	340	4340	1598	72	1951	3004	2629	398	3511	2699	1577	2456	3724	5144	5715	2642	3988	2460	4071	1571	5504	4944	4916	1021	2199	2309	4973	3924
Row 40	309	4639	2581	3322	5210	865	1922	2455	1565	3869	5326	3064	1515	3083	3393	2238	2645	4689	2588	3662	1543	2060	2731	5167	645	3530	1582	1689	5978	2769	4355	3988	5885	999	2499	1319	3122	2834	534	4289	84	3038	4499	935	2672	3005	2692	1522	3350
Row 41	2352	3065	3812	2374	1319	4241	569	1195	5282	595	3458	4440	3421	2001	5821	3531	4455	1200	1906	5516	5521	1638	2310	1290	1297	4618	4386	4181	2468	2761	1367	3730	593	5021	4018	1720	3051	4687	1325	126	1166	5486	709	4554	3337	5966	552	4696	554
Row 42	2572	3047	2710	4778	5577	1862	1168	2921	4692	1580	4555	3346	3794	2174	2249	2690	4675	2553	5835	5930	1935	1616	1249	4438	3329	3082	5206	2624	3721	2613	5015	122	3216	1845	5947	1989	4482	3125	5301	3740	1444	5268	4798	3200	3661	3735	5271	643	4240
Row 43	1757	4740	3521	2874	4517	4428	3828	2549	1999	4578	4266	2881	2653	4118	333	5000	3803	3365	2071	5867	3623	1369	3861	5496	912	1644	2647	3349	1268	4963	4879	5841	5087	5258	337	692	5032	3307	3743	1826	5609	3348	2046	1475	772	528	300	1748	235
Row 44	1557	3392	5096	5164	1937	155	3960	5087	1888	1326	423	3858	1264	3821	1092	3765	4050	2524	5868	1669	956	4064	418	623	5509	353	3756	4635	363	5967	4995	1899	1872	2773	2681	4504	5288	2517	5465	915	339	1247	3514	5209	1872	1041	3736	2733	4832
Row 45	5694	4732	5045	1453	3216	374	3691	4269	5397	1681	5449	599	1736	2496	5137	5574	2321	1669	764	5436	2839	4492	3939	313	2575	3566	3716	1602	3129	326	2967	2715	2200	236	4099	3536	2047	5054	3497	4215	1243	2102	4569	3606	863	5570	451	3763	946
Row 46	2269	5036	5084	2717	2330	641	2471	2997	5154	1949	2738	2714	5551	5395	233	3618	5613	2032	4021	5102	434	2822	391	2399	4694	3087	5466	2091	4730	1814	3105	4775	5409	5304	3194	5509	3081	3004	3438	368	5790	3491	129	1757	1164	174	2061	3264	5227
Row 47	3444	3028	1803	5594	1484	4727	18	17	3266	3495	517	162	645	1811	603	2528	3134	548	3267	2165	1683	3545	5330	4657	3921	4591	5962	432	3265	1391	2940	3064	3943	335	4777	1762	1873	2445	5204	536	83	1316	1363	3184	757	3897	1624	2144	2450
Row 48	3266	4362	1540	5909	4205	1566	2571	879	4205	1438	2589	322	3038	521	5194	5735	4542	3512	5062	261	1191	1095	1278	5179	3074	5076	5388	1770	1090	4811	2926	3308	5171	4536	5565	2099	2250	4834	953	1021	3148	2976	4197	4631	3364	4511	3437	3066	5698
Row 49	5254	112	1169	1428	5408	2922	1915	219	4829	4674	539	2672	4572	5984	879	2390	3876	1584	5372	2210	376	2105	1480	5996	2367	3917	5635	3214	1525	2795	2915	3690	1116	2086	556	1478	4905	3938	3354	4422	2961	3665	3585	1721	2540	2014	1821	5150	1603

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.