我有一张桌子。我添加到标准 Bootstrap 库的唯一 CSS 是用于实现粘性标头的:
.table-sticky th {
background: #fff;
position: sticky;
top: -1px;
z-index: 990;
}Run Code Online (Sandbox Code Playgroud)
<div class="table-responsive p-0 mt-2">
<table class="table table-sm table-striped table-hover table-sticky">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
</tbody>
</table>
</div>Run Code Online (Sandbox Code Playgroud)
粘性标题一直有效,直到我将表格包裹在div.table-responsive. 我如何让它们共存?