【发布时间】：2020-11-12 09:38:22
【问题描述】：
我有一个包含 3 行的表格标题，当我向下滚动表格时，我尝试修复所有这些行。
我的问题是，当我滚动时，只有标题的最后一行留在表格顶部。
如何设置我的位置：粘在整个标题上？
这是我的风格和我的 HTML：
.table-responsive{
height: 300px;
overflow: scroll;
}
thead tr:nth-child(3) th {
background: white;
position: sticky;
top: 0;
z-index: 10;
}
td{
text-align: center;
}<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered" style="border-width: 3px">
<thead class="thead-light">
<tr>
<th></th>
<th colspan="3" style="font-size: 20px; text-align: center" class="align-middle">
CATEGORY 1
</th>
<th colspan="4" style="font-size: 20px; text-align: center" class="align-middle">
CATEGORY 2
</th>
</tr>
<tr>
<th></th>
<th colspan="2" style="font-size: 16px; text-align: center" class="align-middle">
Sub-Category 1.1
</th>
<th colspan="1" style="font-size: 16px; text-align: center" class="align-middle">
Sub-Category 1.2
</th>
<th colspan="2" style="font-size: 16px; text-align: center" class="align-middle">
Sub-Category 2.1
</th>
<th colspan="1" style="font-size: 16px; text-align: center" class="align-middle">
Sub-Category 2.2
</th>
<th colspan="1" style="font-size: 16px; text-align: center" class="align-middle">
Sub-Category 2.3
</th>
</tr>
<tr>
<th> Group </th>
<th style="font-size: 12px; text-align: center" class="align-middle">
Access 1
</th>
<th style="font-size: 12px; text-align: center" class="align-middle">
Access 2
</th>
<th style="font-size: 12px; text-align: center" class="align-middle">
Access 3
</th>
<th style="font-size: 12px; text-align: center" class="align-middle">
Access 4
</th>
<th style="font-size: 12px; text-align: center" class="align-middle">
Access 5
</th>
<th style="font-size: 12px; text-align: center" class="align-middle">
Access 6
</th>
<th style="font-size: 12px; text-align: center" class="align-middle">
Access 7
</th>
</tr>
</thead>
<tbody>
<tr>
<th>Group 1</th>
<td>?</td>
<td>?</td>
<td>?</td>
<td>Y</td>
<td>N</td>
<td>Y</td>
<td>N</td>
</tr>
<tr>
<th>Group 2</th>
<td>Y</td>
<td>N</td>
<td>N</td>
<td>Y</td>
<td>N</td>
<td>N</td>
<td>N</td>
</tr>
<tr>
<th>Group 3</th>
<td>N</td>
<td>N</td>
<td>Y</td>
<td>N</td>
<td>N</td>
<td>?</td>
<td>?</td>
</tr>
<tr>
<th>Group 4</th>
<td>N</td>
<td>Y</td>
<td>N</td>
<td>N</td>
<td>Y</td>
<td>N</td>
<td>N</td>
</tr>
<tr>
<th>Group 5</th>
<td>N</td>
<td>Y</td>
<td>N</td>
<td>N</td>
<td>Y</td>
<td>N</td>
<td>N</td>
</tr>
</tbody>
</table>
</div>
</body>当我更改样式表中第 n 个子属性的数量时，它会更改显示的行。例如，如果我将其设置为 1，则会显示我的标题的第一行。我也尝试删除此属性，但我的所有行都没有保持它们的高度。
提前感谢您的帮助
【问题讨论】：
标签： html css position styles responsive