【发布时间】：2019-11-18 16:27:24
【问题描述】：
Given table 提供了一个包含多行的表头。我已经有一个用于创建带有粘性表格标题的表格的功能示例，但是当在标题中使用多行时，此解决方案将不起作用，因为某些单元格将消失在其他单元格后面。
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
thead th {
position: sticky;
top: -1px;
background-color: #fff;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm">
<thead>
<tr>
<th scope="col" rowspan="2">#</th>
<th scope="col" colspan="2">Group 1</th>
<th scope="col" colspan="2">Group 2</th>
<th scope="col" rowspan="2">Handle</th>
</tr>
<tr>
<th>
First
</th>
<th>
Last
</th>
<th>
First
</th>
<th>
Last
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td></td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td></td>
<td></td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td></td>
<td></td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>根据我上面代码的行为，表头单元格“Group 1”和“Group 2”将消失在下一行的单元格后面。
我怎样才能避免这种情况发生？
【问题讨论】：
-
Chrome 似乎放弃了对这个功能的开发，因为......我不知道。他们将责任归咎于规范，但似乎无法用他们的滚动引擎修复一些错误。如果您想将
thead设置为粘性，您应该 粘贴（双关语）到display: sticky的 polyfill