所以我能够创建一个粘性标题表并且它工作正常。问题是我需要制作另一个带有多行标题的表，而我到目前为止使用的方法不起作用，正如您在下面的代码中看到的那样。
.table-wrapper {
position: relative;
overflow-y: auto;
height: 200px;
width: 200px;
}
table {
border: 1px solid #DDD;
vertical-align: middle;
text-align: center;
border-collapse: collapse;
border-spacing: 0
}
table tr th,
table tr td{
border: 1px solid #DDD;
background-color: #FFF;
padding: 4px;
}
table thead tr th {
position: sticky;
top: 0;
}
<div class="table-wrapper">
<table>
<thead>
<tr>
<th rowspan="2">
Header
</th>
<th colspan="2">Colspan column</th>
</tr>
<tr>
<th>
A
</th>
<th>
B
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Line 1</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 2</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 3</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 4</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 5</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 6</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 7</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 8</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 9</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 10</td>
<td>a</td>
<td>b</td>
</tr>
</tbody>
</table>
</div>
仅使用 CSS 可以实现我想要的吗？
这是笔https://codepen.io/criscoder/pen/KJNGqj https://codepen.io/criscoder/pen/KJNGqj
您已经快到了，您只需在您的应用程序中嵌入一个表格即可<th>并以这种方式添加额外的行。
.table-wrapper {
position: relative;
overflow-y: auto;
height: 200px;
width: 200px;
}
table {
border: 1px solid #DDD;
vertical-align: middle;
text-align: center;
border-collapse: collapse;
border-spacing: 0
}
table tr th,
table tr td{
border: 1px solid #DDD;
background-color: #FFF;
padding: 4px;
}
table thead tr th {
position: sticky;
top: 0;
}
<div class="table-wrapper">
<table>
<thead>
<tr>
<th rowspan="2" colspan="1">
Header
</th>
<th rowspan="2" colspan="2">
<table>
<tr>
<td colspan="2">Colspan column</td>
</tr>
<tr>
<td colspan="1">A</td>
<td colspan="1">B</td>
</tr>
</table>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Line 1</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 2</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 3</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 4</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 5</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 6</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 7</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 8</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 9</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>Line 10</td>
<td>a</td>
<td>b</td>
</tr>
</tbody>
</table>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
