scrollbare Tabelle ohne Auswirkung auf die Tabellenausrichtung

Question

Irgendeine bitte helfen Sie mir, eine untere Tabelle als Scrollbar zu machen, ohne bereits definierten Stil zu beeinflussen. Ich habe versucht mit overflow = auto, indem ich tbody als Anzeigeblock definiere. aber kein Glück, weil es die Breite des Tisches ändert und auch eine falsche Ausrichtung von Zellenkopf und -körper bekommt.

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

Versuchen Sie die folgenden CSS,

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