Angular 7固定表头示例不起作用

Question

我遇到了一个固定头表的大问题，因为它与我的Angular应用程序有关。使用这个this example（也就是this one）作为我的问题的基础，我原本以为是我的组件，但是现在，我已经将相同的代码附加到我的index.html页面中，并消除了角应用程序被实施。我不应该仍在使用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>

但是，这是显示的内容：

有人可以帮助我理解为什么它可以在各种示例中工作，但是当我尝试在本地计算机上甚至在应用程序外部使用我的角度应用程序运行它时，它还是行不通的？

更新：

问题可能是因为我使用的是Bootstrap 4而不是Bootstrap3。按照jahller的解释，当我将引导程序更改为3.3.7时，它可以工作。不幸的是，我正在用Bootstrap 4构建我的应用程序。有人能指出我一个与Bootstrap 4兼容的示例吗？

更新2：

根据jahller的其他修改，问题在于我的列对表列使用col-xs- {num}类。通过将它们切换为col- {num}类，具有固定标题的可滚动表可以完美地工作！

Answer 1

您所使用的示例是使用引导程序3而不是引导程序4 在此堆叠闪电示例https://stackblitz.com/edit/angular-v8mxae中查看app.component.html

我导入了示例代码笔中使用的相同引导程序版本

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

使用此版本可以正常工作

*编辑

要使用引导程序4，只需删除xs类的col-部分。 网格系统从引导3稍微更改为4。

因此，使用col-xs-2代替col-2而不是col-xs-4 col-4，等等。