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	3145	4740	446	1295	5281	3874	587	1438	746	4652	1466	3230	5635	262	5611	488	2457	1625	3295	5137	569	269	3510	2058	2919	960	5034	2575	854	5737	5826	4456	5639	1977	789	1766	4725	4235	5498	5009	383	2023	1050	1075	3174	974	2803	92	1268
Row 1	525	2662	4244	4959	3998	4776	1871	709	5635	4829	4992	3029	3974	2568	2749	1908	5159	4423	5384	2899	4369	93	5890	2790	2624	3933	450	1169	446	2700	5087	3293	4382	1977	4686	657	3007	758	2505	687	1441	2495	2774	3473	2332	5929	4983	2238	4784
Row 2	373	2202	175	4192	4941	3828	525	5278	3217	5604	3754	5917	1314	664	4540	1218	912	220	3402	5124	2063	2663	1132	2391	1623	4577	4316	475	2064	1235	3003	5783	1263	1060	5542	3677	4278	1970	3109	5278	4513	4878	3749	1731	2771	664	1371	1480	1444
Row 3	1490	2381	688	2811	520	2739	4011	3253	4671	243	4265	1121	3488	4313	2533	2009	1032	4593	5632	5749	2718	453	4068	269	356	1166	3663	2344	2002	336	441	3145	401	3941	1340	2203	1617	3951	5002	3964	2998	4025	2504	2067	4240	203	3413	5057	1945
Row 4	5751	4705	5303	3725	1873	5343	213	4919	4808	4216	539	1908	1077	5445	5613	5965	2695	3757	1105	2773	1172	2661	1426	363	766	5076	4025	1757	4239	1229	5724	4736	2180	5605	2284	3564	4701	5309	5663	2925	4440	1761	286	4690	1820	4427	4787	44	3291
Row 5	3868	5688	4390	290	4987	4343	4378	5029	2190	2790	5060	2522	129	2807	683	1784	5465	5753	4102	5314	1019	2068	4936	1481	1389	3472	3597	1659	5206	2462	874	5391	2116	5498	2566	2215	5241	897	5874	4916	130	5187	2538	3784	380	5590	2492	5398	5212
Row 6	4619	4218	4136	5125	984	4628	1322	2885	5480	3517	2048	2444	4513	12	2129	5717	3064	1450	2843	1704	2635	5108	2717	4540	981	1013	2693	1161	2246	373	2866	3017	4178	3175	5510	4753	5464	4261	4981	360	4948	5107	4342	5621	1637	4915	3334	429	3376
Row 7	5653	2171	1850	2087	886	3141	4977	1022	4592	4608	3970	1896	2273	333	2156	5112	3602	5464	976	4405	318	4155	2631	1897	3364	3515	4498	1330	2783	1595	4225	256	1603	1476	5468	3738	477	2094	966	266	4827	4722	455	1164	5365	82	3887	4347	39
Row 8	177	4548	1182	964	4646	5147	2214	1530	5104	5739	4144	5341	5550	4213	1360	2889	4473	4825	5510	5487	2025	5652	1520	2760	345	1184	1913	2651	3878	1687	3583	2979	55	976	1622	12	5652	1399	679	2477	5009	2818	4393	2730	4765	2863	3570	4963	2221
Row 9	3463	5555	3846	4093	3625	3522	5270	5191	4679	3572	3562	844	1393	326	4405	1485	4519	3926	4576	5883	5871	5654	3158	514	5841	2909	968	2084	603	5468	4280	1712	2390	1836	5800	2337	3436	5384	4126	673	5238	774	545	5379	5902	432	5618	5140	1904
Row 10	4241	2414	374	1172	5070	1791	530	1487	5945	3468	5521	1549	2579	2043	3801	5877	3033	5757	4405	4901	1194	1632	475	2105	3097	5733	4918	1684	131	5803	1080	2613	4479	4734	4495	5723	3319	5999	622	3677	5879	4598	2707	4849	1372	422	5243	3339	1227
Row 11	2078	362	2106	1570	1667	5226	2087	2262	2284	1487	5146	2059	4315	4453	5056	3395	3736	3699	3356	2364	1251	850	4686	5347	3393	415	2198	2707	1810	5214	5875	2943	4337	5438	891	2339	3468	314	3647	2728	4037	1935	5450	2841	1291	947	576	2608	5836
Row 12	1565	861	1723	2703	5757	5236	3827	2483	4484	2255	220	3708	1981	3187	1986	2719	748	4563	1714	2386	5910	1204	4771	2989	2338	3923	1828	208	472	4044	5519	2496	4351	1409	3378	4085	5031	5674	562	3970	407	3205	5198	3389	5325	1892	5308	4721	952
Row 13	470	2242	3530	3041	283	3527	491	4783	2759	4641	5674	744	826	3305	581	736	4794	161	5223	4583	3848	3318	4329	4953	2815	45	4790	5345	2349	4653	2451	5208	3432	5414	5678	5156	5178	1233	4759	2923	5085	1998	4268	892	1408	5212	4606	1146	4757
Row 14	2356	4999	3957	1410	5982	3556	5027	970	4296	12	1691	2893	3299	5769	1931	2015	4153	642	3001	5378	224	509	1955	3332	1925	1575	2685	1508	1979	5280	4628	1324	1227	1041	2401	328	801	2870	4636	5592	4224	992	5938	180	4431	719	3662	89	3915
Row 15	1484	5962	1053	122	552	1917	1171	143	3713	3708	465	1068	5282	332	2725	5702	5065	2190	3186	5968	3435	324	5078	4537	196	238	1631	4251	5964	3277	3499	3628	4462	5199	1393	3871	4521	3222	2146	4815	1807	3976	3792	1673	1821	5095	2563	882	992
Row 16	3358	3086	2881	5730	5029	4609	4479	1819	2501	3591	1034	5086	2792	770	4202	3307	2849	3409	2867	3483	771	4318	4299	3665	1294	1258	4159	5540	4900	2258	2579	4261	4836	4802	3991	573	1306	5415	589	1344	2210	328	5781	3431	450	337	4939	4329	3717
Row 17	4932	3645	5938	1457	163	5584	1877	965	5692	5260	2524	5293	5876	1275	567	3513	1867	3698	2916	3940	271	4842	4652	2579	2172	2932	2583	803	3634	3897	1501	2441	2269	4317	1518	5576	4242	3249	3887	5896	2677	4719	4003	4985	5224	5955	165	5380	5852
Row 18	906	1120	322	936	4248	897	4387	12	2694	128	1847	5151	4045	5391	3802	3942	525	5351	2170	5692	1367	792	565	3246	5369	5743	5505	2011	1828	1390	4151	4500	5719	343	4885	3665	4223	2856	2036	974	1750	2340	2846	3603	4129	3895	3943	5743	3734
Row 19	3953	804	3213	2738	3713	3236	33	1640	931	1359	3114	803	101	3393	1264	5236	719	4493	112	1933	2872	4406	903	3732	4670	876	251	2177	5142	154	5253	5732	3026	1681	651	1102	1598	1569	5860	5504	4316	4452	2816	4973	799	1502	3290	493	956
Row 20	1514	3652	1991	2974	4203	5556	4376	297	394	1049	5263	189	4880	1801	1931	1052	4869	4008	1075	5866	5476	1700	5788	2652	4515	2702	2265	3959	2408	1489	1872	1582	5210	4953	3303	1854	3585	5312	4288	1529	1463	3246	2657	5826	3005	5269	3923	1762	4471
Row 21	5395	2226	4564	4593	106	400	1435	4343	5332	1192	2477	977	3431	3039	5990	4005	4354	5911	203	2671	1841	3802	904	2361	1326	2464	1896	1361	3998	345	1553	5293	3547	3570	3160	5639	1288	2676	2586	289	2571	3107	3134	508	5183	3991	3963	1454	3532
Row 22	4834	1444	953	325	3808	3187	1738	234	1107	1268	2669	2286	3165	3254	3963	3772	5927	5680	3918	1872	4521	449	2146	5691	2211	2569	1923	2174	2477	4834	2513	5156	2481	2706	5033	1295	1476	1510	4701	2140	4239	3125	270	2966	5697	3888	3143	2027	2854
Row 23	1940	2592	5852	4077	983	2290	682	1360	2426	397	3784	4928	659	3095	5581	625	4578	458	1048	1608	5064	2843	881	339	3035	5538	3616	4138	2508	4058	5728	465	3058	3718	124	3754	5492	4094	1515	97	2851	376	443	2185	4868	159	2638	5599	4801
Row 24	2583	4113	1463	2880	3930	1253	185	1581	1404	5516	3090	1442	2268	5377	5134	3534	1489	4265	5671	1027	1236	4646	2008	1237	4599	5589	2915	3533	51	2280	3015	2452	4820	745	3310	1003	2626	349	1497	2479	184	5860	5819	2832	5044	3009	3010	4014	2477
Row 25	3070	132	4098	283	4985	3714	5751	2396	5166	4334	2119	3118	4330	2070	3782	5609	602	3939	167	1775	4263	1916	4589	619	226	538	1627	570	3930	5368	634	2380	2723	3295	4153	5151	1614	5034	2584	5864	5481	1169	2353	2558	1553	5040	1586	1044	137
Row 26	1981	5395	5797	3167	3903	5479	3318	4201	4809	4813	850	2451	1800	2304	2368	4894	5065	2510	382	2407	5841	5404	2755	449	5560	2874	5759	3352	2432	1769	4894	2145	566	3907	5913	664	3253	3233	5725	5659	1803	5243	1794	133	3443	1326	46	393	5693
Row 27	1358	2002	4439	4881	4243	2895	5583	5534	1768	1124	2307	5815	3399	1123	5030	1884	1533	2956	3508	4907	2491	3972	2449	124	4576	1746	5870	5539	4516	4379	745	2845	3553	5859	2908	5194	2655	2706	3034	16	1540	4186	4166	4727	1597	2379	3058	2895	5747
Row 28	4771	2212	4621	5415	2340	1836	1098	2444	2746	668	4159	3091	5009	3261	293	4101	1289	1872	4277	4172	5069	2533	1406	4040	994	4093	354	2254	5757	4861	1079	4713	5404	1896	5256	5538	1181	4722	263	1855	1091	370	3907	4287	1630	4619	403	1309	5471
Row 29	524	1727	2811	5913	3861	4620	4039	2078	5658	1848	1978	5602	4804	5790	5442	5308	5039	2977	2591	156	4790	2457	3601	3503	216	4378	1802	2737	230	3254	1544	2285	5988	374	5898	435	5909	1596	228	4120	1745	2240	5262	3815	2378	193	1926	2518	5102
Row 30	5160	4594	2889	2533	2106	4593	5998	1351	3943	4154	4690	684	3589	2550	5925	3698	3728	395	5942	1414	3969	1571	832	4198	4596	465	1807	1759	1676	1331	4918	1466	1929	5270	4483	5541	660	5659	4938	3326	3533	1395	4485	2219	3544	5777	5217	2982	5209
Row 31	1545	3498	5178	944	5639	3797	5782	4214	1368	2923	1941	3269	2378	3197	4470	268	2589	2541	3795	3406	1481	1259	332	3419	4274	3629	1511	4808	16	3390	5825	771	1499	799	1314	766	3702	2470	3702	5048	3312	5767	2136	3981	3806	3276	192	3473	3388
Row 32	106	5665	5731	4326	185	839	4556	5358	1442	2711	1442	3274	5778	3098	2041	4168	1575	1563	1221	4149	3413	3898	1743	4398	1940	4456	4235	1581	1425	1603	3761	3449	1076	1179	2899	5737	5704	3716	2306	3122	3513	4347	1740	2817	3576	5615	1945	2474	2146
Row 33	1053	5657	5468	924	545	3678	632	774	1351	1155	5051	5655	4417	2829	5010	4294	413	4281	4054	5631	1499	2333	850	5840	1891	2820	183	3588	3262	2331	4124	1171	4262	1373	2970	1802	5756	3858	1723	3828	4904	2973	4555	2491	4561	630	5155	1832	1145
Row 34	2791	4241	1203	4287	3208	3721	158	1465	2036	5851	1913	2527	409	3049	5477	5782	32	3137	2753	5009	4410	1329	992	4986	5633	5690	4620	3400	1564	5425	260	817	236	3102	5863	5663	2057	2650	4541	3916	3987	3255	3739	5741	3986	1216	2629	5187	5264
Row 35	805	2968	1063	2260	1874	5127	1569	1595	2941	1113	4176	54	454	2312	3417	2611	4778	493	3716	5022	5178	1122	1815	865	3068	708	4381	3491	2121	1064	1888	2962	3273	3516	2914	1601	4308	5051	55	4269	2027	5999	4258	221	1574	101	5659	4618	3409
Row 36	1127	2939	5507	4320	3193	2947	2552	1880	4206	3908	244	5914	1363	5405	3812	5651	5146	4189	5200	837	5550	1359	151	4775	1858	416	3622	3253	2113	2650	2715	1644	2904	1128	1812	72	4892	4325	3041	3708	1166	78	574	4157	936	3965	1915	5994	1208
Row 37	1950	4572	1501	1545	5549	3991	5930	3030	1706	5616	5770	4174	917	1673	3350	484	2996	3004	5277	2547	2856	2099	4084	3564	1458	289	742	5160	1436	3451	4980	1477	2661	4467	5197	4193	465	1334	901	3478	1077	4223	2044	4500	4154	2460	515	4444	1561
Row 38	5937	826	994	623	326	3358	1948	2717	3268	4251	2956	2759	2684	5624	4064	5500	5690	3888	3745	949	1014	2492	1770	1217	2328	5540	5274	5917	5885	4209	435	1107	512	2532	2660	945	5297	3731	59	1268	3705	2083	3622	3279	3443	2047	2987	1458	175
Row 39	3268	2894	5920	5039	3121	371	5066	1126	4044	1043	3568	4835	2729	2301	5601	4580	5712	3919	4450	5071	655	2939	579	5377	1789	5248	1098	5330	3403	4456	644	250	5698	5042	3356	1305	4156	766	3569	2688	5533	5884	5611	365	1216	3110	4730	1954	5944
Row 40	3091	1722	4735	4842	4756	3515	2727	456	2402	4809	831	919	332	3208	3281	2229	4491	515	3731	797	1947	4664	4540	1580	4756	760	1866	2745	1768	5532	3501	1237	1719	1604	433	2856	4257	441	2755	1387	2115	1766	4144	4941	779	3592	1692	1523	3237
Row 41	4437	1208	4031	2028	5158	955	5292	5251	1677	4426	3485	3930	1153	2117	329	704	2978	2368	5953	5282	220	4810	613	5273	88	2862	2875	3677	1910	3743	5569	1605	4067	2414	2294	1816	1024	356	3278	1981	231	3399	5172	2349	921	3415	2676	3417	2912
Row 42	675	3007	1025	4592	3968	2263	3026	679	3276	139	3178	3332	5514	4932	5876	4485	2979	5973	2952	5915	4057	3050	4777	2641	3894	4456	3703	1402	1305	596	5178	3128	5762	2921	1229	3066	2562	905	1924	2544	3968	1185	1692	2917	1388	792	3326	5582	187
Row 43	963	1549	2011	5132	3095	12	4119	5092	2043	4181	2820	188	4659	4490	3992	3072	999	1852	5374	1148	4311	1971	2384	1399	5491	3409	2660	5511	209	3245	2592	1411	2369	1607	4430	1877	5460	309	5360	2080	4370	3453	2863	4243	1089	2293	326	1449	999
Row 44	4703	2735	625	5337	4468	5040	4092	5575	2217	317	5926	3512	3951	565	4400	872	4955	5089	1210	77	2953	2781	900	5665	2671	2266	872	5247	788	3245	5716	95	80	1760	3952	1237	1835	1081	3324	2220	1886	4605	3721	3097	1268	19	309	226	4534
Row 45	383	834	464	4998	1460	5411	2808	4277	3033	2371	3249	377	3202	4236	2725	4006	2364	3018	5598	4207	919	1627	5881	3147	5057	946	1754	5220	108	1421	3655	2674	4145	2525	3464	3446	4029	2951	3328	3152	2022	2796	5082	2316	4665	2245	5276	1320	39
Row 46	1675	35	4136	4902	2485	3430	2580	1618	2327	4612	3771	3843	991	393	5422	931	4185	5737	779	5948	785	477	3916	725	5686	5310	205	1889	5448	5389	4197	4719	1232	3321	2082	649	2178	4614	2532	3566	5665	650	259	4912	3470	5322	2588	1719	3779
Row 47	916	5497	4724	5946	2811	4234	297	3545	131	2964	2848	873	2591	699	44	2336	2847	3874	4301	3687	3762	636	4193	3911	5238	3840	1983	518	368	739	1719	4603	1715	352	4117	303	329	662	1031	3626	3063	272	306	4290	618	3595	1886	4101	2158
Row 48	3535	5243	3378	1347	4233	81	3148	3583	319	184	2350	1714	953	362	5341	2288	69	4209	2428	5507	4757	145	2900	2512	2273	3339	2058	3634	2144	4541	5378	2073	2232	1887	218	5857	155	5670	422	457	5792	5850	5061	325	5579	5620	5344	2741	1584
Row 49	5717	724	1383	3805	5432	436	2668	1262	883	3702	1211	1255	2383	1685	3067	4892	5478	4059	4559	4641	838	121	5208	2720	3174	214	4847	4646	3053	491	2465	1573	3518	1024	274	2520	3185	3355	4320	847	1688	5269	4592	926	5633	5351	3542	1557	291

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.