Question

我想保持当前表的样式，并添加一个固定的标题。但是，我在使标头固定时遇到问题。此页面包含4个格式相似的表。

.table-wrapper-2 {
  display: block;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  width: 100%;
}

<div class="card">
  <div class="card-body">
    <div class="table-wrapper-2">

      <table class="table table-striped table-bordered table-fixed" id="entityTable">
        <thead>
          <tr class="table-primary">
            <th scope="col" style="width: 3%">#</th>
            <th scope="col" style="width: 19%">ID</th>
            <th scope="col" style="width:19%">Col 1</th>
            <th scope="col" style="width: 19%">Col 2</th>
            <th scope="col" style="width: 19%">Col 3</th>
            <th scope="col" style="width: 19%">Col 4</th>

          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let id of transactionId, let i = index" class="clickable-row" (click)="onTransactionIdChange(id)">
            <td>{{i+1}}</td>
            <td>{{id}}</td>
            <td>{{col1[i]}}</td>
            <td>{{col2[i]}}</td>
            <td>{{col3[i]}}</td>
            <td>{{col4[i]}}</td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>
</div>

Answer 1

您可以看看sticky-top内置类。

将类添加到tr thead的{{1}}中的示例：

<tr class="table-primary sticky-top">

.table-wrapper-2  {
  display: block;
  max-height: 300px;
  overflow-y: auto;
  overflow-x:  auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  width: 100%;
}

您还可以查看https://www.bootply.com/tagged/sticky上现成的代码片段

如何为引导表制作固定的列标题？相同格式

1 个答案: