【问题标题】：How to make fixed column headers for a bootstrap table? Same format如何为引导表制作固定列标题？相同格式
【发布时间】：2018-12-25 08:08:06
【问题描述】：
我想保持当前表格的相同样式并添加一个固定的标题。但是，我在修复标题时遇到了问题。此页面包含 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>
【问题讨论】：
标签：
html
css
html-table
bootstrap-4
【解决方案1】：
你可以看看sticky-top内置类。
将类添加到thead <tr class="table-primary sticky-top"> 的tr 的示例：
.table-wrapper-2 {
display: block;
max-height: 300px;
overflow-y: auto;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<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 sticky-top">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
你也可以看看sn-ps现成的https://www.bootply.com/tagged/sticky