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	3999	2515	2536	2792	2461	152	4979	5476	4842	2998	1387	3015	1151	3023	4370	3392	396	4508	2454	3111	3370	4998	4443	35	1924	2417	1658	5829	3567	5142	4950	1565	1657	1485	4357	4118	1637	3336	3594	479	334	4980	3493	1484	2003	1862	4876	2398	370
Row 1	1329	5509	3739	326	3952	3774	2250	368	5431	2078	3935	4573	1027	5500	230	2512	3856	4347	4149	1192	1940	4627	1525	920	2119	3009	2922	3981	1884	5320	4350	3212	4829	2089	3538	2780	5862	5787	3148	5293	1865	1082	3865	2892	582	4094	5404	4437	2441
Row 2	3552	5628	4381	2178	1153	5300	4297	4161	2222	2277	44	1541	627	3256	370	2715	793	3149	2576	580	296	1868	2444	1378	5733	5335	1959	3826	4738	396	267	2289	24	4647	4467	1176	3946	2764	5336	167	5041	5380	1708	5667	2635	2077	2381	3427	5226
Row 3	4957	4007	5522	825	450	899	557	5785	2858	4383	4523	3253	4649	812	3277	3296	5278	4453	1241	2042	3789	1408	1082	3168	3116	748	5802	5193	3129	3229	4418	2086	1236	3940	2910	1685	4838	3467	1470	1696	1849	5992	4949	498	803	2225	3793	81	677
Row 4	5034	2122	4466	442	3204	1633	3557	3951	1435	2750	1080	4664	1167	3165	5899	5106	74	1584	3944	3541	3053	5639	5390	3044	4588	5887	3847	812	3680	3927	1489	2714	49	5954	3155	3252	1587	712	1203	3022	3461	2282	1685	4628	5446	1583	3734	5520	3167
Row 5	1677	3060	219	1316	2450	3263	5903	2336	1109	715	16	5036	2203	2729	5084	2157	5883	2335	3744	595	3537	765	4055	5819	2450	2682	5265	4032	415	4785	1199	2092	1845	1417	3407	4294	4679	3310	629	5788	4024	645	4823	227	3373	3906	2384	3256	241
Row 6	128	3850	3778	892	1904	3596	3341	4586	2860	1373	5000	1644	2571	1092	3488	3988	4498	1781	2667	1808	2410	2454	5832	3054	1277	59	427	5183	2443	3682	5423	2570	1532	3200	3461	3435	796	802	2020	3656	2175	1020	5300	4746	2111	2788	2733	609	4569
Row 7	5399	2417	978	1853	2248	4032	3129	2306	4459	2311	4748	2141	1734	1318	3672	4933	4778	1107	5729	5580	3127	3384	1754	4146	2683	499	257	5470	3232	865	4038	2630	3282	5016	4483	5529	3048	1611	1835	1506	3921	583	3646	5655	1900	1318	4588	678	2424
Row 8	4316	257	5550	1700	2011	3695	4382	2510	3952	3852	5741	4817	1890	2371	2098	905	853	1626	3953	2463	3461	5458	384	4043	3104	38	5942	4421	4625	619	844	2941	876	393	4640	2886	4088	3021	5395	2040	873	5136	856	2762	1506	2953	3667	2358	4578
Row 9	1619	4821	2039	1077	5204	81	4180	5242	22	2601	3867	641	3445	807	1517	3838	5446	4402	1926	2467	3797	3965	3339	2933	4820	101	4438	1772	3767	795	350	5386	5615	2388	462	4819	2468	4642	4060	2490	1243	1926	3131	4687	2733	4647	2525	2178	3049
Row 10	4450	4644	846	2415	1983	3778	1234	2084	2216	3006	5851	3010	3355	5236	2625	5743	5698	1444	2211	4340	5504	4701	5582	1430	1831	4269	4162	478	794	340	3527	5243	4984	4373	1658	966	2150	2891	3049	4365	5896	2900	1375	3251	2135	4000	2993	1833	5444
Row 11	5204	172	4947	3904	5753	377	5735	4022	4539	212	4815	4878	3739	4058	3861	2111	5715	4827	4260	2606	1876	2625	2501	4775	4000	5752	909	2000	2745	2741	1443	1948	2913	390	5851	2666	766	5585	687	5304	5797	5502	4182	3535	3559	2042	5646	3274	869
Row 12	3906	5879	2744	530	2380	1518	4530	2131	2427	529	4876	5168	1971	823	2080	2361	674	4745	3127	258	5432	2431	55	4933	612	3590	2492	2654	3235	5766	3522	1140	5644	265	1670	2024	1783	199	4155	4209	727	3030	3376	2698	3852	5456	5058	4525	4201
Row 13	2184	4783	3632	4614	4838	2565	5226	2427	5056	1879	5661	4821	5400	800	4465	5665	2469	489	1447	2667	4643	5655	3394	1672	3031	91	5524	2487	5149	4049	687	1333	2832	4319	5947	1669	883	5172	4095	5938	1050	3756	4759	450	4555	3224	114	1024	3712
Row 14	1561	3691	2354	1216	1084	4026	4246	1175	3550	733	324	1599	1420	1656	4431	5738	1602	99	620	773	4194	557	1823	1949	5316	2272	504	2539	2386	1527	251	3946	5217	2605	5161	301	631	3407	1476	4181	4140	1799	5779	5559	3455	4209	5296	5057	4308
Row 15	5915	5830	2501	472	1652	4449	5788	3924	4952	2326	310	479	2577	4256	5696	5181	3417	5996	5811	823	1472	3991	4962	3271	3770	4521	726	1979	3816	5782	286	3731	5611	2787	4202	1263	1235	3989	5187	187	315	5496	665	2891	3752	360	2072	1168	356
Row 16	1882	1990	1828	5873	952	5098	3643	5473	5823	5621	3288	5604	5907	1018	5215	2693	5220	478	3928	3208	5664	4114	3523	5160	4779	413	2911	5138	2484	4078	5494	4366	68	1321	4239	1020	419	1882	492	241	1502	3780	5845	1409	4797	5060	4101	4017	5537
Row 17	2029	1224	5200	142	4747	4360	4920	5159	1270	4058	1643	5347	3551	9	5415	4872	4248	434	5290	129	926	5531	1631	4705	5375	3039	3502	4435	1140	1518	3971	3168	2742	3171	3310	1488	1530	2229	647	2799	287	2290	2146	3838	2299	1560	2709	546	1994
Row 18	1999	675	2919	1529	2305	1624	904	5344	5125	5338	483	642	3308	3651	3384	478	960	4871	2008	3189	5518	4806	3475	1808	952	1312	4106	2511	4021	4652	4505	19	5326	1424	1548	1631	3047	2451	974	2171	1788	1457	2813	5096	5107	196	5574	67	5067
Row 19	1581	3255	4585	386	730	392	1337	2042	4497	3848	62	3148	2353	81	2474	3776	1628	4104	822	4078	5078	2992	5866	534	5805	4961	5641	6000	4534	5707	5067	114	2961	3651	500	3691	4042	1837	5732	2539	5685	5793	5687	2037	5873	2160	5813	1501	264
Row 20	634	5579	5341	3626	5444	5874	3430	4405	5514	3429	2938	5221	2495	3052	2182	146	3552	5872	4187	5389	5603	726	5073	5395	412	1110	5268	2572	922	769	2835	1555	347	2175	5181	5790	2049	2610	4194	1563	39	1132	783	2534	4184	2964	2679	1736	2836
Row 21	866	1124	2438	1591	197	1833	2002	1306	1101	4573	2228	1869	1407	3783	2215	3582	2963	2005	5631	5572	199	1193	5610	1331	1976	2143	5514	4939	4822	1249	1775	5687	2373	4212	1277	2569	44	3279	3875	1144	1851	102	3012	3258	3884	5227	840	846	1231
Row 22	470	418	1430	1662	28	2760	3637	2170	2273	2576	991	3522	4350	677	5894	2562	1954	2463	2605	5232	337	3749	1083	438	761	4340	4322	5987	5179	5167	1218	5649	5585	2647	1311	5612	5406	4948	1782	1679	1523	2773	5200	5873	3450	5094	2434	5403	1556
Row 23	5039	4634	1892	2788	5716	2330	3548	4056	651	3535	3235	5818	4753	2883	5403	1400	4193	5014	806	3140	795	2484	4663	3568	1684	4536	1017	778	970	419	2333	9	5053	4225	2796	4769	555	344	2824	1205	3879	59	1023	2631	2942	425	4030	1135	5439
Row 24	4835	4275	234	1319	2937	3801	3002	1473	4817	3780	2442	5235	113	2451	4288	4337	5246	3056	4892	5590	5880	97	3468	5939	1119	98	2880	1544	4128	4014	982	2963	2288	1215	4281	5225	5015	1283	697	3831	5062	3139	3066	5174	5589	1353	3511	4835	4409
Row 25	2403	4424	4289	2499	1891	4227	3617	1989	1106	5161	117	5120	142	3080	1407	1356	1361	632	371	2644	1328	4201	1706	4467	1267	879	4056	2620	4390	2890	1029	792	1314	5317	3291	3205	3544	908	5194	4650	68	5310	3769	209	2389	5176	1565	3749	5807
Row 26	1935	393	1135	136	2098	5601	1403	2976	3656	4022	1366	546	5051	2158	1859	4367	5448	5063	1910	356	4256	559	423	3566	4328	631	5955	3503	2196	3704	3309	4130	4096	4444	4266	193	4044	5668	3169	1700	3690	4535	2246	2740	692	4105	1107	140	3168
Row 27	3016	495	1424	3575	917	4989	1903	1548	4943	5405	3744	2647	2714	1874	742	1157	139	934	5201	5807	4103	901	3496	2637	3146	235	3328	1250	1341	3468	4417	4357	3963	5840	1932	4880	4829	3834	427	3771	3239	4170	418	5952	44	1159	1109	182	2093
Row 28	309	5988	195	1209	3484	2831	4355	3719	159	5604	5060	3626	4021	3417	1588	3860	5348	467	2688	3182	894	459	421	5064	876	373	5107	2034	1481	5289	4127	1790	5276	4321	2999	2759	1151	1353	477	1309	957	5537	4935	4977	2953	523	2836	2300	989
Row 29	5524	5482	1883	5982	5903	947	858	275	53	2892	1756	5341	1018	3545	4617	5338	544	1376	489	1896	1853	1798	2853	1389	732	1829	4341	1254	4665	641	2243	4188	123	4125	4170	25	5071	5028	299	5124	1919	2054	4465	2937	5599	3081	2275	142	4457
Row 30	2763	2038	309	4560	4890	1698	5292	718	38	545	5383	679	2787	3571	801	912	1740	825	5983	768	1124	5106	2686	3178	3570	5623	2776	651	1897	2917	5107	4659	4954	5416	3219	3843	1113	2510	4561	1151	3055	3943	1830	5841	1513	2631	753	3253	3456
Row 31	735	4020	4579	5841	706	1756	3410	328	4532	4061	2225	1448	3168	883	402	2583	4102	4245	3696	611	2805	4847	3665	748	677	3506	2261	3307	4259	5513	762	4993	3533	5341	4833	4239	1097	2243	4567	5628	303	791	1075	3471	1674	1477	53	5775	5721
Row 32	3749	386	2526	2596	4051	3274	3272	1557	5534	579	5815	5047	1340	4807	2580	681	3640	818	1777	5882	5385	1404	185	175	2479	3655	1848	3955	3708	1623	3676	1457	2008	202	4052	59	3475	1324	1615	3009	1902	1429	2055	3241	236	4634	3922	3875	5452
Row 33	5698	3757	4836	1101	3942	5010	3580	1596	858	1535	5304	2481	5210	760	4489	5412	4812	4547	2886	135	161	5894	2036	1590	1949	5277	1825	582	3198	5700	34	2895	3456	4869	3996	1397	3879	1575	2993	4737	3110	2297	1217	2319	3057	5705	1731	1868	4251
Row 34	4616	2002	4412	4510	4038	1	458	3315	1826	1040	513	1525	1073	3408	4981	5942	1403	378	3821	2978	3371	2557	87	5668	3774	2406	2724	3478	4136	4591	1729	2752	593	141	1262	4631	142	1719	1945	1967	2759	2457	3492	3832	5864	2473	3774	1267	2851
Row 35	1594	4245	222	4151	4332	5889	1924	738	2612	5402	4874	1202	1130	1625	1795	1271	2886	425	1412	4605	2370	3379	1363	4826	871	5195	4690	3344	2968	5957	194	4561	4202	415	2712	2533	303	4635	3271	2915	4036	2144	4116	5166	3769	5911	437	654	335
Row 36	1848	5259	2704	5227	622	1530	97	5816	220	3440	2784	177	3634	1344	4378	4048	4056	911	4351	2690	4181	1265	726	325	5381	5892	4093	5291	328	4747	5626	2176	4005	2330	1402	4626	3859	1499	4442	4079	4938	1225	4256	2571	2569	2633	619	624	3544
Row 37	4970	3314	1725	235	4040	2050	5615	3931	142	4906	4259	4888	4532	435	2893	861	1836	1519	4720	3334	5960	2798	2272	1185	1054	4843	3753	3686	5462	4377	1230	4431	1690	2955	4665	5729	5004	4280	3660	5146	3185	1919	4033	1717	2353	925	2577	4188	2444
Row 38	1296	1522	2403	4094	3794	3587	5147	2636	1339	2833	2097	5716	4063	528	1405	1017	5193	1134	21	3472	4793	5166	657	711	3199	2373	3063	4123	4949	1251	566	245	2772	2969	4339	566	556	3485	3201	1895	318	5298	1610	4380	5826	3014	5397	5018	4147
Row 39	5417	2489	2939	4583	3145	3650	1781	5518	712	5904	4467	1963	470	4711	4735	3438	3049	5300	3993	534	2500	5888	852	1798	1497	5231	1623	4510	4628	640	2657	4045	3129	5596	2627	273	3245	4407	5791	3957	4311	4257	5919	4780	2968	4654	2218	17	3953
Row 40	211	550	452	98	1402	2250	1594	632	3872	104	5260	4512	2760	3304	1640	2355	5930	1913	5600	4337	1703	3557	2648	5960	3476	1427	2927	2129	3644	2943	81	3855	3493	533	3952	4894	2782	5546	5526	654	5649	4785	5165	2409	2088	804	4764	2018	2716
Row 41	4363	355	4419	1920	3002	4378	5395	4429	1304	1523	2073	4247	1603	5927	1739	2136	3879	633	4917	3424	158	5570	3073	4942	4735	5481	1030	5539	4244	3048	2254	2607	3403	673	4526	404	5050	3920	4833	354	5443	905	4600	1046	832	339	3181	4710	971
Row 42	2097	2134	1129	1667	5206	71	402	4686	1100	5940	2930	4148	2194	5537	1550	2866	4062	1954	1916	1982	786	2269	1425	1691	869	2470	2522	1207	5650	1231	2178	1747	3364	3306	3414	2570	3376	3815	1256	4476	3754	4185	2624	5947	3721	4174	2813	1783	127
Row 43	4728	3765	913	997	5189	2604	1865	1659	5125	3072	1308	356	5250	3055	3720	2556	469	289	5932	4283	1544	4408	2037	5729	1031	1983	3450	5204	4796	5233	5331	3523	2997	243	4520	2186	2846	385	3844	1971	3456	5152	2327	2706	2206	46	5261	2674	335
Row 44	5193	957	1879	3600	2993	1608	4630	4976	5057	3834	3771	4289	3164	1294	1286	3407	5813	3471	253	197	1314	2224	3653	466	4550	358	2671	4596	5619	5345	4930	4811	302	809	2411	3294	2416	1041	2269	1473	4874	40	5761	2038	1333	1047	5445	1146	4517
Row 45	5697	1342	5831	1920	4995	297	470	5353	2968	5065	4971	2312	3995	3782	2613	4803	193	5907	1218	1233	2176	2690	107	2215	2451	2144	3548	3498	1589	4693	2015	1286	35	1845	3206	5030	2141	3675	4382	5108	2739	3353	1420	733	1134	4033	5536	1327	3939
Row 46	753	2559	115	3443	2666	2330	5894	4809	5877	3391	398	4570	5405	1683	4605	1250	4888	3634	3391	2562	2015	2499	5301	5367	3919	34	501	1951	5569	1827	5890	322	4386	4	3765	1051	2333	3658	5860	2210	1049	257	780	453	1940	5384	1703	827	3018
Row 47	5094	3388	5032	1592	2689	4399	5510	2722	4900	1461	2291	727	1351	2612	5112	1355	376	163	3688	4034	23	5897	5082	280	676	5535	2219	60	1238	3045	3077	331	433	2109	1922	3121	507	1432	5843	5407	2893	2133	133	4243	4744	5245	5597	5120	5408
Row 48	3284	3154	5430	3181	2236	5709	3856	1770	1927	3916	3008	4972	993	3338	5404	3101	5260	2525	3608	692	2368	3014	3584	4500	3147	1826	3244	2391	1422	2364	1798	4706	5517	1228	1886	1752	936	5742	3522	2863	3657	529	1834	4650	3867	1238	1750	3127	3762
Row 49	5358	3818	130	2371	1401	4629	5518	3227	1873	1909	4649	4236	3707	3354	3752	4934	5239	5503	5870	4981	3025	2732	2638	3554	4566	1287	1420	5803	3036	4546	3565	2393	2364	3694	4764	3764	2323	4282	991	4195	190	5639	2430	3896	2992	182	2830	2231	5684

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.