How can I achieve a table layout where the first two columns are fixed for only one row and the remaining rows are repeated 7 times? Additionally, is there a way to make the bottom border of the last row thicker? Check out the expected table for reference.
function display() {
var tableRef = document.getElementById('myTable1').getElementsByTagName('tbody')[0];
for (var i = 0; i < 7; i++) {
var rowsAdd = tableRef.insertRow();
// Insert cells with input fields
...
}
}#myTable1 {
border-collapse: collapse;
width: 100%;
}
#myTable1 th {
background-color: #009999;
color: black;
}
.table-fixed {}
#myTable1 .tbody1 {
height: 200px;
overflow-y: auto;
}
#myTable1 thead,
.tbody1 {
display: block;
}<table class="table table-striped table-bordered table-fixed table-hover table-condensed" style="width: 1200px;" id="myTable1">
<thead>
<tr>
<th rowspan='2'>Date Comm.</th>
<th rowspan='2'>Drug</th>
<th rowspan='2'>Dosage</th>
<th rowspan='2'>Route Of Admin</th>
<th rowspan='2'>Ordered By</th>
<th rowspan='2'>Time</th>
<th rowspan='2'>Delete</th>
</tr>
</thead>
<tbody class="tbody1">
</tbody>
<tr id="hiderow">
<td><button onclick="display()"></button></td>
</tr>
</table>