标题固定的表出现问题

Question

我试图建立一个带有固定标题的表，该表在除admin表之外的所有表上都可以正常工作。

可显示：

    <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>

已预订表：

<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>

可管理：

<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;
}

#showntable由10列组成，＃bookedtable为6列，＃admintable为8列。宽度为10％ 因为前两个的th和td似乎起作用并且占据了整个宽度，但是admin表似乎只是扩大了 当我出于某种原因将宽度设​​为1％时。 Thead是正确的，但td似乎出了问题。

如何使管理表的大小相同？

此外，当我将浏览器窗口的大小调整为较小时，列的大小也不相同。您知道如何解决这些问题吗？

欢呼

编辑：

Js Fiddle：http://jsfiddle.net/d7crasvh/23/ 它在Firefox中看起来不错，但在IE和Edge中却存在一些问题...：（

现在，与问题所描述的一样，管理表并非如此，现在显示的表看起来是错误的。表也​​都没有对齐，标题和正文是我的意思