css - Angular 7 固定标题表示例不起作用

Question

我在固定 header 表方面遇到了一个大问题，因为它与我的 Angular 应用程序有关。使用这个 this example (这也是 this one )作为我的问题的基础，我最初认为它是我的组件，但现在，我已将相同的代码附加到我的 index.html 页面并消除了 Angular 应用程序的实现。我不应该认为我仍在使用 ng serve 并在我的本地计算机上呈现应用程序和页面。我的 CSS 包括:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css" />
<style type="text/css">
  .table-fixed tbody {
    height: 200px; 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;
  }
  .table > thead > tr > th,
  .table > thead > tr > td {
    font-size: .9em;
    font-weight: 400;
    border-bottom: 0;
    letter-spacing: 1px;
    vertical-align: top;
    padding: 8px;
    background: #51596a;
    text-transform: uppercase;
    color: #ffffff;
  }
</style>

紧接着，在我的 html 中，我有表格:

    <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>
        ...
      </tbody>
    </table>

然而，这是显示的内容:

有人可以帮助我理解为什么这可以在各种示例中工作，但是当我尝试在我的本地计算机上使用我的 Angular 应用程序运行它时，即使在应用程序之外，它也不起作用？

更新:

问题可能是因为我使用的是 Bootstrap 4 而不是 Bootstrap 3。根据 jahller 的解释，当我将 bootstrap 更改为 3.3.7 时，它起作用了。不幸的是，我正在使用 Bootstrap 4 构建我的应用程序。谁能给我指出一个适用于 Bootstrap 4 的示例？

更新 2:

根据 jahller 的额外编辑，问题是我的列正在为表列使用 col-xs-{num} 类。通过将它们切换到 col-{num} 类，具有固定标题的可滚动表格可以完美地工作!

Answer 1

您使用的示例是使用 bootstrap 3 而不是 bootstrap 4 检查此 stackblitz 示例中的 app.component.html https://stackblitz.com/edit/angular-v8mxae

我导入了与您的示例代码笔中使用的相同的 Bootstrap 版本

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

这个版本可以按预期工作

*编辑

要使用 bootstrap 4，只需删除 col- 类的 xs 部分。 网格系统从 bootstrap 3 到 4 略有变化。

所以 col-xs-2 使用 col-2 而不是 col-xs-4 col-4 等