Whing Dela Cruz
asked on
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"> Del</th>
<th style="width:10%; text-align:left"> Qty</th>
<th style="width:10%; text-align:left"> U.m</th>
<th style="width:50%; text-align:left"> Description</th>
<th style="width:10%"> U.p</th>
<th style="width:10%"> 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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER