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

Question

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

Answer 1

<button onclick="load()">加载数据</button>&nbsp;   <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>

Answer 2

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