已经发布了类似的问题，但这是对问题的新看法。
到目前为止我所知道的
我的问题是上下文
问题
https://jsfiddle.net/jw147aqk/1/
您需要调整窗口大小以使表格溢出。
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.wrap {
background: #eee;
height: 100%;
display: grid;
grid-template-rows: 50px 1fr 50px;
grid-template-areas: "header" "main" "footer";
}
header {
grid-area: header;
background: green;
color: #fff;
}
main {
overflow-y: auto;
}
footer {
grid-area: footer;
background: #ba0000;
color: #fff;
}
table {
width: calc(100% - 3px);
border-collapse: collapse;
}
table th {
background: #000;
color: #fff;
height: 50px;
position: sticky;
}
table td {
background: #fff;
height: 50px;
border: 1px solid #ccc;
}<div class="wrap">
<header>My header</header>
<main>
<table>
<thead>
<tr>
<th>Head first</th>
<th>Head second</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell first</td>
<td>Cell second</td>
</tr>
<tr>
<td>Cell first</td>
<td>Cell second</td>
</tr>
<tr>
<td>Cell first</td>
<td>Cell second</td>
</tr>
<tr>
<td>Cell first</td>
<td>Cell second</td>
</tr>
<tr>
<td>Cell first</td>
<td>Cell second</td>
</tr>
<tr>
<td>Cell first</td>
<td>Cell second</td>
</tr>
<tr>
<td>Cell first</td>
<td>Cell second</td>
</tr>
<tr>
<td>Cell first</td>
<td>Cell second</td>
</tr>
<tr>
<td>Cell first</td>
<td>Cell second</td>
</tr>
<tr>
<td>Cell first</td>
<td>Cell second</td>
</tr>
<tr>
<td>Cell first</td>
<td>Cell second</td>
</tr>
<tr>
<td>Cell first</td>
<td>Cell second</td>
</tr>
</tbody>
</table>
</main>
<footer>Footer</footer>
</div>添加top: 0;到表中
table th {
background: #000;
color: #fff;
height: 50px;
position: sticky;
top: 0;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句