Table with fixed header make problems - html

Question

I was trying to set up a table with a fixed header which works fine on all tables except the admin table.
showntable:
<div class="table-responsive">
<table class="table table-bordered" id="showntable">
<thead>
<tr>
<th> Business Unit</th>
<th> Product Group</th>
<th> Device</th>
<th> Serial number</th>
<th> Location</th>
<th> Available?</th>
<th> Condition</th>
<th> Calibration Date</th>
<th> Info</th>
<th> Book</th>
</tr>
</thead>
<tbody id="contents">
<?php echo fill_table($connect); ?>
</tbody>
</table>
</div>
bookedtable:
<div class="table-responsive">
<table class="table table-bordered" id="bookedtable">
<thead>
<tr>
<th>Type</th>
<th>Serial Number</th>
<th>From</th>
<th>Until</th>
<th>Edit Comment</th>
<th>Edit Booking</th>
</tr>
</thead>
<tbody>
<?php echo fill_book($connect); ?>
</tbody>
</table>
</div>
admintable:
<div class="table-responsive">
<table class="table table-bordered" id="admintable">
<thead>
<tr>
<th>Business Unit</th>
<th>Product Group</th>
<th>Device</th>
<th>Serial Number</th>
<th>Condition</th>
<th>Calibration Date</th>
<th>Comment</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php echo fill_admin($connect); ?>
</tbody>
</table>
</div>
CSS:
thead {
display: table;
width: calc(100% - 17px); /* -17px because of the scrollbar width */
}
tbody {
display: block;
max-height: 55vh;
overflow-y: scroll;
}
#showntable th, #showntable td {
width: 10%;
overflow-x:scroll;
}
#bookedtable th, #bookedtable td {
width: 10%;
overflow-x:scroll;
}
#admintable th, #admintable td {
width:10%;
overflow-x:scroll;
}
th {
text-align: center;
}
td {
text-align: center;
}
The #showntable consists of 10 columns, the #bookedtable of 6 and the #admintable of 8 columns. Somehow the width of 10%
for the th and td of the former two seem to work and take up the entire width but the admin table only seems to broaden
when I put the width as 1% for some reason. The thead is correct but the td seems to make problems.
How can I make the admin table the same size?
Also when I resize the browser window to be smaller the columns don't stay the same size. Do you know how to fix these issues?
Cheers
Edit:
Js Fiddle: http://jsfiddle.net/d7crasvh/23/
Its looks fine in Firefox but in IE and Edge it has some issues... :(
Instead of the admin table being wonky as described in the problem it's now the shown table that looks wrong. also the tables are all not aligned, the header and the body i mean