javascriptでスクロール付きの表を生成する-CSDN博客

IE以外では正常に表示されません。
<html>
<head>
</head>
<table border=0 cellpadding=0 cellspacing=0>
	<tbody>
		<tr>
			<td></td>
			<td Align="left">
				<div id="top" style="overflow:hidden;">
					<table width="100%" border=0 cellpadding=0 cellspacing=1 bgcolor="#000000">
						<tbody>
							<tr bgcolor="#CCCCFF">
<!--javascriptで動的に TD が差し込まれる-->
							</tr>
						</tbody>
					</table>
				</div>
			</td>
		</tr>
		<tr>
			<td  VALIGN="top">
				<div id="left" style="overflow:hidden;">
					<table width="100%" border=0 cellpadding=0 cellspacing=1 bgcolor="#000000">
						<tbody bgcolor="#CCCCFF">
<!--javascriptで動的に TR TD が差し込まれる-->
						</tbody>
					</table>
				</div>
			</td>
			<td>
				<div id="main" style="overflow:scroll;">
					<table width="100%" border=0 cellpadding=0 cellspacing=1 bgcolor="#000000">
						<tbody>
<!----表示する表を構成する---->
<tr bgcolor="#CCCCFF"><td>.<!--文字が必要--></td>     <td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr>
<!------------------------------------------------------------------------------------------------------------>
<tr bgcolor="#FFFFFF"><td bgcolor="#CCCCFF">1</td>    <td>a</td>   <td>A</td>   <td>k</td>   <td>K</td>   </tr>
<tr bgcolor="#FFFFFF"><td bgcolor="#CCCCFF">2</td>    <td>b</td>   <td>B</td>   <td>l</td>   <td>L</td>   </tr>
<tr bgcolor="#FFFFFF"><td bgcolor="#CCCCFF">3</td>    <td>c</td>   <td>C</td>   <td>m</td>   <td>M</td>   </tr>
<tr bgcolor="#FFFFFF"><td bgcolor="#CCCCFF">4</td>    <td>d</td>   <td>D</td>   <td>n</td>   <td>N</td>   </tr>
<tr bgcolor="#FFFFFF"><td bgcolor="#CCCCFF">5</td>    <td>e</td>   <td>E</td>   <td>o</td>   <td>O</td>   </tr>
<tr bgcolor="#FFFFFF"><td bgcolor="#CCCCFF">6</td>    <td>f</td>   <td>F</td>   <td>p</td>   <td>P</td>   </tr>
<tr bgcolor="#FFFFFF"><td bgcolor="#CCCCFF">7</td>    <td>g</td>   <td>G</td>   <td>q</td>   <td>Q</td>   </tr>
<tr bgcolor="#FFFFFF"><td bgcolor="#CCCCFF">8</td>    <td>h</td>   <td>H</td>   <td>r</td>   <td>R</td>   </tr>
<tr bgcolor="#FFFFFF"><td bgcolor="#CCCCFF">9</td>    <td>i</td>   <td>I</td>   <td>s</td>   <td>S</td>   </tr>
<tr bgcolor="#FFFFFF"><td bgcolor="#CCCCFF">10</td>   <td>j</td>   <td>J</td>   <td>t</td>   <td>T</td>   </tr>
<!------------------------------------------------------------------------------------------------------------>
						</tbody>
					</table>
				</div>
			</td>
		</tr>
	</tbody>
</table>



<script language="javascript" type="text/javascript">

	getHtmlObject("top").style.width="120px";
	getHtmlObject("main").style.width=getHtmlObject("top").style.width

	getHtmlObject("left").style.height="150px";
	getHtmlObject("main").style.height=getHtmlObject("left").style.height

	setTimeout(
		//再描画後にコールされる
		function(){
			var wsize=getHtmlObject("main").style.width.replace(/px/, '')-getHtmlObject("main").clientWidth;
			var hsize=getHtmlObject("main").style.height.replace(/px/, '')-getHtmlObject("main").clientHeight;

			getHtmlObject("top").style.width=getHtmlObject("main").style.width.replace(/px/, '')-wsize;
			getHtmlObject("left").style.height=getHtmlObject("main").style.height.replace(/px/, '')-hsize;

			var main=getHtmlObject("main").getElementsByTagName("tr");
			var head=getHtmlObject("top").firstChild.childNodes[0];
			var left=getHtmlObject("left").firstChild.childNodes[0];

			//要素を総て削除する
			for(i=0;i<head.firstChild.childNodes.length;i++){
				head.firstChild.removeChild(head.firstChild.firstChild);
			}
			for(i=0;i<left.length;i++){
				left.removeChild(left.firstChild);
			}


			//Holizontal要素を差し込んでヘッダを作成する
			for(i=0;i<main[0].childNodes.length;i++){
				td=document.createElement("TD");
				td.innerHTML="1";
				td.firstChild.nodeValue = main[0].childNodes[i].firstChild.nodeValue;
				td.width = main[0].childNodes[i].clientWidth+5;//+5で少し隙間を空ける
				main[0].childNodes[i].width = main[0].childNodes[i].clientWidth+5;//+5で少し隙間を空ける
				main[0].childNodes[i].height = main[0].childNodes[i].clientHeight;
				head.firstChild.appendChild(td);
			}

			//vartical要素を差し込んでヘッダを作成する
			for(i=1;i<main.length;i++){
				td=document.createElement("TD");
				td.innerHTML=main[i].firstChild.firstChild.nodeValue;
				tr=document.createElement("TR");
				tr.height = main[i].firstChild.clientHeight;
				main[i].firstChild.height = main[i].firstChild.clientHeight;
				tr.appendChild(td);
				left.appendChild(tr);
			}

			//leftの幅をmainに合わせる
			getHtmlObject("left").style.width = main[0].firstChild.clientWidth+5;//+5で少し隙間を空ける

			//サイズを固定する
			getHtmlObject("top").firstChild.style.tableLayout = "fixed";
			getHtmlObject("left").firstChild.style.tableLayout = "fixed";
			getHtmlObject("main").firstChild.style.tableLayout = "fixed";

			//行を削除する
			for(i=0;i<main.length;i++){
				main[i].firstChild.style.display = "none";
			}
			getHtmlObject("top").firstChild.firstChild.firstChild.firstChild.style.display = "none";
			main[0].style.display = "none";
		}
	,0);

	//スクロール
	document.getElementById("main").οnscrοll=function(){
		getHtmlObject("top").scrollLeft = getHtmlObject("main").scrollLeft;
		getHtmlObject("left").scrollTop = getHtmlObject("main").scrollTop;
	}

	function getHtmlObject(id){
		return document.getElementById(id);
	}
</script>
</html>