超文本标记语言表tbody列宽度不匹配头列宽度添加滚动条后使用显示：块

Question

我一直在尝试在我的tbody上添加一个滚动条，这样我的thead就可以贴在顶部了。滚动条工作，我的thead看起来像我想要的那样，但问题是我的tbody列不再与我的thead中设置的列宽“对齐”。我的thead列宽与内容“自动匹配”，我希望我的tbody宽度与thead中设置的任何内容匹配。

删除“display:block”当然可以解决这个问题，但是去掉了我的滚动条，所以我被卡住了。我也试着给我的tbody增加100%的宽度，以及给我的thead增加100%的宽度和显示：block-这些都没有改变任何事情。

请参阅底部的我的编辑，了解我尝试过的另一件事

如何在不弄乱列宽的情况下向tbody添加滚动条？

<table id="CmtRequests" class="table-condensed table-bordered table-striped table-responsive" cellspacing="0">
    @* Header *@
    <thead>
        @* Filters row *@
        <tr>
            <th>
                <a asp-page="./Index" class="btn btn-sm btn-dark">Reset</a>
                <input formmethod="get" type="submit" value="Refresh" class="btn btn-sm btn-primary" />
            </th>
            <th>
                <select class="form-control" asp-for="SupplierFilter" asp-items="Model.SupplierList"><option selected></option></select>
            </th>
            <th>
                <select class="form-control" asp-for="ReasonFilter" asp-items="Model.ReasonList"><option selected></option></select>
            </th>
            @*etc..*@
        </tr>
        @* Title row *@
        <tr>
            <th>
                Title
            </th>
            <th>
                Title
            </th>
            <th>
                Title
            </th>
            @*etc..*@
        </tr>
    </thead>
    @* Body *@
    <tbody style="overflow-y:scroll; overflow-x:hidden; height:38vh; display:block;">
        @foreach (var item in Model.CmtRequests)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.PartNo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SupplierNo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Priority)
                </td>
                @*etc..*@
            </tr>
        }
    </tbody>
</table>

编辑：我尝试添加以下CSS类表修复，摆脱了我上面HTML中的所有样式设置，改用它（从本文中），滚动条不会出现，所以一定发生了其他更大的事情：

.table-fixed tbody {
    height: 38vh;
    overflow-y: auto;
    width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
    display: block;
}

    .table-fixed tr:after {
        content: "";
        display: block;
        visibility: hidden;
        clear: both;
    }

    .table-fixed tbody td,
    .table-fixed thead > tr > th {
        float: left;
    }

Answer 1

这工作原理：

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->

    <div class="container">
      <div class="row">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4>
                Fixed Header Scrolling Table 
              </h4>
            </div>
            <table class="table table-fixed">
              <thead>
                <tr>
                  <th class="col-xs-2">#</th><th class="col-xs-8">Name</th><th class="col-xs-2">Points</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-xs-2">1</td><td class="col-xs-8">Mike Adams</td><td class="col-xs-2">23</td>
                </tr>
                <tr>
                  <td class="col-xs-2">2</td><td class="col-xs-8">Holly Galivan</td><td class="col-xs-2">44</td>
                </tr>
                <tr>
                  <td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td>
                </tr>
                <tr>
                  <td class="col-xs-2">4</td><td class="col-xs-8">Jim Adams</td><td>23</td>
                </tr>
                <tr>
                  <td class="col-xs-2">5</td><td class="col-xs-8">Henry Galivan</td><td class="col-xs-2">44</td>
                </tr>
                <tr>
                  <td class="col-xs-2">6</td><td class="col-xs-8">Bob Shea</td><td class="col-xs-2">26</td>
                </tr>
                <tr>
                  <td class="col-xs-2">7</td><td class="col-xs-8">Andy Parks</td><td class="col-xs-2">56</td>
                </tr>
                <tr>
                  <td class="col-xs-2">8</td><td class="col-xs-8">Bob Skelly</td><td class="col-xs-2">96</td>
                </tr>
                <tr>
                  <td class="col-xs-2">9</td><td class="col-xs-8">William Defoe</td><td class="col-xs-2">13</td>
                </tr>
                <tr>
                  <td class="col-xs-2">10</td><td class="col-xs-8">Will Tripp</td><td class="col-xs-2">16</td>
                </tr>
                <tr>
                  <td class="col-xs-2">11</td><td class="col-xs-8">Bill Champion</td><td class="col-xs-2">44</td>
                </tr>
                <tr>
                  <td class="col-xs-2">12</td><td class="col-xs-8">Lastly Jane</td><td class="col-xs-2">6</td>
                </tr>
              </tbody>
            </table>
          </div>
      </div>
    </div>

CSS：==

.table-fixed thead {
  width: 97%;
}
.table-fixed tbody {
  height: 230px;
  overflow-y: auto;
  width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
  display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
  float: left;
  border-bottom-width: 0;
}