如何将滚动条添加到 div 以增加动态表

Question

我通过单击链接将新的 TR 动态添加到一个表中，随着表变大，我需要在div 内创建一个滚动条，我该如何做到这一点？

$( "#aAdd").click(function() {    
   var tableHtml = "<tr><td><input type='text' /></td><td><input type='text' /></td></tr>";
   $("#tbInfo").append(tableHtml);
});

Answer 1

为表使用div 容器

.HTML

<div class="myScrollTable">
   <table></table>
</div>

.CSS

.myScrollTable{
   max-height:400px; /*example*/
   overflow: auto; /* auto , scroll .. */
}

溢出

溢出

属性指定如果内容溢出 元素的框。

最大高度

最大高度属性用于设置元素的最大高度。这可以防止高度属性的值大于最大高度。

Answer 2

将

表包装在div 中，并为div 设置所需的max-height:XXXpx和overflow: auto。

$("#aAdd").click(function() {
  $("#tbInfo").append("<tr><td><input type='text' /></td><td><input type='text' /></td></tr>");
});

.tableContainer {
  max-height: 150px;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Click the button "Add Rows" to add more rows and you will see the scrollbard when the height goes beyond 200px</p>
<div class="tableContainer">
  <table id="tbInfo">
    <tr>
      <td>
        <input type='text' />
      </td>
      <td>
        <input type='text' />
      </td>
    </tr>
    <tr>
      <td>
        <input type='text' />
      </td>
      <td>
        <input type='text' />
      </td>
    </tr>
    <tr>
      <td>
        <input type='text' />
      </td>
      <td>
        <input type='text' />
      </td>
    </tr>
    <tr>
      <td>
        <input type='text' />
      </td>
      <td>
        <input type='text' />
      </td>
    </tr>
    <tr>
      <td>
        <input type='text' />
      </td>
      <td>
        <input type='text' />
      </td>
    </tr>
  </table>
</div>
<button id="aAdd">Add Rows</button>