HTML ширина столбца таблицы не соответствует ширине столбца после добавления полосы прокрутки с помощью display: block

Question

Я пытался добавить полосу прокрутки к моему телу так, чтобы моя thead придерживалась вершины. Полоса прокрутки работает, и моя thead выглядит так, как я хочу, но проблема в том, что мои столбцы tbody не "выстраиваются" с шириной столбцов, установленной в моем thead больше. Моя ширина столбца thead «автоматически подгоняется» к содержимому, и я хочу, чтобы значения ширины tbody соответствовали значениям, заданным в thead.

Удаление «display: block», конечно, решает эту проблему, но получает избавиться от моей полосы прокрутки, так что я застрял. Я также попытался добавить 100% ширины к моему телу, а также добавить 100% ширины и отображения: блок для моей thead - Это ничего не изменило.

Пожалуйста, посмотрите мои изменения на внизу для другой вещи, которую я пробовал

Как добавить полосу прокрутки к моему телу, не испортив ширину моего столбца?

<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 выше и использовать его вместо (с * 1019) * эта статья ) и полоса прокрутки не появляется, поэтому должно произойти что-то еще большее:

.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

Решено! Нашел очень простое решение, подробности см. В этой статье .

Answer 2

Это работает:

    <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: ==> ширина: 97%; делает трюк

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