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	5537	5902	5761	2440	148	3472	3123	2501	557	712	2483	5926	2433	914	5656	174	5645	4861	3383	1619	4767	2469	2046	650	3480	1604	1675	494	889	4607	3455	1790	5056	2303	5635	2071	2493	1696	912	5084	2152	2801	4389	1779	2675	3885	3651	3877	5498
Row 1	5055	1319	4011	49	4646	5340	3524	4435	4390	60	3047	4952	3348	5187	5535	2135	2926	2603	4579	2244	924	4721	4358	3854	4856	2284	2900	338	3216	1942	5478	5969	4737	1709	311	340	5327	4226	1713	5003	4262	3468	3690	2803	3150	2423	5015	5278	1909
Row 2	4467	5812	3636	1140	5590	5867	193	5137	1499	1833	5310	1321	3516	528	1683	675	4508	3721	5826	5889	3844	5294	2698	5377	5020	334	3385	3783	4817	5277	367	5770	5494	5232	1359	4086	1700	2724	4671	1240	2212	2877	369	3675	5037	5435	1657	101	5256
Row 3	4457	1976	3506	3932	4823	315	3326	801	4985	141	1755	3412	4520	4520	3785	5516	3868	1062	3433	3514	1409	3450	3540	4432	1809	3664	3970	2745	628	3912	475	5778	3763	2338	5762	3311	106	2270	2124	978	4285	5459	250	2383	1678	1774	2639	891	1468
Row 4	5395	5399	5638	220	4368	1992	2012	5897	2672	2372	3947	780	2296	3406	4448	1494	5812	270	35	2180	5067	4935	4244	5953	5388	3343	3626	4426	1656	5314	5774	73	1901	5601	3403	581	4881	4797	401	1678	5003	4564	1178	4765	3620	1391	3798	3881	2692
Row 5	2351	3760	2007	3226	1648	2176	5560	2698	4096	911	4051	2263	820	4623	3841	1371	2109	4176	709	2415	4831	4352	832	5272	5970	1008	4828	4858	361	5280	3712	1070	3367	3172	3621	1396	2993	452	3796	946	714	4489	2479	1795	3423	1125	2889	3587	653
Row 6	5878	5530	4820	5738	2107	3986	604	5410	2605	4517	5278	1655	5196	3311	2803	723	5210	3599	436	4561	2473	615	4243	3023	5711	3814	5747	5393	4470	2471	5347	4520	948	1047	2739	3837	5101	5891	3857	3145	3680	2106	1522	1284	675	2905	491	5481	1412
Row 7	5472	423	3386	1564	1447	4953	693	3908	943	1740	1488	4420	4887	2301	4574	2833	5031	5362	3774	2337	5881	2689	2325	5081	5139	681	5113	2808	1197	2266	4811	911	1223	4222	5250	4715	3124	2182	2608	2948	384	4885	4246	1976	1495	5960	3327	1095	4780
Row 8	455	5324	5904	3226	3031	2636	2165	5913	975	4818	1753	1144	3705	76	5500	2614	1467	1411	1909	3427	3109	3623	3545	5174	231	3570	4394	3775	3713	3770	3613	3893	4157	3125	257	3335	3726	4071	2724	4540	4282	2411	5083	4524	114	5294	4565	5269	4048
Row 9	2405	1918	2577	4827	3724	4475	3431	2164	5040	3291	4023	3378	1106	5301	3738	692	114	5607	666	5956	2106	2536	4050	2020	1726	5575	1354	1448	5693	5292	2553	1004	3885	2765	4300	1818	3840	5339	440	5693	4455	471	5484	4559	5710	3181	4649	4276	5229
Row 10	1743	4390	2087	4432	2167	4054	2248	5962	356	3345	1748	4700	4792	4280	5532	2808	3919	4119	1837	1628	3626	3336	890	811	3090	4692	3152	3254	3963	3536	1506	4703	2789	4993	3723	3626	5729	1570	5311	1596	2940	1713	5286	5872	4026	3703	3736	4714	5676
Row 11	76	355	2606	2719	3256	2936	2347	3570	395	4178	1642	4479	3229	4182	5310	2755	263	5572	4785	5739	4784	5722	4233	5459	2	4009	4067	3958	4767	5982	551	4210	3770	2066	2655	4225	1895	3238	5132	257	5774	2624	453	1623	3853	2328	5485	691	606
Row 12	550	3746	3880	5635	3869	1867	2271	5045	1828	485	4188	3592	2458	614	5199	4831	1442	346	2826	5316	5633	56	1331	1589	5917	3586	2159	1262	576	3721	5988	1213	3724	3176	5883	419	1751	1521	2761	1192	2419	5904	3756	1510	3105	3762	1568	5695	959
Row 13	5219	4793	3992	4918	5987	3387	1075	5315	2919	2259	5034	4168	4604	1557	62	3212	2418	5113	4030	2683	2554	3801	1599	3545	2123	2824	3130	3325	5142	5046	4338	5292	5239	4120	1240	5646	2871	2099	3270	4863	5738	1198	1449	350	65	4686	4940	3630	2804
Row 14	4884	1298	5762	5299	2579	4910	5011	2904	3100	2358	405	28	311	5035	3076	5910	686	246	120	3441	2975	4056	4461	273	2141	5204	1786	4573	5308	112	4104	3748	1979	4840	4189	2471	2363	4698	4279	1612	4305	5377	4272	5132	5479	3722	3475	3919	5837
Row 15	2666	5601	1619	3039	4712	979	4782	2502	5644	4371	3546	105	318	3624	869	3045	3675	1502	5197	902	2529	4732	367	4457	3951	4148	1664	3482	1783	2311	5140	5898	3273	3070	3303	141	3716	5614	1752	3735	3566	595	3404	4244	1056	4009	2882	3874	35
Row 16	5405	4863	4495	5092	1396	615	1853	5007	3757	4420	4327	1894	4733	295	2600	826	4735	3460	2982	2310	1138	3070	5682	4842	3094	2052	914	1546	4163	4252	225	1224	1039	1661	2266	2116	3064	557	5552	5141	5384	5866	4907	2461	5761	4803	4453	4298	837
Row 17	1583	5160	505	1249	4025	2715	3609	95	5719	3736	4070	4556	5030	3161	4092	5737	5697	3636	2184	2996	4899	3102	5624	3117	497	2506	705	5165	4620	475	1813	3971	3392	5436	1195	236	5785	4345	833	5820	1389	4254	4709	1778	551	1599	3965	1312	3466
Row 18	2739	545	5479	5194	4790	515	3071	1578	2530	5561	3168	2372	2967	5914	131	5561	1215	4207	1724	780	2263	1495	1344	5411	3223	4981	2498	5064	2996	2793	1562	2437	3266	22	862	3619	4250	3175	1691	3751	1756	2311	3348	2143	2682	4264	2514	2647	1869
Row 19	3462	4695	5674	476	3633	1321	4485	1630	2959	3462	1540	5042	735	1300	1964	261	3158	2493	3789	2474	5019	113	4413	5094	2494	3978	1449	4951	2980	621	3458	3160	1380	4203	5050	481	1623	2368	2793	2744	2486	5484	117	5255	4467	5714	2588	5063	2964
Row 20	5043	5580	5125	353	1342	2003	3720	4575	2312	573	1954	4417	5303	4153	5644	4409	4945	39	1208	4562	3570	477	4342	2713	5269	3219	2722	2684	639	784	1839	3442	4963	994	5975	3226	4895	5001	4255	3536	4074	4249	4015	3173	3113	3148	961	3753	2130
Row 21	3291	1668	1010	1141	5935	5866	5866	2785	2595	5702	1084	317	3281	108	5900	4079	1883	1442	1589	5432	2967	473	2451	4996	5269	988	1918	2912	1906	662	547	3418	1698	5570	4090	3834	4430	667	3185	486	5928	3866	3822	2543	1242	4263	3	1134	5684
Row 22	1714	1737	2065	1493	4538	2227	2547	469	3416	803	3065	5929	4260	4556	5418	4060	5973	853	5499	5318	3091	4544	5294	2794	2271	3134	5527	1970	4982	3948	4855	1060	2016	3341	3707	3169	129	5623	3248	1890	1951	3424	3307	3012	5806	5514	2412	1344	3843
Row 23	2376	4592	5608	5840	722	5505	1038	5916	1566	5249	2835	2817	3602	5358	4424	976	1733	5227	3123	2360	2742	4908	5044	5305	2569	1576	5414	763	3771	2626	3126	1304	5249	1109	1244	3283	5600	215	3751	1935	862	4835	2901	2877	5853	2343	2850	4973	122
Row 24	1454	3051	1842	2492	2119	920	287	402	2205	5705	2009	762	291	3111	628	99	4249	3136	1976	2920	688	1939	3822	3035	583	1557	5064	1725	3053	1007	4830	4358	2810	4072	516	3367	5752	4568	3884	597	130	4090	434	5539	3279	3896	3799	333	2902
Row 25	91	5490	1578	1237	902	4262	344	2110	5551	836	450	5785	3879	4081	1893	4511	3546	5567	5208	3284	4394	4400	1010	5953	4753	4087	875	287	916	251	1792	2111	52	255	1072	2751	41	4468	4198	4673	1794	1337	1010	350	2307	5750	1740	5091	2102
Row 26	5620	546	1454	5477	3189	4800	3151	1557	416	3765	544	3300	448	1024	4651	629	4642	4117	3953	3871	194	5520	4836	1806	2381	2397	5194	4026	1214	3659	4177	1287	1453	4170	150	3091	1184	5630	2356	3591	171	2582	5584	3975	2760	2109	3028	4234	5187
Row 27	5561	2557	5030	4635	272	1663	5223	4864	2366	4380	5146	2592	5592	2475	1995	4994	1286	986	4041	4503	5366	3270	5827	2697	1577	5737	3422	4914	403	4441	2432	1074	3141	3085	2741	484	3496	785	3179	2268	2637	5517	2999	4905	5674	3722	907	1517	3140
Row 28	2383	5992	1272	5345	385	5735	1627	3464	4196	5708	199	4072	1546	4401	5186	5359	3331	1021	2386	1982	2641	2832	329	4842	1857	4101	4774	3814	151	909	4413	4184	1011	4601	4255	3551	5057	5789	5277	3759	1329	3715	4078	5943	3842	2575	4223	1131	5641
Row 29	5629	3417	2161	2985	2180	4824	5800	1840	4561	4149	5689	4611	933	695	2468	1416	3905	5666	1570	772	2214	2744	1136	671	3338	1320	1605	4675	5746	4217	1058	2325	5389	1174	63	2665	240	4251	5693	2106	4729	4719	2201	3222	5080	3009	5001	5531	4746
Row 30	4957	1117	3569	3954	5777	2882	2280	346	2834	5696	3476	4380	724	4895	4613	787	5430	3677	5098	2988	5330	4772	4871	5668	1553	2503	3990	4353	5097	4122	3152	2975	3628	5722	1953	4367	5701	5378	4718	2616	3482	2956	1622	3249	2363	5703	2975	1898	1101
Row 31	5943	3725	3596	994	1761	625	271	2698	4754	5228	1120	261	1812	4442	3989	3743	5655	5024	1114	5160	3476	1850	5548	4303	2428	2225	4600	3268	3464	918	4774	3769	3081	710	3132	2734	5227	3807	5163	2333	2837	1818	2718	5583	2605	4116	4197	4346	3981
Row 32	2703	2421	1537	4690	3831	17	5399	3548	2766	5192	243	132	5529	3815	1315	5403	5248	854	353	4732	2697	1639	3067	5869	5872	1825	2317	5177	2921	879	5820	5347	5032	558	1457	1806	4142	4224	4548	48	2477	2937	4791	1465	3808	4757	4127	106	5310
Row 33	4169	4773	3033	608	4724	3643	916	1194	2065	1695	1702	4153	5010	5425	5912	5132	4049	4204	4405	4444	3936	5433	413	4746	1850	5053	5061	2925	2693	3495	3671	5556	2998	3754	5567	3007	1611	983	1544	4504	159	4998	1537	2443	402	1482	5734	3124	4996
Row 34	2669	1609	1059	2109	3986	762	3430	4686	5702	5930	5668	5213	1327	3019	5171	5103	955	1647	1890	986	3892	2942	1022	734	4163	4854	1294	1500	1858	1025	2995	3354	4635	2404	590	328	3811	1047	2630	5305	5717	3995	4611	4490	21	2031	2694	248	5413
Row 35	2003	302	1455	1842	2309	2361	4850	689	3930	4974	240	5085	1218	4364	3461	3171	112	5891	3155	3175	565	5679	1066	4621	3774	132	1812	581	5150	1264	4361	2533	1969	5624	5062	1061	2635	3460	1123	5265	4646	1584	4788	3703	5742	2513	1714	3607	1706
Row 36	3092	1433	4356	3044	2733	2368	3543	4127	696	2564	4340	1366	2926	4985	1308	477	692	3644	506	3632	5062	2266	2637	1547	234	4283	1596	5585	3350	5810	2142	1713	2113	2461	3100	4419	2264	4388	465	3387	1029	3138	5442	4837	3455	1563	2997	230	3986
Row 37	5433	1654	106	2472	4454	603	2980	3895	2855	2369	3600	1225	5471	1417	1023	1175	2536	1727	2454	3232	4753	841	4944	5768	874	1229	1947	2962	4789	3188	3266	4480	532	5379	3066	2600	5376	2678	15	5708	4287	4834	3895	1611	5569	5315	1600	1412	372
Row 38	1889	322	1530	1215	5068	1717	2142	406	1487	1342	2771	5176	2419	5118	2030	5298	2906	2439	1745	4070	5857	3688	2950	2229	4834	3630	2017	5988	4197	5228	5564	1537	4509	1094	3287	4134	3453	5388	2914	1284	4358	5572	4782	4272	2568	1181	5821	2383	5802
Row 39	691	3951	1360	5667	5861	2304	5562	442	5193	2205	5052	1851	5944	1616	2749	184	1703	3696	2278	1626	4082	946	199	1352	2450	879	2372	1293	1038	1121	3570	2460	2295	2737	1206	3901	2430	1640	3780	3380	5661	3707	245	5924	5524	3135	4824	3666	368
Row 40	5729	4796	5214	5466	3332	2758	5940	2506	5778	2823	1767	1326	2066	4251	4380	267	4869	4299	4997	3513	1222	4153	5370	5598	3697	685	5762	311	397	4501	1756	4663	4154	3731	865	5299	4155	3334	987	2452	4974	4061	4049	506	533	1571	849	2643	3806
Row 41	2294	5011	1265	1219	1298	2859	5603	5109	5971	2385	5154	2353	955	1697	4142	2686	1088	4019	2793	2990	3720	5588	2503	1590	813	3278	2211	4801	5190	5903	5214	4703	1363	3964	4370	1883	4092	1929	1030	757	2026	1816	936	5174	2247	1504	3902	3719	2283
Row 42	5252	2945	4114	5434	1028	2645	5417	4191	5814	5502	4352	5063	5981	2195	4329	5380	5053	3203	3004	5202	3572	3051	3639	713	5669	1406	3598	3352	5473	5797	2689	4535	4286	233	1602	104	1167	3584	2626	2321	2740	1416	5510	1801	4356	1841	3285	4522	3536
Row 43	1150	1481	3434	4003	4828	527	575	2234	5674	856	2762	5750	4839	3033	731	1156	4375	2998	2647	1873	2016	4457	1213	2890	3328	3463	5133	4614	4526	2097	5102	1413	2527	5311	3888	5568	5613	3361	5956	4683	3350	3480	921	5609	3008	1637	4429	1602	1815
Row 44	4954	4328	1166	4010	3329	5608	4239	4296	37	4145	5318	4123	5849	3449	5919	1952	2728	3716	5891	4414	4206	2230	845	5315	5640	1943	2405	5123	204	4530	3288	3058	278	4537	2343	5570	3670	3777	235	2751	1292	5948	4751	862	247	2304	2941	5309	2150
Row 45	297	4012	1687	853	3506	5844	2947	1550	3525	4475	5546	2983	2545	4697	3557	2733	2834	742	1842	5408	112	4667	5146	31	4061	2263	4626	1654	5038	5661	304	1355	1164	1521	3547	4964	2198	2339	343	2154	1661	2069	3702	21	2664	1099	1042	398	3447
Row 46	689	1251	1628	2738	172	5309	1945	2525	2805	4545	5916	5119	4075	5830	2816	3299	3928	4938	2553	1617	227	3676	1183	1091	2849	2238	565	4640	857	75	914	5683	454	839	1306	3983	5629	5689	2367	3646	2679	5237	4193	980	5153	3503	5468	4807	5764
Row 47	1354	2071	3079	775	224	2676	1848	3650	4712	4897	448	5543	3514	3477	5575	4717	3887	1070	1367	3812	5153	242	960	1757	2928	452	4442	657	292	2840	3974	2982	122	5354	1635	929	1619	5427	3736	3289	786	3558	5713	4648	3528	514	2787	5802	2851
Row 48	2572	1932	4046	5146	5050	4781	5010	5815	3880	1923	3527	656	5834	1289	983	5773	3726	2747	2678	4502	3502	3711	4280	4258	5961	936	1952	2046	4632	3232	3333	4085	2013	1439	4619	2133	1542	1054	3066	2455	3825	392	3837	3022	2151	4594	5328	4921	1585
Row 49	4440	3240	5955	3793	3599	1697	4117	5228	5201	2891	4723	346	2356	3192	2358	1290	5709	2755	2798	2617	4474	2347	3611	5929	3417	492	3204	2048	1543	3866	1191	519	3297	2771	3987	4061	4456	1838	3954	4205	613	1768	1361	5378	3731	367	3884	4156	427

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.