I have a situation where I have a table with a fixed header. In one of the columns, there are delete buttons within a form. The table structure is as follows:
<div class="panel panel-default table-responsive fixedHeader">
<!-- Table -->
<table class="table table-striped">
<thead>
<tr>
<!--table headers are here-->
</tr>
</thead>
<tbody>
{% for row in hoursDb %}
<tr>
<!-- all rows are called here, just saving space -->
<td>
<form action="" method="post">
<button type="submit" class="btn btn-default" name="delete" value="{{ row[7] }}">
<span class="glyphicon glyphicon-remove"></span>
</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
To achieve a fixed header in the table, I used the following CSS styling:
.fixedHeader {
height:40vh;
overflow-y:auto;
}
.fixedHeader th {
position: sticky;
top: 0;
}
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
However, when scrolling through the table, the header covers the other row data but does not cover the form/button/glyphicon for the delete action. This allows the user to accidentally click on the delete button. How can I ensure that the table header covers the form/button/glyphicon as well?
Thank you in advance for any suggestions or solutions.