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	1454	4513	2185	3201	3942	5203	3661	306	2549	2930	2791	1243	4033	1754	5641	3955	1348	1952	3981	1351	151	3872	5330	2952	832	5552	816	2724	5923	3616	506	3714	1960	4256	2833	1716	2760	4665	495	4600	499	2856	3127	3617	3982	1521	1655	3540	4957
Row 1	5936	733	404	3494	5278	2184	325	1260	4819	4844	1932	2742	4021	1107	1511	2047	1932	5609	3676	603	1555	860	3358	4744	3328	2673	1047	996	2813	4721	4507	3802	2026	677	1594	3881	2809	3716	4604	1790	2638	1133	1615	4548	1986	414	3806	3751	2990
Row 2	2000	2554	2523	2129	1642	1558	860	2465	5177	1376	726	3057	4704	957	1609	3730	3068	1829	4271	4686	4882	5966	3704	1747	2456	804	644	3701	2717	1430	2296	188	4238	5378	2613	4295	5224	4317	284	1502	3362	5091	1213	1639	3668	4800	4513	3657	5462
Row 3	982	270	3950	847	1303	4840	1490	5894	3515	2138	3281	4445	1821	2412	3484	1500	2601	1372	1741	3609	5555	2473	3162	4931	1352	3949	1278	5233	1359	2431	728	1644	5114	2020	4474	4492	5145	4285	4776	4738	4394	1372	284	5406	1535	2730	2259	4378	1656
Row 4	4250	290	4788	2012	4153	28	1478	3126	4729	2415	72	4614	3422	2339	5827	4474	865	749	4997	3615	3583	1928	3514	3462	561	1915	728	1248	5653	3709	4720	3967	4063	2073	1592	2357	2525	4984	4067	871	3116	3542	770	1037	1441	1912	1698	5286	5693
Row 5	4216	1702	2816	5597	4354	2302	4267	2284	543	1150	5367	369	2317	3349	5624	3588	454	3014	1078	2445	5982	1133	219	728	4850	1252	3136	3488	4732	4975	2651	4539	856	1263	4315	5973	1159	42	5178	5297	3774	2721	677	5387	3848	5460	3977	4719	1594
Row 6	4686	2107	2892	5424	2329	5852	4938	3643	3426	5210	322	1759	2853	4027	2861	1903	3523	5322	3654	5526	166	5711	5471	1114	2777	5639	4542	5762	1302	5919	1522	2438	5486	5535	1202	2254	5208	4505	4233	2363	4168	3835	3833	3958	925	1744	4339	2560	3357
Row 7	3998	3578	5024	2156	3315	5860	5766	5934	5794	3769	1912	906	5241	869	3687	694	3025	5873	545	2745	5884	2869	758	1978	1337	4542	334	5016	5179	23	354	1983	3760	5442	3604	77	927	2923	1589	2989	4918	2920	4348	5037	3055	3908	1541	5606	1648
Row 8	5277	1051	735	11	5402	2280	3752	4989	2756	5758	3595	127	5663	3652	1026	1148	2727	3166	2886	810	4760	4786	2925	5639	1190	5840	5761	5540	4779	1873	4264	2645	4865	5071	3840	1341	5406	3683	5587	4985	2760	1328	399	4065	5122	549	3016	5881	177
Row 9	756	426	4431	4853	3408	1283	3712	5458	1541	3045	1215	4743	1993	1894	1949	5120	685	1716	766	3682	3411	4932	5147	5684	1948	2862	179	2068	4664	4013	2902	4516	5069	2923	5124	1707	3694	895	3826	5689	4802	32	2208	4746	4020	4965	2285	2844	711
Row 10	3894	1771	2820	1068	2776	2983	3051	4072	2046	3590	3665	2779	475	2050	961	2135	5642	3899	3582	1546	2418	1010	3323	3887	3867	2086	1129	5516	2861	4618	1830	1261	4043	4579	5000	386	1459	3827	3951	171	1108	3685	175	1125	5257	1928	2350	304	3355
Row 11	2258	3306	4850	3487	1198	1353	1195	3324	3438	1093	5271	2377	1609	2957	838	1893	4169	2723	5766	1558	4283	2120	1012	4180	3169	3126	5509	74	4180	4308	1748	5441	4144	914	3159	3900	1382	2170	431	597	4605	5443	2187	3183	3949	567	1218	3934	2284
Row 12	5775	5303	5940	2480	5089	2706	1830	4146	859	227	3120	5445	78	895	660	4464	760	2738	1382	1042	5785	127	5427	4679	901	3819	2462	5189	5612	1035	5166	2465	3178	4332	1263	489	1556	1011	1428	5163	2083	3282	5397	2184	3316	2396	5980	385	2427
Row 13	4056	4702	3766	4791	4263	563	1002	378	766	1879	1268	3921	4963	1011	4079	1190	2899	2645	1669	1017	3854	401	4036	5100	3087	4774	1764	4719	2904	742	4583	2525	5113	1960	4674	4787	441	1789	5819	628	5870	1945	5055	4128	1576	2836	1069	2933	4109
Row 14	1774	3691	2250	1142	5282	4503	1276	4079	3406	2289	564	5941	103	3978	3140	1649	3104	4223	4345	3042	5131	5413	275	1116	873	3141	3228	2360	4487	4674	3286	5073	5056	4399	3935	5594	900	5865	1385	2183	3439	5620	48	777	5684	1995	1090	3684	3549
Row 15	3154	2536	2380	2834	4757	2559	2568	4452	4849	2072	1512	3583	5897	5471	1740	4172	2291	5034	3374	4096	3121	2355	950	5384	5624	5100	1571	1993	260	5579	453	3809	5667	4389	1377	1505	5744	2224	1467	2178	3909	2993	3133	4142	3528	2743	5234	4533	1894
Row 16	4482	4236	5705	5182	1728	198	1370	5757	3937	781	4061	3656	1742	3688	2550	2403	2700	1496	3143	3867	2615	1118	2902	2388	1805	3316	3345	3767	4012	5711	3224	60	1283	3465	5509	5287	1231	5541	5021	3254	4486	4559	695	4837	2622	1078	2206	1362	4793
Row 17	3827	4194	2157	1504	2209	4072	3365	3530	1274	5884	5042	930	2342	4683	5288	2780	5313	1793	3782	334	5564	609	2514	4457	2406	5800	960	5163	3143	4123	4298	790	2460	3104	3973	4162	1351	2085	1088	5655	1097	773	3000	629	5656	3954	5399	730	3131
Row 18	3411	5042	4203	5895	3044	1262	5777	2173	1068	251	1752	1487	5600	1222	2885	4416	5248	4057	1462	5968	2795	1229	2343	2837	332	2117	2406	4681	5254	2658	3619	3014	1517	370	5896	4845	5384	1439	3160	643	1790	346	5579	4102	3184	3486	2372	5607	242
Row 19	3238	4158	3330	3315	552	4403	2746	402	99	5164	1224	1175	2852	295	2574	3090	4002	3565	4177	2009	5719	3183	1275	3362	19	5001	1281	754	1560	4668	2745	4414	2240	3888	3930	1573	4848	5874	2464	602	2722	2763	4420	4252	5045	5008	1475	4319	5182
Row 20	2771	843	1615	187	4351	3746	5390	4765	3219	5565	3851	4393	4898	4917	4343	1644	206	1244	2506	1591	515	5865	4484	3676	5796	5201	239	2454	4803	2759	3633	4042	3791	4869	5185	2811	2259	1850	643	1234	5493	5627	3047	191	4724	791	5251	5654	4561
Row 21	4741	3646	1214	984	3290	2408	3502	5008	2931	2012	1841	5961	984	2083	1311	5469	2385	1407	5472	3032	4710	5248	2616	5952	1056	4672	2168	4441	5671	1549	2484	4765	2969	2796	5707	5371	5456	4608	2155	3424	2425	1898	5931	1849	2791	1167	2937	1602	176
Row 22	2618	3562	1389	3811	5842	4391	4181	93	1254	2971	2567	1201	4455	5654	1885	12	4210	4543	748	216	1607	3273	107	5738	2723	1615	2728	2396	1496	664	2847	2674	3174	2673	5602	439	1933	2813	2320	3286	3312	5265	1337	2743	3002	3529	457	617	5706
Row 23	5387	1402	3002	3999	3456	5994	2333	479	4146	2198	675	3068	2897	5898	1311	4804	5722	2617	5068	604	4619	5817	3048	160	4685	371	3393	2120	265	1949	3590	5584	2438	3789	2643	3403	2247	586	2996	2026	3947	4248	5666	5664	5339	2791	2463	129	3590
Row 24	5801	5596	2547	3247	50	2662	3983	2634	4919	1402	5097	546	62	1277	961	2223	1131	3819	5891	4348	2386	5397	4058	2956	2582	252	531	3106	4777	4274	5758	627	3715	1067	286	272	897	1699	3456	3671	1333	5162	152	3746	5536	1908	3551	2735	1286
Row 25	5453	5419	477	1661	4432	5941	2664	605	822	4051	226	5593	475	1546	4305	2533	862	3012	3326	3065	1586	2129	5683	49	1644	319	806	2923	4895	587	5709	1073	3152	639	5499	2912	1184	5189	3839	3476	180	1505	1992	5237	1310	251	1714	3137	491
Row 26	2437	5280	2985	1762	5683	2618	1990	1327	5617	4284	924	3453	1350	3885	4157	2993	2079	1568	2341	3482	2106	2092	20	968	4149	1191	4688	3503	5236	2461	828	1986	3243	4496	1385	5602	253	945	3370	5732	2593	3273	3488	2301	4424	4813	748	4664	423
Row 27	5199	2658	4731	5958	1729	4082	4827	3949	5660	2067	2937	3352	830	2736	1349	2684	663	4729	803	773	3873	2394	4527	4234	3760	4029	1508	2564	2529	4796	694	3977	2081	4023	1466	3698	3818	1034	205	4272	3900	4191	2574	3582	4152	592	3445	4525	474
Row 28	280	1116	296	1674	4341	3087	2213	2059	1114	1593	1051	5911	4195	2419	2263	1373	1497	1431	682	4182	3524	2002	469	4126	2465	5635	3249	1469	2163	1617	3900	874	2646	5619	4856	5848	2038	2324	4588	1176	2037	4191	2272	4592	2192	4880	2022	1618	268
Row 29	1204	2410	5750	2748	558	3073	4150	1823	199	1721	267	760	3507	159	3884	3129	3992	540	5196	719	1300	1534	3760	1100	59	4863	2321	1338	4651	2691	3051	4701	5654	720	1632	5224	397	5972	5476	5333	574	3138	515	2305	4770	5588	1877	4906	1341
Row 30	1048	3658	5046	4583	5549	5936	5153	5536	2330	1277	4199	5148	4637	2129	2307	2238	4472	921	2325	2201	1259	4352	1991	3209	1513	2197	5292	168	3490	4715	2952	2458	966	5088	2716	2684	4905	2288	4876	5519	3864	1644	3445	1653	1292	149	1356	956	5141
Row 31	862	5454	3653	3020	4062	4969	5327	3759	2144	5472	5068	1831	4557	1599	3008	4942	1123	3582	390	1925	4337	2009	2442	2601	5500	2873	1897	2356	2123	5442	2897	5818	1105	5594	1917	5079	1117	1062	2566	5419	2693	1214	1506	5019	1744	642	1842	5616	2865
Row 32	933	1900	2606	3789	3352	5577	4667	2388	347	1516	2426	3844	695	2365	3994	380	2881	908	4833	3503	4322	485	5921	4847	433	4622	4974	2842	785	4527	4739	3457	4319	3509	1035	50	5364	3781	1994	4314	1341	2983	4898	3615	3728	4977	591	4705	2508
Row 33	1383	2418	4608	4986	184	4463	3965	5076	169	4393	937	3788	1796	3543	65	4539	245	197	3479	47	136	1986	5096	3177	3625	3805	795	4004	5717	854	5735	4700	1951	1493	1802	864	4561	2968	3521	3855	4962	629	2319	4188	1318	4789	2709	3290	5861
Row 34	1721	2838	4346	4461	4524	1171	3485	5767	5587	374	4652	2527	2157	3684	3916	4299	3494	1245	1970	1094	1804	3595	800	3714	19	1697	2568	2554	22	4210	2993	3930	2830	851	5270	391	2498	161	4213	1949	1566	4383	5603	3692	2996	1284	4830	2896	3016
Row 35	4047	4605	963	4341	1558	3644	2229	927	3841	9	5562	1268	3474	4075	1418	1200	2406	3141	1523	3603	4476	5552	3432	3442	4206	1108	3225	468	1528	1069	4953	5917	4360	51	3510	303	2856	5330	3027	2250	344	2393	641	4936	2175	5079	3905	5988	3550
Row 36	930	919	892	2332	703	3185	2503	1154	5241	5269	1886	4726	5604	3684	5806	5393	3310	2376	1572	1470	5022	2555	4929	751	4294	4298	3630	2825	3172	4968	4781	4584	2810	699	799	5935	2263	5695	2558	408	4612	4166	2233	4041	4557	4680	478	3539	4283
Row 37	1185	197	1191	5937	3045	239	3669	2336	3449	5459	752	4957	5496	4012	412	217	4502	5175	3462	1046	4217	840	5596	192	1187	1445	2261	1474	3624	4501	2310	1492	3684	2328	5105	5620	2319	2409	3081	708	1511	3118	3374	803	4249	1257	3064	3733	1964
Row 38	4230	137	3954	5836	1005	1205	5806	4434	350	3890	4098	86	1806	3054	2343	3435	3175	510	4134	752	3189	3653	5029	4476	793	2989	263	1166	5280	2695	532	4537	2956	826	3844	4489	381	3035	2498	1820	1185	2873	5158	2824	183	2094	4773	3108	1188
Row 39	1778	2386	2371	542	4441	2646	331	3657	3114	2354	1852	5907	224	378	4130	5150	1034	1971	3892	3581	4577	702	5315	4475	1175	3993	4224	5043	5534	4271	3786	3622	2999	2037	3350	1076	2712	232	2341	307	3628	4527	1905	4857	1552	3020	2960	3493	1254
Row 40	4197	4496	4074	4343	2684	114	4453	2563	4357	2540	4557	4195	2406	1275	2119	1073	4593	2268	3455	3254	1262	1876	702	122	387	1685	1255	4481	3040	5264	2782	4960	4528	3480	5929	4481	2066	3737	563	825	4902	5180	1316	1178	197	1095	5059	5271	2620
Row 41	3599	3553	2070	4810	168	1000	3444	5381	2714	844	5042	791	5532	5071	5214	1515	2637	1576	1165	2872	5287	5769	3701	58	4703	3600	3495	4009	1925	265	4269	3368	1907	740	5645	3528	3965	4397	3417	3064	5132	2563	3570	4135	3282	2683	2321	2817	1086
Row 42	225	3403	3566	4009	4645	3065	1754	4698	681	2728	5285	354	1718	1807	231	647	3354	625	904	1099	1786	5089	4602	3560	4768	303	5673	5190	1114	2682	3810	4871	4240	697	1207	1153	714	3041	4208	1383	2688	1575	862	4397	3842	3117	3540	4821	821
Row 43	1841	5321	4462	4051	4096	3538	422	4144	1389	3776	4951	1177	5628	3043	5327	1861	3583	2421	3844	4488	5012	3682	5656	5819	2305	646	637	21	3657	1037	3609	4695	3574	5399	376	5028	545	1811	1429	2134	5443	3510	5210	5898	1987	1019	3772	1375	3548
Row 44	5557	3421	1092	3094	1729	5634	4820	3273	4646	3755	260	3270	5201	4305	5573	990	724	2922	3104	4922	619	837	499	1804	316	965	532	3408	3483	1482	4454	1649	1253	4649	888	1280	4433	3828	3511	3500	2466	5272	690	593	2112	5207	750	701	5659
Row 45	656	3573	4972	1393	688	2959	5495	5526	3263	3311	1941	3487	5649	1310	4253	4158	5157	772	4429	4397	1681	5292	705	1746	1130	636	5159	4157	2272	1067	5259	492	2306	4722	2898	2982	2709	3659	1529	2151	3361	1462	5811	4123	1681	3874	5830	4894	3668
Row 46	2548	3182	4303	3359	1334	3052	707	2100	5843	1970	4750	5129	2293	3703	4186	2946	2155	3388	4297	806	2344	4860	3199	1901	4620	5489	2816	3346	3508	2836	3685	724	2590	5908	2676	4044	1018	3858	4440	2013	1808	5801	2833	2938	363	2333	1550	4208	4151
Row 47	2735	1803	986	1125	2363	2541	4096	617	867	440	4644	1073	3027	3599	3812	2716	261	3286	692	3509	1553	973	204	2690	4842	667	3207	2792	708	2662	4562	1906	1295	902	5509	14	2513	2717	4694	229	4736	3915	2759	3231	290	2858	4361	1274	5193
Row 48	1673	1931	251	2676	195	1885	958	631	1642	58	2992	2897	766	2248	2851	1602	4537	2342	3255	5833	3220	3391	5686	4717	5710	4877	4062	4011	263	2325	2896	3344	4493	4274	98	4600	4348	1541	3848	136	1679	1543	2955	2895	1537	3800	1964	4782	233
Row 49	2678	5675	4952	4995	368	3921	5814	3152	4827	4157	5835	2008	3359	1554	2	5460	2860	970	3374	4374	4942	1739	4394	844	980	1062	4091	734	3860	5945	1198	5486	182	1957	4776	3590	2727	3608	1128	5545	5291	1591	162	1512	4111	1652	4502	374	2340

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.