用 table 的 insertRow() 和 insertCell() 增加表格行时，所在 div 怎么会跳到页面下方去呢？

[Yanbin_Q]

<button onclick="load()">加载数据</button> 

   <div  style="width: 600;height:370;overflow: auto;border-width : 1px;border-style : solid;">
	<table width="100%" id="dataTable"  align="center" border=1 style="border-collapse: collapse">
	    <tr style="font-weight:bold">
		    <td>编号</td>
		</tr>
			    <tr style="font-weight:bold">
		    <td>编号</td>
		</tr>
	</table>
   </div>

<script>
    
    function load(){
		for(var i=0;i<100;i++){
		   newRow = document.getElementById('dataTable').insertRow();

		   newCell = newRow.insertCell();
		   newCell.innerText = '编号';
		}
    }
</script>

上在代码点击 "加载数据" 按钮后，欲向表格中增加行，可以执行后，table 所在的 div 跑到页面下方去了。用上面的代码一执行就能看到这种效果，我所用的浏览器是 IE6。如果把生成的 HTML 代码保存成一个 html 文件，再次打开，其实是正常的。

[tianshuai32]

的确如此，没想明白。

[sohighthesky]

有点意思，IE7也是的

[sohighthesky]

不要overflow: auto;这一句就是好的了

[xiaojing7]

[code=HTML]
<button onclick="load()">加载数据</button> 

<div style="width:600;height:370;overflow: auto;border:1px solid #666;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle">
<table width="100%" id="dataTable" align="center" border=1 style="border-collapse: collapse">
<tr style="font-weight:bold">
<td>编号</td>
</tr>
<tr style="font-weight:bold">
<td>编号</td>
</tr>
</table>
</div>

<script>

function load(){
for(var i=0;i<100;i++){
var newRow = document.getElementById('dataTable').insertRow();

newCell = newRow.insertCell();
newCell.innerText = '编号';
}
}
</script>

[/CODE]

[sohighthesky]

好像是因为tr,td是块元素，把table加个float:left也可以解决

[Yanbin_Q]

4 楼的正解。

[54powerman]

的确如此，没想明白。