Solved: Table header must be on top

Hi experts, I have made a table with header but when I added cells, the header will go on to the bottom. Any help please! I wish the header will remain on top. Thank you!

<!Doctype Html>
<Html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>
<form>
<div class="DivH9a">
  <table id="ReceiveTable" style="width:70%;" style="cursor: pointer">
  <tbody>
    <th style="width:10%; text-align:left">&nbsp; Del</th>
    <th style="width:10%; text-align:left">&nbsp; Qty</th>
    <th style="width:10%; text-align:left">&nbsp; U.m</th>
    <th style="width:50%; text-align:left">&nbsp; Description</th>
    <th style="width:10%">&nbsp; U.p</th>
    <th style="width:10%">&nbsp; Total</th>
  </tbody>
  </table>
</div>

</form>
<button onclick="return addTableFunction()">Add</button>
<script>
function addTableFunction()
{
  var table = document.getElementById("ReceiveTable");
  var row = table.insertRow(0);
 
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  var cell5 = row.insertCell(4);
  var cell6 = row.insertCell(5);
  var cell7 = row.insertCell(6);
 
  cell1.innerHTML = '<button>Del</button>';
  cell2.innerHTML = '<input type="text">';
  cell3.innerHTML = "Apple";
  cell4.innerHTML = "Banana";
  cell5.innerHTML = "100.00"
  cell6.innerHTML = "Milk";
  
  cell1.style.width="10%";  
  cell2.style.width="10%";  
  cell3.style.width="10%";  
  cell4.style.width="50%";  
  cell5.style.width="10%";  
  cell6.style.width="10%";  
}
</script>
</body>
</Html>

Open in new window