troubleshooting Question

Table header must be on top

Avatar of Whing Dela Cruz
Whing Dela CruzFlag for Anguilla asked on
JavaScriptASPHTML
2 Comments1 Solution209 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros