javascript - Jquery 附加超出最大高度

Question

我有一个jquery代码，它循环遍历对象列表并将html附加到表中。但是我已经设置了父/表的最大高度。表行仍然超出父级。

记录应该停在图中的红线处，并且应该出现滚动条。

有人可以帮忙吗？

Jquery

$.each(data, function (i, item) {
     $('#dataTable').append("<tr><td>" + i + '</td><td>' + item.name+ '</td><td>' + item.English + '</td><td>' + item.Quantity + '</td><td>' + item.Brand + '</td></tr>')
});

HTML

<div class="panel panel-default" style="height:700px;">
   <div class="panel-heading">Records</div>
   <div class="panel-body" style="max-height:700px; z-index:5;">
      <table id="dataTable" class="table" style="height:700px;overflow:auto;">
         <tr>
            <th>S/N</th>
            <th>name</th>
            <th>Description</th>
            <th>Qty</th>
            <th>Brand</th>
         </tr>
      </table>
   </div>
</div>

Answer 1

从表格标记 height:700px;overflow:auto; 中删除以下样式案例，并在类 .panel- 中应用 overflow:auto; 样式案例正文。 overflow:auto; 样式大小写在表格标记中不起作用。