CSS如何在动态填充的div列中获取垂直滚动条

Question

我有2个浮动列：

<div class="content">
    <form method="post" autocomplete="off" action="">
        <h3>
New
</h3>
<div class='lineContainer'>
<div class="left"> 
<table id=form class='form-container lefttable'>
                <tbody>
                ...
                </tbody>
</table>
</div>
<div id="history" class="right">
<h3>History</h3>
<table>
      <th>Date:</th><th>Note</th>
</table>
</div>
</div>
<input type="submit" value="add" />
    </form>
</div>

样式如下：

.lineContainer {
display:table;
border-collapse:collapse;
width:100%;
}
.lineContainer div {
display:table-cell;
#border:1px solid black;
height:10px;
padding:10px;
}
.left {
width:100px;
}
#history table{
width:100%;
height:inherit;
overflow: auto;
}
#history table tbody{
height: inherit;
overflow: auto;
}
div#history{
max-height: 300px;
overflow:scroll;
height:300px;
}
#history table th:first-child{
width:150px;
}

历史记录表通过AJAX填充：

$('div#history td').remove()
            $.get('some url,{some params},
            function(data){
                $.each(data, function (i, item) {
                            $('div#history table').append('<tr><td>'+item.data+'</td>  <td>'+item.note+'</td></tr>');
                        })
            });

如果需要，我希望第二个表具有滚动的恒定高度，并且无法使滚动条工作。正确的div和table只是为了为内容腾出空间。

我认为是因为ajax？ 如何在任何桌面浏览器上运行？