时间戳

首页 > 解决方案 > 使用 display: block 添加滚动条后，HTML 表格 tbody 列宽不匹配 thead 列宽

html - 使用 display: block 添加滚动条后，HTML 表格 tbody 列宽不匹配 thead 列宽

问题描述

我一直在尝试向我的 tbody 添加一个滚动条，以便我的头贴在顶部。滚动条有效，我的头看起来我想要的样子，但问题是我的 tbody 列不再与我的头中设置的列宽“对齐”。我的主题列宽度是“自动适应”内容的，我希望我的 tbody 宽度与主题中设置的任何内容相匹配。

删除“显示：块”当然解决了这个问题，但摆脱了我的滚动条，所以我被卡住了。我还尝试向我的 tbody 添加 100% 宽度，以及向我的头添加 100% 宽度和 display: 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 类 table-fixed，摆脱上面我的 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;
    }

标签： htmltwitter-bootstraphtml-table

解决方案

这有效：

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

推荐阅读