css - 网格内溢出自动内的粘性表格标题
问题描述
已经发布了类似的问题,但这是对该问题的新看法。
到目前为止我所知道的
- 粘性位置在溢出的父级内部不起作用
- 可以使用 javascript 来“破解”它,但是对于所有移动部件来说,工作量太大(溢出位置、大小等)
我的问题是上下文
- 我使用了一个网格,其中顶部和底部应该是固定的,并且主要应该是可滚动的
- 主要有一个表格,将来可能会垂直和水平溢出
- th 设置为粘性(但由于溢出而不起作用)
- 我有一次通过使用带有松散元素(没有父元素)的网格来解决它,但这太乱了,无法使用
问题
- 我更喜欢纯 CSS 解决方案
- 我怎样才能绕过它?
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;
}
推荐阅读
- git - Github 问题 - 当我在 github 上推送我的项目时,它显示 myname 和 myname 提交,我的名字出现了 2 次,为什么会这样?
- audio-streaming - 从 axWindowsMediaPlayer 控件中检索广播歌曲标题
- javascript - 如何确定光标是否出现在 contenteditable div 中的某些字符之后
- python - 反转 2D --> 2D 非线性函数
- bash - 使用 fdisk 命令的 Bash 脚本磁盘分区
- elasticsearch - 在每个索引的小数据集上进行多索引搜索的 ElasticSearch 性能优化
- angular - 如何在状态管理中增加或减少对象属性?
- oauth-2.0 - 为 /oauth/token 配置基本身份验证
- python - 如何获取其他字段中的表字段
- javascript - 如何将数组元素分配给 onclick 函数