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	3764	5572	4073	3696	2222	481	5915	2605	232	3094	3148	3416	2908	1043	1334	5377	3157	3920	4726	3302	5139	750	5808	5714	1447	167	2325	4347	5251	4147	5438	3014	3719	3510	709	5940	3990	624	2544	4222	3717	5692	1637	625	734	2971	2	3890	890
Row 1	4727	1192	29	5477	999	5742	924	1166	2066	5271	416	213	4708	3430	3932	2218	4139	3871	208	4762	415	4429	2479	106	66	3103	839	3036	3104	4729	3925	1831	5921	3954	1307	920	3695	2230	2085	5761	1501	2501	5974	208	5930	3905	2426	4068	1775
Row 2	2633	2830	2190	1061	5308	2296	1126	2410	3134	4162	5514	1863	2087	1345	1783	40	2651	2703	3734	4881	4787	3494	381	1288	3467	589	1217	1372	3015	5285	3146	5647	2114	5336	707	1421	1631	1833	3831	4765	5994	3345	628	2080	4689	2410	2119	1340	5113
Row 3	5853	221	3899	3347	602	5186	814	1191	403	2185	4205	5688	5331	3851	1801	4666	4558	3222	297	391	1053	5061	384	4398	5688	2464	3086	2098	4583	4426	1210	4436	4646	5109	1782	5247	4295	2596	438	4697	4780	4642	4384	4111	2492	185	2776	1050	3407
Row 4	3073	1440	4459	2134	1824	2856	1822	4288	5942	3919	2871	4368	5129	1306	3013	4238	3088	2260	2532	5683	2697	1229	4462	1339	5613	2572	3831	5797	5348	4880	3203	2421	320	1662	4554	2144	4518	375	431	4459	4294	3301	2827	3423	4607	5840	1660	1694	2099
Row 5	4192	1377	4796	5420	5839	134	5032	2411	3964	4829	1758	2844	2031	4179	3163	3692	2732	5306	2209	3107	5737	668	1400	3038	3495	4823	1645	3334	483	3338	5433	4674	4715	4228	4094	4553	4362	3125	963	2326	1954	2721	5169	3984	899	2332	1676	3631	1638
Row 6	3885	737	1374	4553	2137	4412	2047	959	56	5380	1442	3394	4813	115	2108	3040	4208	660	1402	1333	1622	3727	3286	4342	2896	1270	5241	5227	2945	2871	865	830	3608	2238	5382	5744	649	1429	703	704	809	2144	4097	5621	2259	205	2661	466	864
Row 7	4062	1799	2485	1789	5084	827	4685	354	67	3911	3298	2937	4775	4128	545	1013	3510	288	1662	4938	991	2366	5747	3135	463	5368	5393	667	2028	5859	1530	90	1657	4015	1879	741	4842	563	1094	4908	4474	4392	1845	3249	2519	2389	4262	28	2677
Row 8	5923	4966	3667	2289	4713	801	2751	4080	193	3418	108	52	4948	198	1708	2962	2076	2448	1803	2639	3542	711	1113	1933	2555	4361	4451	4944	2623	4479	1620	2545	3445	5287	4834	2157	87	1585	237	280	5002	344	331	3949	542	2039	911	2618	4487
Row 9	2714	5256	2028	3424	368	3960	5979	4729	2411	4922	1351	890	542	3896	4334	5828	2730	491	5915	4314	727	195	3315	1071	526	1263	1612	2564	2174	4229	1051	4887	3485	3078	2310	3853	1037	2289	2581	3448	1211	3932	4337	1752	1828	2671	1580	4557	3161
Row 10	1494	2870	3888	1689	184	4958	2214	1447	570	4778	3620	4798	5828	2507	2283	2905	4817	135	3942	1105	2716	1390	2315	648	5726	4067	2475	2396	5646	1032	5557	1140	3901	3444	2828	4085	2402	5042	5532	2971	3819	3152	1769	3647	5658	4051	552	4475	4186
Row 11	4493	5579	901	5883	1894	1548	5608	5961	4023	2004	5607	5054	1561	746	2954	5004	3574	1039	1406	2615	570	4377	433	3721	145	4079	3379	4196	4630	1853	2382	3123	1432	3282	3005	3326	4830	2613	3286	2852	4617	2892	1906	178	3638	4860	5182	1211	5898
Row 12	587	3825	468	4963	4257	4189	5108	2336	1568	3303	966	3420	5684	4089	4852	2966	1094	2177	1796	3707	5463	4648	2323	2354	553	2500	5991	5413	1681	1201	5310	2268	5026	5778	1230	3283	3967	338	5618	5534	3640	584	2954	3324	4672	1805	290	5765	3981
Row 13	2085	3471	3443	733	5794	5797	1286	2294	5788	698	3975	989	8	242	14	5785	1472	3296	3751	1809	2914	3285	5449	3497	238	2773	2169	2042	3063	1934	23	5148	5405	3466	5880	5199	3263	1165	1492	3050	1862	5467	4039	1869	5708	4052	1654	1180	1348
Row 14	5405	2989	4261	2689	2437	1758	2926	5210	3927	4968	2272	5861	4990	1419	5265	2456	1298	4463	5718	2462	5955	2768	4324	5421	806	193	5129	4857	1846	309	205	1251	3297	4466	3939	5733	224	865	4943	4150	5832	1214	4010	4822	2632	3275	1277	3929	1738
Row 15	995	391	1692	3762	4715	1113	4567	4907	241	3424	753	549	3629	2003	3846	2094	5942	3579	2317	806	2521	467	638	3734	4476	5459	365	1751	736	4294	3488	1731	4685	5180	5492	3399	292	4059	2306	533	1483	3058	1082	5111	5061	4927	1205	5003	2505
Row 16	3521	5809	5025	3987	446	2759	2463	5905	3123	4213	641	1417	1701	2371	101	880	1863	3500	1171	5922	5805	1704	1405	2863	2785	516	1924	1711	1720	926	4216	5240	735	3241	3227	1180	5999	5689	1085	3122	3902	1725	4538	5602	4096	4638	482	5959	2137
Row 17	1652	5880	1942	3356	1285	4804	140	1800	727	1851	3519	1653	67	2759	2387	3307	5985	3567	3305	5674	4652	426	3575	376	4963	3177	4472	3601	3658	4430	5738	5310	4310	1679	2665	5595	483	2805	1394	1210	4655	4913	2862	4721	1671	5249	2027	1656	2815
Row 18	5332	1330	1466	5758	4904	1842	4720	2081	314	2321	5738	4744	2059	5047	3054	3737	1712	2648	4219	4516	4042	5429	3170	2954	2290	1891	4625	1539	3918	281	4354	3249	1610	5819	3007	514	1661	1727	2594	1975	4047	2332	718	105	1379	3772	3842	3090	420
Row 19	2061	1606	4461	1489	4776	1415	3779	666	40	5317	4584	320	3670	1833	1930	3489	4839	2444	5150	565	5037	1124	4611	1369	1842	4716	2747	5614	2558	5837	33	4618	1443	4493	106	218	5908	3885	884	5947	3201	5467	267	871	1299	2196	4359	137	4639
Row 20	3509	702	3676	4632	5313	5045	474	4028	1792	88	585	1628	120	5203	3071	4613	5309	3288	4520	3193	4171	4467	394	3637	4733	1264	4936	928	5622	5073	5567	3130	5774	3243	1762	5086	2287	2236	3114	4078	2323	3699	5706	2443	2901	2776	1056	2209	64
Row 21	5575	5402	4234	4041	5795	1871	2774	1058	806	3702	680	5879	3268	3810	5652	511	5572	4738	2797	1808	1851	875	4131	5550	580	573	2450	3356	1628	4659	3419	1203	4060	1653	5244	3855	3523	2017	4912	4329	5718	5592	4207	2986	3401	3858	3497	2972	2596
Row 22	293	4779	4446	1168	2909	3995	1748	3482	445	5103	5110	5104	2522	312	3164	4174	5556	1018	1697	1573	5930	25	1291	5521	4231	4277	2921	2089	1773	5893	4684	2065	4672	3130	3233	1581	1125	4980	5062	1570	4083	4172	673	604	4484	3836	4778	4039	4854
Row 23	474	5611	4783	499	902	4303	4730	5178	1224	819	950	1117	5502	3015	5788	2632	247	1369	3756	5226	431	5326	3308	4602	5998	3912	3085	3833	2689	1124	2686	3163	735	1469	3662	1636	5771	2391	813	995	3209	1763	2111	2711	4777	1899	5343	5024	3267
Row 24	3099	4250	3698	2424	1557	2299	2421	5469	5384	254	2158	507	2940	5321	1241	4408	2982	2877	4179	5372	3690	5173	2581	5452	1284	5291	4229	3183	4633	3252	450	1732	1501	4147	4155	3058	446	575	2527	5829	828	4684	336	3767	4004	1576	2175	986	4453
Row 25	353	357	2142	5526	2938	1594	809	2228	5822	3992	861	3074	4441	2593	4574	2588	747	1632	3033	1321	4158	2861	2149	2842	3196	5916	846	4772	2090	1831	3225	2443	2188	5366	1968	5125	960	2777	1353	781	768	2214	3855	5208	4806	2429	1795	5552	4060
Row 26	4827	873	2218	1688	3022	5060	4884	2937	5905	3655	5027	1735	879	1470	3923	245	3437	3047	1204	213	4399	1985	980	612	5840	188	5418	2268	1983	4969	327	810	5841	2545	2497	2862	1604	1380	5799	1509	5035	4826	3244	5914	295	1166	159	3731	4212
Row 27	1363	3944	2611	3347	4923	3223	3186	5111	2640	5454	1093	1609	5781	1902	1449	2325	4399	4311	3929	5778	4110	5437	4813	2936	2680	4727	3230	3845	4885	961	2057	247	4904	4668	3594	3827	1890	780	2937	4530	233	4030	138	13	5931	1587	2338	4329	5898
Row 28	266	4107	4007	5702	2920	942	2382	1646	4172	227	530	5132	2283	777	4036	951	4370	1862	2840	5150	4799	1369	5382	2828	1507	5394	2758	3093	1731	1087	2990	1997	5193	997	1699	2113	1938	4080	3758	109	4306	4288	5241	589	5064	3276	1539	3434	5138
Row 29	4379	2584	3936	5748	1965	763	1254	1359	3521	4346	3090	4607	1335	5086	3800	2332	784	5912	4269	4863	3669	4378	3169	1957	3619	3758	1021	894	5297	4455	31	3676	1038	3967	3423	3002	4729	4676	4360	2249	3021	1449	856	4356	535	4655	687	1318	4566
Row 30	4956	181	2235	3334	3350	4191	953	1108	5212	1846	404	3666	1877	4079	4703	5844	1501	1705	4572	177	65	821	3198	1514	1677	1554	2048	331	2241	3365	4897	1197	3546	1132	4530	895	5323	5482	2002	4534	1328	2406	2199	3205	485	902	3048	1986	2606
Row 31	1620	2162	2670	2441	5359	4183	4117	913	230	4448	3153	3595	3344	4349	1141	4475	2879	2035	3797	2361	4037	2330	3689	443	4529	893	927	5430	3941	2912	2035	5561	5073	4705	2001	4432	2887	118	5344	3117	4565	2496	712	1909	845	1852	383	3723	3887
Row 32	4180	83	1923	510	3771	2366	5039	4664	3292	4468	2605	203	503	2166	5276	5207	4167	3708	2094	4284	3051	5210	2849	5547	5921	4757	391	1772	5140	4113	5658	3320	4196	1581	3829	1967	3946	2867	631	1238	1335	3235	1441	1837	5401	716	1044	3567	4424
Row 33	3137	1850	1474	2346	4699	1020	2267	3455	1411	4039	2595	5524	3697	5914	3719	5277	3743	5686	3223	610	316	4461	1944	3551	5901	3781	2952	617	4824	518	5040	1961	2368	514	4307	1066	1533	573	4521	2944	4611	1115	2467	2307	1028	186	1584	4771	5872
Row 34	4807	5380	187	3268	1323	3738	3168	5104	689	3785	3927	1207	2825	5888	3574	3338	4194	4639	4871	4766	3159	1814	3377	4274	4281	5684	5302	4466	1268	4072	4337	75	3451	4524	3342	4774	2262	510	3877	2951	4294	1804	4157	1119	1691	1731	4456	5884	369
Row 35	3327	4650	3528	5141	2027	1801	3421	1710	1103	1886	2978	5174	223	3052	2624	4747	393	1398	1008	903	5274	3959	5197	1078	2115	315	2769	3845	4771	2653	4214	2097	1302	1742	1237	3329	3543	4658	5038	4645	543	2016	3818	766	5067	442	5512	5460	1840
Row 36	520	362	1114	4478	5558	2191	593	5873	4959	4438	4643	1612	2652	740	2913	4394	1976	241	1936	633	5279	581	1176	1294	4399	1942	361	4841	1454	5820	680	1974	182	1793	452	5740	3984	1044	5612	2943	5482	4255	4554	2134	4994	1467	527	970	1708
Row 37	2463	1603	986	3043	2779	2280	1441	4721	2640	281	174	2460	960	2148	2642	2753	2599	2382	736	3642	1993	3679	3124	248	2232	5257	5242	3698	5784	212	5405	2246	1815	391	5288	4593	2671	728	3314	5311	1009	3488	1770	1969	5635	4412	4721	2233	793
Row 38	5457	5875	2786	3135	2998	3033	5367	2255	2275	3064	2039	2486	2469	4284	4300	2860	3572	2893	5530	4300	207	4840	5308	3694	610	1276	3328	5022	5997	5560	5814	5453	5435	2599	2587	2432	5632	1953	4687	1907	5017	726	4392	1486	5009	2692	4346	2581	5585
Row 39	3875	880	5791	2715	188	3484	3325	1463	811	2346	1460	371	2159	912	5805	4758	3499	2237	4390	5452	924	296	4469	1649	4687	5955	658	1379	4300	3238	963	2175	4117	753	4889	4304	4236	2213	5767	5047	4558	1227	5418	717	2138	5223	5475	5637	1460
Row 40	3864	5089	2383	4159	3558	4032	2846	3512	4689	4224	1811	1927	5187	3985	44	5939	2874	4348	4175	5086	4115	3222	3644	5341	2640	4361	1479	1862	3835	1115	3321	1699	204	5704	5858	3761	3736	2703	1272	2425	927	3083	4351	113	1068	4394	52	3941	2741
Row 41	4227	3027	855	1448	671	196	4087	5032	1674	5949	2866	2789	3269	4565	2992	2973	4422	753	708	1125	2025	3132	2051	5107	1482	2164	175	5876	2216	4116	2617	442	1142	3472	1890	1813	3667	5976	844	5340	5924	3710	2129	3193	2274	5120	166	695	5872
Row 42	873	1820	1896	4005	3870	1003	5487	34	1177	5362	2250	5293	1979	2691	434	5450	4581	2247	3117	4557	3090	2457	4481	800	4585	1673	3073	3705	1839	3768	3577	2711	5587	5473	716	3457	475	202	3491	1652	5564	5740	944	1542	2431	1378	992	1011	3624
Row 43	4109	5567	714	565	4047	1513	5150	5720	4586	2855	1558	2354	431	4269	1940	5903	4984	5397	378	5185	2887	2030	4748	2627	2974	290	5057	4352	1282	67	1975	5390	5634	2689	5955	3681	4202	5104	3400	2788	1958	4957	5141	2389	3225	1081	2292	2209	477
Row 44	2669	1393	3364	4699	141	5990	1672	431	5047	23	1712	5114	1998	1101	4747	4687	1055	2427	2888	159	5827	5675	2117	4783	4816	4506	2008	5896	797	4217	373	3466	5610	3737	2164	5751	3726	3835	181	2773	3858	1892	1886	5855	2993	633	4542	4048	3059
Row 45	1429	4207	2886	1104	324	1669	5919	4829	3676	5815	5625	1893	188	3090	1502	3924	5254	1252	1650	3088	1432	4422	946	3324	307	801	317	940	5342	4364	3999	771	2570	884	1874	2893	2552	1793	1722	228	1608	1346	2120	1795	4436	3621	5719	3689	4872
Row 46	1368	777	304	5789	1722	3628	96	2523	3944	1035	1864	2307	5033	2634	4877	5917	4508	1770	2468	300	3491	2695	1908	4837	4814	3702	3272	2434	3421	961	1306	4788	1737	1610	4577	3459	5237	4673	5981	3180	5708	1845	5486	4741	4478	4363	4657	2985	133
Row 47	1124	3285	3623	3818	5193	2460	2631	2894	5731	5065	315	692	371	5102	2429	1980	3678	5887	1216	2351	5868	4395	2058	1712	3881	798	190	2244	5454	3174	2376	578	459	5999	4395	5651	2458	1026	2545	2189	91	2859	2880	461	1961	5308	2440	5638	5195
Row 48	3656	1989	5062	2051	4046	774	5932	4843	963	2175	4297	4137	4550	4874	4595	4549	3269	4246	1006	4295	791	3194	4385	3649	74	4845	5610	5381	1285	5248	4576	4941	1236	3637	991	5281	4411	922	4124	5373	3097	2421	3509	1647	1294	2104	195	4563	350
Row 49	1200	2857	1140	4394	1241	4789	4467	86	4398	3848	1371	3645	2423	311	4880	60	1302	4161	4470	2224	2284	3843	5320	4704	1352	966	5998	3455	1160	4561	3805	2360	1417	4944	754	2658	3733	5221	2744	2130	3069	4115	5775	5492	4425	4655	5551	5727	2815

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.