给定的表提供了一个包含多行的表头。我已经有一个创建带有粘性表格标题的表格的功能示例，但是当在标题中使用多行时，此解决方案将不起作用，因为某些单元格会消失在其他单元格后面。
.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>根据我上面代码的行为，表头单元格“第 1 组”和“第 2 组”将消失在下一行的单元格后面。
我怎样才能避免这种情况发生？
最佳答案
尝试在您的 CSS 中进行以下更改:
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
thead tr#row1 th {
position: sticky;
top: -1px;
background-color: #afc8f0;
}
thead tr#row2 th{
position: sticky;
top: 30px;
background-color: #afc8f0;
}
同时更新您的 html 文件
<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 id="row1">
<th></th>
<th scope="col" colspan="2">Group 1</th>
<th scope="col" colspan="2">Group 2</th>
<th></th>
</tr>
<tr id="row2">
<th>#</th>
<th>
First
</th>
<th>
Last
</th>
<th>
First
</th>
<th>
Last
</th>
<th>Handle</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>
这是一个fiddle为您的解决方案。
关于html - 是否可以创建一个包含多行的粘性表头？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56947066/