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	5998	5743	1856	4840	690	4040	2090	5680	2335	2131	54	1347	971	303	3809	80	2651	2171	2040	3032	3736	2533	1147	1709	1769	2882	3211	1222	4643	2726	5251	1143	4209	1332	506	942	3524	5054	2798	4163	5466	3567	3139	2726	5435	663	3562	4789	1286
Row 1	5119	5528	5448	2493	2351	1464	444	1622	2970	155	2437	2787	3621	3396	5311	4713	1426	4565	531	1275	5318	2926	4943	5588	1651	3286	4038	2558	4009	4226	246	4698	1543	3485	3285	862	2883	4774	4868	2015	1142	1093	1773	574	5138	5986	5686	665	5764
Row 2	3937	2272	3309	2703	5826	2689	4827	2942	2058	4102	2942	3429	4568	3996	246	3792	5404	2222	3303	4522	1868	4940	1594	587	98	4043	3518	4532	4889	5392	290	1691	1226	5977	1310	1447	277	2251	3119	4451	499	3873	3593	4045	5938	1184	5575	868	5605
Row 3	3601	3606	1660	764	1109	4490	5209	5443	1128	3953	5948	2122	4334	5833	1729	707	2455	3941	5691	1275	4881	901	4037	1257	2333	4751	1707	5674	1394	2996	132	1676	3342	4977	4766	5798	5690	4646	3410	3191	2180	4010	5499	2928	3368	1428	1654	318	2045
Row 4	4733	2314	1220	2928	2735	3645	1957	2547	3977	5557	5528	1558	2669	3228	944	461	3696	545	5458	1468	1624	1305	2309	4756	2409	5054	908	3059	1264	1233	4771	5563	3864	2886	563	2539	4059	1365	5642	853	1331	5185	3883	2284	5412	1280	1978	5486	1491
Row 5	4737	5967	1218	2630	4490	337	349	3949	4480	2942	276	347	5841	4572	4731	4335	1993	4371	455	923	1079	3843	2697	2387	273	4504	54	5146	2627	5646	5986	2077	5784	4477	2810	650	93	1388	5035	123	5940	5332	4683	388	2560	4049	3838	5320	4110
Row 6	1144	547	840	5451	1055	2264	637	2349	5847	917	1954	4407	5343	927	4767	1388	2838	74	4433	3928	1484	3562	4798	3909	4832	4854	5040	2885	3324	2269	80	2005	5672	5197	4941	3928	1687	5399	688	2396	8	4404	180	1935	3364	814	3374	4374	3515
Row 7	1117	3952	4346	5359	3537	5990	834	2954	791	4874	3488	2522	4748	3134	747	1514	5927	827	3435	1315	1478	508	1643	1549	5480	3185	3540	3850	2354	3698	3851	3351	1127	238	1231	1080	4404	1417	5378	1162	2968	4994	5542	1076	634	1910	4434	4674	3480
Row 8	3237	5162	1956	5659	5441	5951	5306	2635	556	1009	650	5	5191	4302	2513	958	4622	414	5542	1110	633	2887	2422	2815	4718	2239	5904	5345	2946	2487	3313	4676	818	1461	2730	657	3163	1085	1781	2703	3365	3698	3425	538	3829	4509	2152	875	1996
Row 9	4910	2625	1882	1985	5373	3324	113	723	1663	5725	4233	4321	3884	3912	1499	3187	1836	682	3966	1031	1503	22	624	410	177	4445	9	4471	1009	4706	4079	2922	3727	4454	5272	3904	5178	4061	5639	1362	3626	2554	2222	3223	445	3737	2113	395	2310
Row 10	924	2956	1218	5651	2200	4808	2445	2375	1780	3798	1601	5164	4238	3466	219	5851	5283	1017	3420	2667	2871	2168	2066	1895	3750	557	4442	4780	5030	4483	2019	2305	2017	3486	4113	2637	4376	5763	2359	950	357	5816	3742	5898	137	436	3551	5678	4218
Row 11	4449	368	3347	5986	5367	2538	5456	2343	5263	2666	1450	5469	4726	901	5089	4376	5197	5293	3002	596	3097	3089	1764	2086	3335	3720	5953	1475	197	2504	282	5588	599	4993	944	5510	3297	5998	4820	4541	831	3549	2300	5165	4292	2589	2029	1711	774
Row 12	3293	5090	1259	5577	4971	3270	3023	607	3769	4358	5813	1941	2752	4015	417	2027	1291	1236	1859	1896	2001	4706	5875	1769	952	5596	5266	3843	2850	3159	1257	2075	1433	1719	4291	5190	5746	3152	820	5509	4205	4176	3766	952	1807	2825	4441	3792	2321
Row 13	4965	2968	4671	2903	2851	1164	2738	1229	1907	223	2116	937	4219	693	1190	2142	788	5542	1987	481	2551	4331	2304	4253	1913	3485	3648	1770	2840	3466	3855	1350	1331	5670	2658	1963	2485	3500	4979	3673	5735	3988	3561	1340	2442	1803	1357	2763	2623
Row 14	3953	1272	748	5247	3834	2055	3457	1261	2408	4485	2930	1329	303	1321	5175	1334	4208	4717	747	1354	5577	2433	2228	799	219	2460	3587	2105	5555	3983	2649	5949	5043	870	5811	5831	3738	4968	971	129	4221	2494	1035	5364	3874	5652	3867	831	4141
Row 15	3124	2548	2930	3617	1783	1368	2747	3406	1763	4468	2463	296	1824	5763	5923	2564	3975	2139	4134	2341	930	5320	5361	795	3496	1712	5982	2387	3546	4509	2604	939	1505	206	1190	2905	393	36	4367	4339	2876	610	1317	5823	5049	209	4214	5471	3745
Row 16	2294	3401	2927	721	2431	829	1407	862	3612	830	4608	2041	2802	5797	1722	428	308	3202	4022	2587	2418	1698	1512	5156	4932	3229	4276	170	5345	5559	3284	2999	2140	2554	2979	3316	3931	4463	4159	5587	5081	4471	1141	2925	879	4680	743	5716	611
Row 17	3208	5967	3815	905	3136	119	4737	2262	1632	284	5471	5759	1159	2661	2892	5003	4985	3375	4009	866	5082	1618	2673	817	153	5179	4482	1882	2289	2422	3223	3296	2985	497	1269	1156	5164	3536	1179	2330	1742	3695	2828	1339	397	710	936	1483	1050
Row 18	3644	1276	2230	2567	3048	2928	736	727	2774	4024	4565	5603	1422	5366	1194	4306	5254	2318	4762	2500	580	3624	4531	3569	415	4649	1634	1732	5508	1719	640	5079	1968	5477	5581	3942	3764	1890	4932	4510	4374	3860	4649	365	3921	291	5786	5698	3844
Row 19	2526	4965	4144	514	1962	4847	1693	1748	5047	4346	872	2645	3638	2774	1317	5781	2552	1575	2423	1790	4826	1812	5436	2464	2312	5303	867	4714	162	2557	2738	2436	3872	5341	5618	5889	2106	1794	4041	3405	3231	2716	2237	2416	2	142	1900	4410	2482
Row 20	25	5075	4577	4278	3573	1332	2631	2891	5171	3746	3294	1701	3828	2028	503	1878	24	3944	3495	3564	2580	5424	1302	1021	1115	279	4433	5505	1974	4487	5386	2656	4574	2383	3740	1152	1829	1793	852	3059	727	2482	561	3098	3838	615	4863	1013	3554
Row 21	1414	5027	431	3222	2691	4597	2867	1458	1685	1295	3434	4256	3990	1043	3287	1255	3510	1538	4247	175	5739	4750	5200	1481	2195	3394	5912	2786	2779	2647	3944	5346	902	312	5761	1205	319	4716	3268	2224	2544	2852	4427	2502	5767	5091	2653	1900	3813
Row 22	4695	2721	3283	127	5723	2535	648	4592	1570	5796	1882	266	745	4095	4262	5503	1260	2060	265	4938	711	3922	4452	4470	5060	4340	263	5037	2334	538	875	1586	2737	1972	4283	2535	5255	1056	1939	2898	5376	5642	186	1069	1465	4511	5023	4976	5320
Row 23	425	2874	665	1547	3315	2111	135	3848	2694	2400	566	4053	3024	1047	5414	5509	4817	1345	2893	4587	2837	5827	2835	4767	1787	345	5469	2314	5532	344	1275	2234	696	787	4462	5325	5729	3893	3247	4537	4233	1662	2415	2066	1871	5098	2680	978	5489
Row 24	4226	2442	4329	167	2548	548	3262	3039	3670	790	3049	4480	3681	372	842	5239	5352	729	393	241	2292	2809	101	4480	4126	2298	5736	2762	1807	1191	5071	736	2069	1141	3521	4915	2311	1980	5603	1970	1549	1720	2564	5958	4895	5448	4721	5623	3495
Row 25	1766	1717	4738	2801	4994	88	1987	2890	3420	3256	4853	627	1863	2926	4915	4087	321	490	5263	1675	5458	1675	5577	3804	2868	2281	493	5504	5396	1557	3483	685	4095	103	505	4297	341	1818	2432	534	1017	4833	412	5277	3423	4863	5255	3172	2748
Row 26	1251	4546	4571	2302	4592	2139	2752	2945	2872	252	5040	736	1746	4509	2646	927	5383	5282	5350	1557	110	3030	1659	28	2402	3587	2607	2465	161	4471	1322	5676	2674	5793	508	1026	3642	854	3819	3906	1748	5318	2481	526	538	1228	2382	3805	4753
Row 27	412	3142	4490	1628	2872	2817	2409	4475	4027	3813	3984	2850	3894	4379	3703	4991	313	556	170	1361	5579	1278	5200	5716	1131	4966	904	2503	2146	2739	261	3914	503	2718	143	4446	233	4230	3457	5460	1249	2906	3920	2301	244	4797	84	3745	3466
Row 28	55	2634	4476	2997	2678	4239	1892	2121	4172	4865	3732	4258	4045	3767	2473	4437	593	5577	3438	4333	4861	3097	1435	4461	2771	5156	4458	3261	2437	840	5896	5606	5984	456	1830	5222	5693	1235	5492	4748	4457	1130	3412	1027	1800	2344	1923	4669	2058
Row 29	4378	5574	345	2404	1543	5385	1501	4662	151	3269	3326	3546	3216	2137	3537	2911	4921	4339	4815	1205	1145	3470	4260	4252	5105	1832	2122	3882	2033	434	207	940	1311	1159	2148	139	5624	858	4612	5603	2409	2759	26	2709	4553	1	174	5047	2051
Row 30	5123	3392	3869	184	613	2493	1246	1243	1958	1601	4055	3903	2878	2081	3571	2600	4285	2888	4897	3016	2369	489	4107	380	4322	2836	4772	2789	1904	1230	2404	3910	3327	5163	3775	5260	3123	463	4913	5167	3458	1591	213	2777	273	5171	5307	4020	1007
Row 31	617	5655	1087	3552	2008	3350	5657	2173	2095	5905	3136	2474	876	1258	5650	4874	5565	5966	1855	2488	4580	1208	4118	3555	835	3188	2877	544	4770	4679	4680	2891	5644	1900	4665	977	3462	5218	5831	2932	4156	5466	3765	226	1533	2952	3771	295	124
Row 32	5053	3822	3992	2763	1525	132	659	455	462	5265	5575	2621	2004	979	5248	122	4948	294	980	3022	4386	3545	5018	4560	2261	3005	2491	3778	2564	5	115	1609	5146	1674	3192	2461	3077	4476	3264	3008	5148	4958	199	2066	4234	700	1321	157	4514
Row 33	276	4752	1929	294	3073	4467	2186	487	3896	826	76	5342	5535	2648	2972	3626	168	5437	2449	1299	5491	3684	2442	3364	680	581	1511	3851	2904	97	2008	3326	5739	5581	3817	1434	5558	747	3138	1953	4828	1198	2695	58	4935	1411	4456	186	1308
Row 34	5976	5213	1030	4711	310	3047	2686	5029	3727	5335	2849	381	1378	1590	2366	162	3535	5316	3258	3055	258	2712	4623	1199	2084	3739	1595	2099	5820	3738	1512	5416	5439	1098	5659	4085	2589	844	2116	3960	3227	3674	4952	2385	1152	3812	4718	2362	5935
Row 35	3934	653	1890	3011	1976	2126	5303	4634	1818	1146	2762	402	2396	650	5863	4681	782	4613	4078	4653	4418	590	5222	1629	39	4068	4349	780	5085	4756	2680	2772	4201	3921	4388	4312	2612	2970	26	2006	3452	1887	4221	2683	4176	5466	4389	2164	250
Row 36	75	3964	742	3627	812	80	476	3009	3122	3691	667	1491	5436	3764	1716	3711	3737	445	4789	2881	7	425	1745	5538	3450	1997	5371	5672	5121	2310	741	1613	1168	1351	3820	5862	5733	3621	3869	3307	1362	2804	5866	4020	5492	2750	210	1126	2163
Row 37	679	4734	4818	4606	4505	2621	4017	866	4387	259	1139	1475	1290	5994	5606	3134	4194	3875	1021	3384	5991	5043	1659	5706	4318	337	1853	3357	1617	273	1844	694	1576	3709	2319	3217	2534	4269	5271	4407	4860	490	5485	5346	4024	244	4191	2816	5283
Row 38	4692	4121	4825	2101	1478	805	1010	5466	658	2889	3872	1952	2873	5022	5088	3069	641	5520	2942	74	3908	5793	5963	4811	3480	5929	4864	5625	3615	888	799	4400	3272	836	3658	2098	386	2891	4338	2787	5310	2342	5514	420	861	5071	1334	800	3232
Row 39	2705	510	151	5210	217	2484	540	1482	1973	353	2515	1823	4251	4301	3785	4502	4968	1954	3977	5597	571	661	4167	3998	2800	3579	5771	5881	3007	1518	3654	1815	3812	2165	84	1818	5739	846	4788	3596	1460	2786	2145	5951	1487	4905	2376	2886	4497
Row 40	836	5130	3092	830	709	3205	2258	4648	2542	3619	876	1284	5471	4135	5537	1363	2907	5878	2085	2410	2965	2555	3441	4964	802	5047	5992	1944	5348	3116	923	4922	2659	5522	2109	1312	3199	3477	3422	5697	4522	2127	4455	3891	4024	3096	4878	3958	1708
Row 41	5642	2902	3392	3035	206	5507	3552	1655	2699	298	1584	4426	3367	2253	4965	1898	5684	1290	5370	2704	4499	2712	217	2461	4866	4187	5381	958	3282	5786	502	5970	5437	2528	1747	4383	4527	5370	4132	491	5206	230	5858	2957	1377	44	4709	4422	5394
Row 42	2484	2704	3113	5923	2772	4553	3305	4724	2116	1535	1924	1382	4087	5885	11	5159	788	3489	3844	3585	1358	494	2674	2705	2584	339	282	2075	3003	168	5067	456	1028	2998	1323	1975	5910	3356	4976	2470	3772	3434	987	1862	1948	1755	5832	1381	4978
Row 43	4156	3996	2465	2986	2105	5147	1887	4954	2647	1556	2982	1325	2013	953	3382	1717	4430	734	3472	351	3603	5448	5363	2905	5577	3700	3695	1052	4553	5499	2202	528	1395	3387	3460	3202	5501	1708	926	4113	4081	2500	268	3363	2454	1300	4358	4067	44
Row 44	507	1292	1231	3241	1910	2140	5946	5995	5223	3224	3327	5899	2782	2569	5675	2295	250	5802	4101	1359	1563	2371	1596	119	5590	1035	2664	4082	4527	5088	3670	4418	2059	3194	4965	5264	2494	2486	1990	246	3722	674	362	2594	4649	2573	5550	2899	236
Row 45	4766	4122	3168	5048	4708	5121	4361	4566	5540	3963	1772	2405	2018	5404	4555	3567	945	5928	2915	2000	1008	4569	36	340	3254	1562	4702	1259	2693	2843	130	429	4020	4913	4440	4639	1503	438	750	5175	2479	3623	3461	5873	4695	3687	1496	256	4651
Row 46	5316	447	5395	5970	2307	2632	2543	1578	3883	3699	2722	3897	2929	1371	922	2778	46	1068	5486	20	3805	127	1290	4790	643	1762	4502	1544	3674	1641	3734	1388	3820	5854	1300	1165	1588	1465	4590	2775	1378	1788	5474	4407	5785	2138	2374	5888	936
Row 47	1442	2271	5042	1955	3143	1024	3225	2115	2707	5384	5950	4104	509	4474	1439	5905	1535	5946	5305	4970	5667	5968	2383	2759	2222	1276	3696	4576	1156	3442	2117	802	3824	2717	4142	316	5255	1120	4094	5535	786	3149	4256	2867	82	2366	3852	3373	1352
Row 48	3208	2498	2224	2788	2926	2707	616	917	2546	359	3623	4199	1589	6000	840	4313	5584	2572	2943	2	265	3264	1530	4432	5594	2163	3916	2156	1960	3585	1473	1362	2463	1255	4272	3687	5452	5152	638	5803	1888	2754	5452	2081	5505	4991	730	3626	3294
Row 49	2760	5389	5724	5300	86	5114	1283	5752	2377	4302	2650	1689	3571	3007	2995	497	163	1644	4193	3605	3106	2452	4084	3285	655	1639	4298	815	3784	2989	1464	5984	2987	4901	3626	482	5005	5613	5053	5910	4748	3784	5420	1931	706	521	3820	5529	2484

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.