テーブルアライメントを行わないスクロールテーブル

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

Uはdivの中にあなたのテーブルをラップする必要があり、そのdivのオーバーフロー設定し、CSSの下

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