Unable to add line when I give <tbody> tag

Question

I have a table that dynamically loads data through jQuery. My code works fine if I remove the <thead>and tags <tbody>. Although, when I add these tags, the code will not work; in particular, rows will not be added. Rows are added under one column.

if(responseJson.length!=null){
 $("#itemtable").find("tr:gt(0)").remove();
   var table1 = $("#itemtable tbody");
   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).text(value['slno']);
           rowNew.children().eq(1).text(value['itemname']); 
           rowNew.children().eq(2).text(value['itemcode']); 
           rowNew.children().eq(3).text(value['supplier']); 
           rowNew.children().eq(4).text(value['receivedqty']); 
           rowNew.children().eq(5).text(value['rejectedqty']); 
           rowNew.children().eq(6).text(value['acceptedqty']); 
           rowNew.children().eq(7).text(value['remarks']); 
           rowNew.appendTo(table1);
           i++;
   });
}

/* table-itemtable styles */
.t1 { border-collapse: collapse;  width: 100%;}
.t1 th, td { text-align: left; padding: 8px;}
.t1 th {background-color: #4CAF50; color: white;}
.t1 tbody { display: block; }
.t1 tbody {
    height: 300px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

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

Run codeHide result

Answer 1

Now that I understand that you want to scroll tbody, yes, it should be a block, but you need to fix the location theadand contained elements. You can see the changes in the last two CSS blocks.

: , ( ) . , , - , , . DataTables.

function rand() {
  return Math.floor(Math.random() * 10000) + 1
}
var keys = [
  "slno",
  "itemname",
  "itemcode",
  "supplier",
  "receivedqty",
  "rejectedqty",
  "acceptedqty",
  "remarks"
];
var responseJson = [...Array(100)].map(r => {
  var r = rand(), o = {};
  keys.forEach(key=>{o[key]= [key,r].join('-');});
  return o;
});

if (responseJson.length != null) {
  var $tbl = $("#itemtable"),
    $tbody = $tbl.find('tbody');

  $tbody.find('tr').remove();

  $.each(responseJson, function(i, obj) {
    var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
    keys.forEach((key, i) => {
      rowNew.children().eq(i).text(obj[key])
    });
    rowNew.appendTo($tbody);
  });
}

/* table-itemtable styles */

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

.t1 th,
td {
  text-align: left;
  padding: 8px;
}

.t1 th {
  background-color: #4CAF50;
  color: white;
}

.t1 tbody {
  display: block;
}

.t1 tbody {
  height: 8em;
  /* Just for the demo          */
  overflow-y: auto;
  /* Trigger vertical scroll    */
  overflow-x: hidden;
  /* Hide the horizontal scroll */
}


/* ===== UPDATES HERE: ====*/

td {
  overflow-x: hidden;
  /* too much data affects visibility */
}

thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  /* fix width of table and columns */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" id="itemtable" class="t1" border="1px">
  <thead>
    <tr>
      <th>SLno</th>
      <th>Item name</th>
      <th>Item code</th>
      <th>Supplier</th>
      <th>Received qty</th>
      <th>Accepted qty</th>
      <th>Rejected qty</th>
      <th>Remarks</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Hide result

Answer 2

.

.t1 tbody { display: block; }

, , .

.

https://jsfiddle.net/juastyzL/