不影响表格对齐的可滚动表格

Question

请有人帮我在不影响已定义样式的情况下将下表设为可滚动。我已经通过将 tbody 定义为显示块来尝试使用 overflow= auto 。但没有运气，因为它改变了表格的宽度，并且单元格标题和正文也出现了一些错误对齐。

$.post('geterpitem', {
      grn: $('#grn').val()
    }, function(responseJson) {
      if (responseJson.length != null) {
        var $tbl = $("#itemtable");
        $tbody = $tbl.find('tbody');
        $tbl.find("tr:gt(0)").remove();
        var i = 1;
        $.each(responseJson, function(key, value) {
          var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
          rowNew.children().eq(0).append(i);
          rowNew.children().eq(1).text(value['itemcode']);
          rowNew.children().eq(2).text(value['itemname']);
          rowNew.children().eq(3).text(value['receivedqty']);
          rowNew.children().eq(4).html('<input type="text"  id="inspdate"/>');
          rowNew.children().eq(5).html('<input type="text"  id="accqty" onkeypress="return isNumber(event)"/>');
          rowNew.children().eq(6).html('<input type="text"  id="rejqty" class="reject"/>');
          rowNew.children().eq(7).html('<input type="text"  id="rema"/>');
          rowNew.appendTo($tbody);
          i++;
        });
      }

/* table-itemtable styles */

.t1 {
  border-collapse: collapse;
  width: 100%;
}

.t1 th {
  text-align: center;
  padding: 8px;
  background-color: #4CAF50;
  color: white;
}

.t1 tr {
  text-align: left;
  padding: 8px;
}

<table cellspacing="0" cellpadding="0" id="itemtable" class="t1" border="1px">
  <thead>
    <tr>
      <th> SLno</th>
      <th>Item code</th>
      <th>Item name</th>
      <th>Received qty</th>
      <th>Insp Date</th>
      <th>Accepted qty</th>
      <th>Rejected qty</th>
      <th>Remarks</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Answer 1

试试下面的 CSS，

tbody {
    display: block;
    height: 100px;     /* Let it for 100px */
    overflow: auto;    /* Trigger scroll   */
    width: 100%;
}