Question

请帮助我将下表制作为可滚动而不影响已定义的样式。我通过将tbody定义为显示块来尝试使用overflow = auto。但没有运气，因为它改变了桌子的宽度，并且还得到了一些错误对齐的细胞头和身体。

＆＃13;

$.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++;
        });
      }

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 1

尝试以下CSS，

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

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

1 个答案: