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	5784	5261	2839	5393	5753	3915	3547	3215	1317	3615	607	268	2768	2272	5515	3959	469	5679	1088	4476	4406	1720	2701	5557	3455	3944	857	5850	2787	4390	3306	4640	3463	4305	4248	5111	3045	3825	386	821	4783	4703	1948	1514	1194	1113	1868	1999	2826
Row 1	2725	2793	877	3838	3794	3881	183	2177	5631	4703	1765	851	5371	5068	5177	5048	5253	594	556	237	4390	4085	4326	673	4349	2134	1273	4838	1329	141	5996	597	4859	5250	2467	53	3576	975	3094	922	3369	2375	237	402	3564	4119	2986	3800	509
Row 2	4387	4426	5700	1256	1244	799	5132	2270	2177	17	4481	1733	4836	136	5893	3643	4853	235	4100	5825	5068	1484	1692	4157	360	112	5782	5679	4634	5311	4006	3616	4767	3645	2080	5193	4672	172	1430	980	5187	3887	2758	5852	3889	5303	4477	3616	2484
Row 3	4847	1986	3466	5879	1103	3517	3748	1288	5999	2046	2099	2500	1397	5928	5914	2970	5540	1678	2420	4564	4146	3523	4872	24	991	5618	4290	4642	2665	4456	5799	3855	3593	503	502	3161	2440	1198	3308	857	2211	1429	2184	3757	1736	3934	5967	367	1491
Row 4	5502	4218	1016	4990	5563	1951	5992	1944	2484	4487	3426	2587	1796	394	3516	3141	5275	5874	5135	3534	1666	1357	5367	3597	5004	3859	5202	1320	1344	4377	5604	2412	1915	5453	4213	4962	5235	5767	2863	5708	3763	1027	2023	2781	2255	2102	1958	1741	1092
Row 5	3355	2521	4398	49	5154	2508	2786	5351	5036	5315	4463	2066	4414	783	5181	1152	1988	2169	731	1436	601	2894	2464	3260	5152	2491	5114	3546	1590	4989	2701	4822	3227	3884	747	472	4609	1999	2191	2475	5496	5481	630	2632	5504	5811	3770	2530	2345
Row 6	4167	756	5802	2840	5790	2620	5941	3138	1115	957	5971	3167	2021	652	2910	5854	1495	3395	2589	4296	5333	3786	2429	1174	987	5431	3045	5174	4932	2641	5502	3532	180	4291	3084	4525	4972	214	1386	5301	336	3686	5994	5931	5316	2163	5512	753	2639
Row 7	5927	3900	286	5178	745	4908	230	904	1404	147	4718	1082	3938	2351	3813	47	4989	2592	4599	1982	2395	903	1435	3098	102	1351	1704	5224	2185	1887	720	2544	2799	794	5216	5715	5453	5544	5660	4000	1029	1174	3043	4177	161	535	54	854	4801
Row 8	3681	3846	1628	3242	4717	461	5023	3998	5421	4195	802	665	4669	3211	3883	2413	5466	803	1222	4928	225	5839	3539	1635	3690	3347	2143	5824	2805	1878	5732	1380	1611	4500	1863	4132	5528	2254	2848	1966	3045	1420	4616	549	1120	2906	3221	3202	1441
Row 9	1412	979	4603	4869	5618	517	3126	2408	1219	3896	1586	4077	5442	1471	2883	1257	5844	188	810	3986	4154	616	2659	2501	797	1840	4586	4861	2191	2941	1	1010	3006	304	5371	2299	671	4068	5017	4842	1850	1511	4733	728	3420	257	324	1681	5434
Row 10	1562	2332	5422	642	1644	1517	2185	95	2896	4966	1675	4777	170	2911	5883	1524	535	4308	9	3640	4728	581	1339	3488	4670	273	1503	768	1451	1221	2479	4414	5728	4373	4307	5176	3863	2211	1042	3520	3374	374	5274	2440	242	4264	3552	4578	1141
Row 11	4361	5247	5532	3336	5696	2504	3070	291	1937	2301	134	1035	1727	293	5079	5283	2434	2218	3492	5017	972	45	2820	88	4308	2240	3089	4183	2513	5963	5406	2712	2343	5458	4840	5721	348	5513	172	1543	2111	874	447	2361	92	5189	4999	1403	1746
Row 12	2100	607	4991	5872	2698	4897	3640	231	5423	3317	5365	5136	4382	1874	1665	2961	2736	4801	3495	3617	3286	5249	4783	5684	2282	275	3508	2259	3388	5880	555	1717	251	1532	1129	3369	3965	2954	5890	4336	1524	454	5911	5366	5081	917	2835	2665	2524
Row 13	548	4917	4644	1060	4204	1831	4206	1784	1778	3627	710	2687	3188	719	3354	2290	3720	4478	4450	4107	2115	4919	5736	3356	1206	1014	1194	5848	4772	2326	1132	3267	4230	2512	5637	2155	5926	978	4479	1560	3474	5801	4742	1721	3660	2944	3449	69	2001
Row 14	2269	3330	1898	5856	392	3618	5144	3744	5887	5158	5201	5522	5779	1374	5648	604	2319	258	116	3710	1039	1171	391	5137	1672	2760	246	1505	2083	3666	1965	2469	5971	17	1954	3722	5934	3288	4114	2263	886	3422	3317	4543	2266	2166	1974	395	1046
Row 15	3091	2352	389	2498	2208	4640	3677	2482	1136	2783	2982	2594	4699	1537	5524	4827	4011	2044	4780	2331	4424	2414	5012	2182	2215	2981	3124	1742	3737	54	5135	5112	3999	1182	1142	1168	5029	775	1708	5777	211	365	4893	4882	3165	3371	1226	1261	575
Row 16	4056	382	5393	2668	5512	4321	4691	5445	724	2052	2584	4058	543	1156	4763	1024	4405	403	1186	1888	2727	5161	2193	1526	254	3105	884	2066	4940	1095	5656	903	3738	1771	3038	1870	2586	2568	2975	886	650	5485	193	5451	682	4787	4757	109	2330
Row 17	2128	4083	3132	3947	1876	4540	2251	3839	2019	2314	3494	4673	3886	730	1244	494	1055	3136	565	141	1459	3362	5218	794	4656	3532	120	1194	141	3981	897	5833	4547	5803	2003	383	78	424	85	5673	1595	4817	1183	2425	2621	2136	4496	2880	259
Row 18	1027	5620	4340	2962	4705	5572	806	5793	2918	5023	2385	1511	5931	3286	3020	1329	197	440	261	250	2605	1399	2371	2904	5506	2423	5750	2078	1744	1479	3076	2805	4833	5304	5287	2212	5838	1708	672	5610	3536	4848	2816	3511	4874	1108	1520	2968	2590
Row 19	305	1690	4763	4202	5432	1984	3214	2965	1440	1327	2130	3162	4658	4298	5865	5304	4335	1124	2317	1072	4200	1353	1631	4570	4783	5594	5768	1602	2336	3136	1225	2565	115	1758	4397	3695	2524	1847	4428	5011	3715	3355	5857	3492	549	2063	2714	1539	5925
Row 20	5641	5920	2375	1364	2753	2602	5944	2703	3468	1597	4888	5318	2479	3203	475	464	5120	5284	553	2762	1962	4604	1477	3214	4787	1831	1352	3302	1548	1317	221	3649	3855	5397	1078	4490	4331	5745	274	103	2264	1386	241	3252	1059	4331	4252	996	5125
Row 21	367	2558	3270	5199	2279	5936	2461	4314	3794	1975	1516	1202	2057	4644	184	2468	452	4237	1450	1936	3577	3036	4567	3273	5715	2230	5553	2645	4394	3672	3736	5711	2984	2013	5778	4207	5303	3898	1101	1388	2878	4308	4665	5176	3646	883	467	5883	1148
Row 22	3254	1602	314	4974	5948	3294	533	3938	3106	3373	5869	3603	5724	5286	5102	4010	2640	4444	39	2853	2274	5480	846	495	5863	746	2462	2062	3196	531	4125	4873	1143	3947	2793	4167	4758	1614	202	5832	1814	422	3140	3376	4571	2953	4302	5905	5914
Row 23	5336	76	4147	349	3731	2537	3425	5376	5088	4431	5961	687	1356	1164	3278	3688	2035	3355	2739	825	3965	4942	5462	2553	3066	3714	4893	2486	3456	2108	124	5688	820	5956	4613	1662	1889	400	2076	2258	4703	671	5292	5048	1948	4517	295	1116	2802
Row 24	4112	3907	5710	3681	4717	1096	5589	226	5069	1211	1152	854	3469	4775	443	115	5699	2617	2826	3030	361	2173	3121	3864	3132	4623	3106	213	862	4164	1654	1834	2030	4401	534	5902	5165	667	4299	5791	493	3611	5326	2050	5142	4602	1205	2214	3520
Row 25	3252	4802	519	3784	2450	2230	3833	4909	3061	3949	5287	5016	4636	4895	4875	961	5562	4116	2545	5091	2604	4386	1727	4325	1175	5174	2293	992	1985	5692	2352	4306	90	2559	2881	2864	1168	691	183	3096	1820	5002	4215	1642	1126	9	1802	5111	4897
Row 26	4159	5489	3329	321	1696	4733	3049	1964	3259	3851	1932	5082	648	3472	2387	2576	5118	3591	2736	4751	3188	3247	2001	3152	4197	3390	1222	1295	2106	1176	4184	3612	5266	5070	723	3314	4925	987	3273	4929	1723	5203	2878	3075	3045	3701	1220	5491	1997
Row 27	5078	5345	2247	925	481	1031	4355	5327	1315	634	2665	938	2300	3450	2401	3077	1022	1405	3089	770	1721	3054	4755	2193	700	3098	2942	361	2045	4664	2550	650	1817	2978	901	2936	3305	3533	2874	4249	3381	4398	2031	4117	3000	4159	4603	4476	5349
Row 28	4824	1921	2066	1394	2666	2238	917	257	1741	1283	2208	5816	3998	1702	5969	2507	2533	2824	3140	2717	5867	1225	4273	3459	398	5663	4389	5561	2382	745	1464	1639	3501	3487	3611	3225	5297	4412	5391	771	112	5683	181	4482	4818	875	2516	5398	5219
Row 29	2001	5616	3259	759	2002	1355	3862	582	1002	4326	23	2665	5094	2987	5550	1790	3892	2679	4868	180	907	5833	399	4559	5939	4996	189	352	516	78	2398	5363	2569	203	4355	888	3479	5702	5786	5474	5739	4869	1380	3053	1901	3239	3016	2311	3388
Row 30	664	2006	830	4881	4291	4657	194	3666	3472	2788	743	3414	5582	3915	4813	2570	2697	4033	3430	2952	3782	3712	1703	2869	5304	656	5443	1458	5045	5934	3264	4640	2420	4038	815	5302	1478	3867	449	5831	2520	3945	3535	880	3567	5444	2733	1237	5613
Row 31	4622	4031	4663	204	5226	400	1878	1563	3525	5529	4252	487	3912	287	43	5345	4193	1883	5101	4667	2732	1148	4270	4337	1564	5404	2209	2496	1032	3976	1223	1249	3529	1434	2352	3867	2686	2548	3927	3222	5959	3436	3424	5498	3905	600	2987	1711	4262
Row 32	71	1628	2006	4189	4807	3209	5511	1300	71	3690	4636	487	4925	638	4986	5519	4717	1099	4655	3307	1414	1956	1301	1036	3085	2497	2628	5265	1394	2034	5769	4395	5674	4495	3177	5064	3737	3553	1845	5168	1422	798	4822	3611	406	3360	1015	444	5293
Row 33	2673	1588	5894	2320	748	5903	2366	2787	1940	344	2373	5828	5434	765	1800	639	516	883	340	5352	4914	2689	3686	5922	1398	1243	3385	869	560	613	894	3906	1827	4405	41	4359	5658	1738	3916	3265	474	1394	3165	3455	1761	5747	1492	2374	674
Row 34	1783	465	2425	5094	1035	1816	3076	1517	790	1645	2622	4490	1503	4127	2949	5379	2630	220	2480	5410	948	4406	5980	654	3483	260	2554	4044	4265	518	4452	1197	5573	2754	370	3426	86	2227	2208	702	3104	3321	3710	4254	129	5537	2028	5859	5571
Row 35	2831	2737	2623	1992	4448	1051	4011	1155	1521	3814	3315	5697	4706	3894	2047	5597	1649	4644	1772	3207	5858	5644	410	5768	4421	4903	3572	724	3194	731	3064	686	3686	3104	56	4796	1287	3388	4291	365	3365	3377	2576	327	2227	987	4426	3802	4441
Row 36	4766	5118	1131	1619	3410	1060	4217	4442	5126	1916	1893	2089	2444	3831	5989	1078	890	275	931	5054	3183	2507	5967	4805	4396	3853	768	2225	767	1831	1689	1845	2998	5441	3550	3132	5813	3677	673	2626	2839	3790	120	5711	1799	4187	5685	5254	649
Row 37	2425	2249	4090	4299	5854	3363	2069	1016	106	5108	1531	5174	5058	2286	1479	5024	2045	3249	688	433	3683	408	4216	852	3320	427	2371	4255	7	1336	1643	4010	460	4379	5712	2246	936	5290	1300	3000	2152	1995	581	5874	68	2582	586	684	4322
Row 38	1274	4328	2952	1508	5012	2878	3656	4262	4477	4441	5631	5581	1179	1987	3012	4906	4089	1626	3876	4793	695	3550	3142	78	625	4570	2974	2915	5492	2596	1609	4279	4830	4427	5469	2610	5259	4661	3430	5703	1261	4698	764	4201	5234	4044	1435	5672	2147
Row 39	3234	5936	4040	770	8	2860	2937	5389	5338	2978	691	3408	5037	533	1685	1219	5442	1007	4969	3553	4304	3421	3312	928	1474	5740	3355	872	3549	1817	4247	4312	3821	2296	1123	1202	5179	354	2643	938	4838	4944	1500	4453	4945	605	5348	5076	5524
Row 40	2832	2630	4290	1171	4751	751	4535	5097	5706	3390	2917	389	5203	3757	5197	1029	335	4867	4162	218	5189	5468	2103	5147	5651	639	2558	2682	979	15	4721	1995	3539	1795	3559	4493	988	4887	4731	980	5180	4420	4416	2623	3186	406	3028	4264	3221
Row 41	3306	1453	3339	4205	920	25	2490	3868	3125	3201	3529	3708	2480	4823	2403	5036	1842	973	3173	3208	241	4521	5443	395	44	1694	4104	249	4699	2485	3913	1886	1960	4690	527	550	2424	161	2796	2053	3680	2768	1918	1186	5085	4386	5025	3557	514
Row 42	2787	78	4384	2978	1256	3703	3431	4229	3297	2998	2862	1751	2056	4015	5368	472	126	737	5048	3098	1839	2136	1985	1674	3371	700	1843	2409	4035	988	2278	1031	3092	5809	4802	2743	4509	1471	846	2121	1714	1924	327	2546	4433	5366	1948	3107	5238
Row 43	348	2185	3018	3703	4659	3329	5568	2984	1629	3422	1609	2142	4112	2976	3627	857	2927	203	4784	4767	556	1897	4648	4235	4398	4538	868	5971	5937	4681	4328	191	3801	5423	3498	2816	4388	5305	4076	4918	5236	2261	4951	4621	231	5452	1560	3576	4213
Row 44	3846	1530	5366	3238	1558	2793	892	5820	1666	5654	4918	968	5770	2702	1489	3223	771	5721	3607	2790	3188	2953	2474	4309	1968	5245	5711	2768	3859	3905	5702	1858	5071	3310	2355	40	2315	4501	3156	1659	4382	4509	442	2279	5934	538	134	3701	5496
Row 45	4346	3605	1214	2203	5049	2814	2317	87	4423	140	5867	4869	1982	198	3737	4897	2544	1389	374	975	4024	364	3196	3911	413	2453	5102	766	583	4817	4286	373	2191	3105	4916	4957	5939	3051	4092	430	3954	4349	1542	4624	5531	3599	2833	2937	4213
Row 46	5978	3603	1998	396	4378	3901	779	1332	4988	661	1142	989	2535	2763	3139	5499	1725	5861	5429	2687	5265	5167	2213	1234	2457	4967	5101	3025	5664	3884	1768	3282	980	4446	5839	4502	1096	4230	3555	4678	329	5490	3369	2189	5528	5667	4600	4420	2990
Row 47	153	1721	5199	4283	407	2002	1100	1259	3479	2578	5661	4095	1052	1485	3266	3460	1441	3728	4717	4402	3673	1302	3899	4736	1289	1467	709	1676	2333	3778	95	4669	5081	1329	4749	3697	5931	1779	1961	4915	3260	4922	212	306	4502	1377	1149	4694	4841
Row 48	2695	4846	2055	4159	2772	4904	2472	444	2821	5181	5776	966	2102	559	3926	2490	1147	3322	3263	4667	5358	3471	2667	3341	191	3075	3804	129	2322	2791	3863	2466	5586	1255	4952	2967	2455	3275	4797	462	880	2739	2071	2924	3908	3420	2180	1942	3440
Row 49	1795	2877	2148	5670	74	51	2563	1600	5175	58	4328	4003	3596	1598	5277	2707	1653	957	5904	531	1400	763	5162	3715	1775	2954	5956	1768	3535	2864	179	297	1387	2963	3888	3468	3382	482	5382	629	639	4415	4475	3011	1626	5651	4033	5571	325

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.