Html 具有固定标题的表生成问题

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

可展示： #ShowTable由10列组成，#bookedtable由6列组成，#admintable由8列组成。不知怎的，10%的宽度 对于th和td，前两个表似乎起作用，占据了整个宽度，但管理表似乎只会变宽 当我出于某种原因将宽度设置为1%时。thead是正确的，但td似乎制造了问题

如何使管理表的大小相同

此外，当我将浏览器窗口的大小调整为更小时，列的大小也不会保持不变。您知道如何解决这些问题吗

干杯

编辑： Js小提琴： 它在Firefox中看起来不错，但在IE和Edge中有一些问题…：(

---

与问题中描述的管理表不稳定不同，现在显示的表看起来是错误的。此外，这些表都没有对齐，标题和正文我的意思是

如果您在问题中包含一个，最好是带有示例数据，将更容易帮助您。处理它将尽快发布。请阅读编辑“不一致"问题来自于

thead

和

tbody

的自定义

display

样式。另外，

thead

应该作为一个固定的标题，没有任何额外的样式。至少我在Safari和FF中见过这种行为。您是否尝试过限制

表的高度而不是
tbody
？标题应该是如果我限制了表格的高度，而不允许我再滚动主体。如果我删除了两种自定义显示样式，则标题不再固定。。。
    <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>

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