如何将滚动条添加到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 .. */
}

<强>溢出

  

overflow属性指定内容溢出时会发生什么   元素的盒子。

<强>最大高度

  

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

Answer 2

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

$("#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>