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	336	213	5821	2493	1632	2741	3255	2478	5158	4960	130	4071	5381	577	3496	3353	4149	2696	5796	1020	356	594	5334	5296	4190	5966	5841	3596	1177	1841	5131	5409	3808	3441	4999	1981	210	4289	1941	630	1849	3589	2263	4776	2445	1080	5992	2558	5361
Row 1	987	1241	4354	2239	2214	5492	4918	2155	4929	3752	159	5829	4906	3818	1494	5238	3829	5276	4547	5546	4787	3060	5551	4024	4791	35	587	2275	3533	5092	3019	3195	3340	4039	848	453	4972	1478	4985	3359	422	4074	438	2975	406	5765	1389	3021	5915
Row 2	222	3261	1314	1970	3281	1750	3416	1015	582	3157	1267	1988	1899	4212	3582	5411	1569	3411	2147	2040	4761	38	1182	303	2838	5729	4076	5363	3867	1693	3140	4926	2075	3404	4790	1904	75	2473	5620	2905	3220	2593	1405	4870	1005	57	4690	1832	1846
Row 3	206	322	2902	4739	4359	3730	5566	4919	3514	1543	4779	2907	4108	1871	4574	1375	3958	3250	5483	629	304	3809	4278	1384	4371	3121	5749	566	2413	4265	4240	1252	1756	1779	1494	5764	2049	1614	4238	2269	435	5819	2629	2007	1803	2513	5461	1773	4416
Row 4	1907	4853	5493	1246	2947	290	2568	2093	4802	5212	958	723	2989	4275	1560	4295	416	5531	1091	3430	5917	4078	528	5649	4336	5333	2063	4013	2218	744	470	4205	4310	4259	5798	3109	5575	3922	4598	4481	1135	5645	1504	3223	1507	2539	4659	5627	5652
Row 5	501	5464	111	5429	393	1142	2412	2237	3608	4753	1756	5172	1624	4433	342	667	1541	3377	2979	538	2552	101	2750	3603	2950	4907	4383	1445	5888	3684	2995	3455	1743	206	3745	3043	1579	387	5261	2266	2129	259	888	1933	410	1179	4281	380	1210
Row 6	258	2534	3431	1724	211	1342	5700	5963	708	3568	1250	5229	2599	3969	5035	1276	54	5191	3524	3017	3108	3112	2665	2591	727	4485	5988	5991	3196	3867	1623	1927	1672	4123	3003	5593	1114	5274	5969	1538	2837	1023	5744	1388	2224	5633	3181	1722	2943
Row 7	3956	1037	341	3154	5003	5498	3227	1678	2324	1882	4063	3039	1911	1050	3403	1014	4489	4979	3840	3007	2866	2329	4627	868	2421	1487	5618	1806	4663	4225	3760	5645	2777	5137	5708	4180	4911	2250	4582	394	5968	4903	3482	4219	5176	482	5453	4079	4742
Row 8	5592	81	4899	5926	3067	3230	4117	2470	1196	935	4273	1850	2806	1861	5909	5697	2328	1176	2298	4128	277	3901	569	3396	5529	5705	4461	3677	401	2897	3011	690	5800	2641	272	3746	2472	1893	1327	5555	214	1044	2450	1377	3826	617	3541	4347	5949
Row 9	4437	3492	504	5097	2040	1540	3632	3816	2702	2260	4212	3845	4485	3111	1740	2961	412	5544	1898	212	4910	4440	3508	218	1593	85	5946	2865	225	1960	1775	2609	3425	1297	2330	2647	2416	4375	2821	2754	3361	539	5503	4292	5459	3520	4405	2161	1772
Row 10	1365	794	2020	474	4274	268	603	1904	3808	1827	4554	5569	3133	1770	1724	729	1465	3575	3230	3954	4478	5121	3508	3594	4682	573	406	4059	454	2927	4159	16	910	211	71	52	2634	1751	1143	5212	1777	2217	2241	3354	5183	5066	4782	5319	1124
Row 11	1204	4469	3371	1085	1905	5420	1577	5864	4486	2269	3753	1137	2274	3193	2636	4543	3596	4070	4168	5159	155	2654	5820	2807	5453	2181	3288	2228	1713	2591	640	4787	1194	5070	586	1630	1793	1547	3718	1231	1969	1629	2715	4633	1357	4728	2817	3545	5050
Row 12	3612	1249	5302	5880	3473	5443	1888	690	679	5766	4013	5062	1283	772	4233	273	781	4459	2528	2644	928	3863	2697	3020	2916	1633	2145	2494	5293	2721	4380	1612	36	3360	4171	2739	5232	4439	2225	1916	4529	5559	691	5465	5668	4767	3195	3436	707
Row 13	4090	622	3309	3531	3504	2131	514	914	4154	1004	2130	1051	1370	4283	5861	3469	2601	712	3462	2670	670	2724	3566	3671	5115	4949	1716	143	1552	1670	5504	3549	1120	5394	5860	1064	1021	4436	2396	116	2312	3929	2519	3809	4862	2671	5187	4676	3989
Row 14	2141	5082	1445	3662	439	5126	4537	5736	392	1792	1829	3816	1494	4709	4859	5198	4858	2961	3039	2499	4145	3482	5127	4901	932	4192	374	1292	103	747	2806	1605	5091	4736	5591	2699	4236	2486	870	2715	3169	3952	282	2831	4022	3961	2950	1309	836
Row 15	2309	5402	2934	2182	5456	5598	5430	2319	476	1666	2303	119	5724	1370	4819	2908	4112	973	2407	4972	3305	5342	978	2924	5747	4554	186	5010	2233	4727	2386	4333	4179	1953	2493	344	3464	3075	4506	3296	3212	2405	18	2073	5958	3945	2949	4629	443
Row 16	4329	2887	3372	4704	212	2166	2153	3766	4010	4027	5929	1090	1944	1122	2700	24	1032	1032	3022	1182	3858	1722	4199	5315	3950	1320	1215	230	5142	1410	2032	2982	4844	3858	2103	5113	442	507	2140	4182	4118	4026	2000	2466	3319	545	1437	689	568
Row 17	2506	723	14	2777	3222	2837	810	1158	4122	2553	2582	864	4422	4084	423	3799	3	5559	2177	4569	69	2362	4005	3202	2126	2917	5845	3478	3635	2371	3598	4410	2371	5765	680	183	1431	5644	2101	2972	5291	3423	385	2886	2184	4288	2513	2965	104
Row 18	5188	3120	141	4361	694	1741	1517	2577	1583	4018	3611	5536	1389	2896	3931	4359	3811	2188	3264	4115	276	968	178	5051	417	5426	543	5003	1524	5850	4284	3335	4720	1027	4372	2921	986	919	5053	2373	4142	2324	5065	890	955	4256	4063	2218	4181
Row 19	3032	4903	5788	4446	1474	5930	3267	3183	5404	937	1581	45	2412	2561	421	442	2310	1672	2074	4205	2931	3813	1590	5496	205	2938	2733	5057	1534	3351	3177	2772	3469	2535	2100	387	5915	2597	5966	590	1808	581	2564	2624	1643	164	2893	3830	5989
Row 20	2806	705	502	3431	4703	2540	5925	4433	1724	4169	3867	5699	4390	3203	290	5176	816	2337	2444	3835	5226	2940	1964	3183	3297	4043	5635	1662	3760	1777	4026	673	3380	3769	837	5268	5000	5013	5877	2302	2555	4379	1314	5097	1319	4585	2759	4994	2600
Row 21	736	3812	2638	3481	3548	1863	2959	5950	1116	97	4201	3430	2340	5320	5091	5888	4252	2219	326	3089	7	877	4866	5977	5974	1620	1420	316	5584	5500	5610	2637	5652	2434	3475	5269	1196	4442	1210	3736	918	3031	284	3535	136	5185	358	1177	5395
Row 22	2000	3208	2678	1712	1581	3935	4855	2731	4347	5792	5077	4776	5703	3629	53	1107	4116	4143	861	167	637	1597	971	1302	5818	5810	5546	2720	5680	5595	936	1310	1517	84	921	2999	3158	5669	1269	1731	5435	4974	3979	5665	2018	5523	4267	301	5179
Row 23	78	415	2661	517	2131	3112	3016	820	3597	384	690	3432	4006	2701	3771	4331	5443	5055	5413	4460	2378	3187	1704	4375	3565	3520	1513	2221	2838	3742	3911	1046	5012	1616	4457	1292	1100	3962	3891	176	2058	3328	3950	1120	3390	838	5147	3964	4780
Row 24	4967	1955	1311	2722	2746	4984	2377	4197	5763	1462	3512	194	1178	650	2187	3023	3184	2149	2526	3366	4726	1720	856	5217	5260	4242	1904	5436	5326	3721	1340	3773	4769	3635	4158	799	4370	4539	3722	3279	1345	1277	5431	4062	2775	4873	1387	1723	380
Row 25	2980	1804	1566	5570	4880	2730	43	4560	5888	2405	4185	30	4896	3175	2971	779	3672	4309	2125	1435	2296	963	4024	5449	4515	2306	4761	1321	2711	3779	1676	5772	5759	3392	4883	4256	2713	2661	5110	384	4277	3608	333	1894	4234	326	1282	3594	2290
Row 26	2939	525	3578	5717	1533	1646	281	2827	345	4894	4336	1899	3352	3402	1001	4333	41	2382	2994	2113	5337	874	5821	3403	4225	5125	4463	5360	2296	4372	4381	4424	3001	229	4183	2132	1442	60	5665	708	2503	2794	3970	3022	4106	5718	1017	3328	3054
Row 27	2935	716	1985	3098	1326	5847	4751	4353	496	3825	2554	3229	3930	4484	202	4380	1568	3064	3101	2772	38	954	663	3759	1957	2239	3915	1530	456	5457	302	119	842	2922	305	1661	4733	4053	1015	5478	4154	4290	1931	5876	911	3743	39	517	2402
Row 28	624	3088	3424	5397	1395	3514	1067	3790	3211	4830	2061	2276	3677	5820	5432	4483	1274	3173	2667	5773	3308	2304	3505	1675	351	1650	3009	1837	1130	1386	3568	2408	3004	2975	5573	4888	835	1890	2017	4244	5144	4617	1406	4532	3328	5297	5227	5668	1210
Row 29	1017	2622	3965	1558	1045	2506	1775	3494	3765	1038	2828	149	1947	946	5266	379	4849	1527	1162	5591	3124	908	5297	1647	1357	5701	1645	5780	2517	4082	2237	558	901	2366	1369	5856	5124	4582	3388	2840	4330	1387	1694	784	4507	3867	91	4870	2859
Row 30	2710	2386	603	2966	3607	4308	377	1035	5321	4374	5716	504	649	20	576	1539	5173	1756	4462	5315	3312	2694	5602	4623	1351	5326	4045	1194	868	3040	4945	5567	5815	716	326	217	5155	26	670	5691	5461	1848	4033	3062	3807	1383	703	3561	5943
Row 31	4753	4599	5227	2012	426	5770	517	5043	5278	2233	2224	2351	1197	845	2498	2687	2982	2085	5043	1684	643	1475	3475	4765	5259	113	5009	3609	405	3697	1710	5505	301	4553	4968	4896	5094	1742	894	3340	4522	501	3297	5286	1128	5585	5129	3945	1148
Row 32	5512	2767	5663	1740	5933	5390	2590	2407	5684	1541	2111	2683	3658	4748	563	2537	203	2769	2515	4103	5319	4755	4123	63	4500	4121	1994	4532	253	5211	1291	3013	5056	3866	2238	2920	4202	5285	3026	5171	646	4349	2516	4953	2331	1531	3980	2124	1286
Row 33	366	1198	5192	3386	1399	3991	272	1225	845	2848	3260	1624	4341	4510	1535	3092	1459	3763	4028	1203	630	3565	3355	2697	1679	5601	193	4966	5038	2179	3860	4298	1916	3625	3164	4388	5635	2102	267	4978	2240	4767	1413	2399	5129	273	5306	3600	2883
Row 34	2928	5140	4861	3217	2155	4862	2208	3631	1573	268	4448	2456	5184	715	3564	5735	3473	1136	743	3560	3440	3371	353	3479	3383	3445	2338	412	1177	629	4206	4325	4841	5269	1942	3901	1642	4681	5109	2620	4912	4146	4860	3288	2072	5034	1551	1600	1974
Row 35	2954	3295	4598	47	2753	3009	1137	5934	332	2088	443	313	298	2685	5538	3325	5576	2712	3680	5618	24	2779	43	1119	5767	4117	5881	3744	4892	1941	840	253	2308	4087	5268	1759	4059	3735	3810	4608	5012	4194	4620	3506	938	2467	2467	519	1696
Row 36	2170	3903	3037	1767	2168	4398	2446	2565	83	5436	4456	4996	31	3415	3216	997	1856	3468	319	5695	2678	316	5481	1571	3259	2507	4388	5632	4784	5264	5466	4830	13	2507	3437	4356	4310	2929	4502	1756	3265	2896	343	1394	1162	2223	4906	4341	4665
Row 37	4863	4033	350	2602	5010	2209	4396	3438	4512	3502	3805	3629	5973	4887	3398	5609	2242	4140	815	5270	616	3974	4996	75	381	1899	223	5618	190	1166	475	1867	4993	3793	3194	730	5316	2403	3318	3903	1507	1794	1725	2238	216	5434	307	3390	157
Row 38	1449	5754	3085	790	1909	5310	1501	936	2205	738	2944	5567	1026	4943	4119	811	1223	303	3528	3346	4777	4886	2158	1258	2337	5202	3892	4720	5131	5347	4397	3204	5476	4459	3981	4304	2298	5004	4711	3974	5184	4583	5282	227	5811	5486	5458	1656	2163
Row 39	4370	1385	4141	4483	5041	11	2306	5237	1602	211	5252	5205	3709	1291	537	5627	5455	977	3876	1626	1815	5840	1330	1671	1286	3913	2786	2898	3435	1313	1491	5620	3566	4475	3732	1024	5715	1072	886	424	5125	649	647	1356	2986	5778	5767	3314	4178
Row 40	1145	2955	1155	5541	297	2019	1731	496	162	3215	4204	632	792	586	3023	4969	4327	3172	1571	2918	5973	3351	982	2120	3164	1245	5878	3433	3261	3501	2512	3453	1151	1873	3813	2798	3188	1030	5784	5863	4994	5892	233	4047	3230	244	3648	4352	4552
Row 41	2127	2300	1372	121	911	3026	1781	4072	2291	2511	3519	2971	2472	2114	2139	1486	3962	799	536	2819	4118	841	4863	4378	719	3634	2235	891	2570	4614	1376	4222	704	3321	912	4532	4535	2571	4769	2399	1096	792	581	5542	4583	3372	3129	3623	3226
Row 42	5043	499	4488	4710	327	2514	5771	1526	3093	320	901	3218	2270	1169	2188	5001	4341	4537	4053	5561	1528	5879	4533	1873	5004	3200	4675	5650	5129	4161	3738	3842	4161	1175	5141	4032	873	3218	937	1636	2198	2552	811	5477	2924	2485	3080	2467	523
Row 43	1543	2603	943	2374	4851	423	1246	1938	3722	3412	71	4682	3394	670	585	4790	1872	4442	592	2441	451	5870	5215	4403	1084	55	1344	5980	4039	2230	3920	1379	2010	296	4754	3213	1487	1175	5497	3192	5390	5769	4907	381	4512	5245	1855	4250	2202
Row 44	1021	4102	5185	345	3612	5721	1142	2752	2033	417	573	2564	2429	4169	2496	5719	4198	2637	5417	2492	3526	5755	1880	5753	411	4551	2275	5478	2725	2815	1636	5	3594	1228	5909	4220	1091	1713	5723	256	712	1667	5537	872	1594	5411	4849	5326	1074
Row 45	3486	915	170	2846	5343	4846	4404	1971	564	3827	2739	3482	538	5234	4505	471	2048	994	302	397	2058	1230	690	5155	918	3562	4238	896	1314	1650	4387	3217	1535	2544	3632	786	5836	1120	1155	3766	553	2351	2386	5380	5927	466	70	546	584
Row 46	5563	310	2391	1047	1108	3973	5480	3471	4207	4704	2648	1825	3087	3746	4493	4440	657	2506	641	5953	62	1544	2286	1505	2343	1970	5308	3819	4986	1700	376	1296	1804	4234	2710	4899	3914	1103	757	1626	5487	4587	3060	911	3971	4303	2992	918	3178
Row 47	4122	2700	4640	1665	3642	65	2974	4023	3064	743	2344	3741	729	5094	2285	1053	4587	283	2216	1857	3370	3137	1059	4717	1450	4602	215	853	1442	707	2261	4062	792	646	1356	4033	1650	4213	4035	3747	835	3167	2350	992	1992	4355	4988	2892	4860
Row 48	3282	4224	4586	420	873	2044	3134	4533	3965	3017	2960	5708	4411	4443	5333	4791	3654	2411	74	3107	718	4633	4579	1340	460	1626	3378	3064	1413	3425	5257	5145	2671	5534	3995	4214	1803	5798	206	3248	4476	5809	1460	2031	3968	5642	914	4623	5809
Row 49	4656	1936	5087	4728	5819	4851	5821	2316	5121	2612	368	2849	935	5480	5189	5499	485	88	3275	5098	1769	2868	441	201	5991	3195	3713	4188	567	4729	5068	826	4784	646	163	1122	2665	4018	1862	3695	1180	3670	2841	1207	5787	5286	4637	3681	828

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.