javascript - 多头时如何制作表格的粘性表头
问题描述
我正在尝试使表格的标题具有粘性。但这似乎不起作用。这个实验我一直在尝试使用流星框架。
<table class="tableclass">
<thead class="headclass">
<tr class="tr">
<th style="color: #ffffff">th content</th>
{{#each names}}
<th>{{name}}</th>
{{/each}}
</tr>
</thead>
{{#each peoples}}
<thead>
<tr class="tr-another">
<th colspan="100%">
<span id="report"><img id="icons" src="button.svg" width="16px" height="16px">
</span> {{this}}</th>
</tr>
</thead>
<tbody class={{this}}>
{{>Field}}
</tbody>
{{/each}}
</table>
我使用了以下样式。
tableclass{
overflow-y: auto;
height:100px;
}
.outer table{
width: 100%;
table-layout: fixed;
border : 1px solid black;
border-spacing: 1px;
}
.outer table th {
text-align: left;
top:0;
position: sticky;
background-color: white;
}
有人可以帮忙吗?我想让第一个主题变得粘稠。
谢谢。
解决方案
根据css-tricks.com,您不能设置也不能设置position: sticky;
. 但你可以粘一个。这很奇怪,但它有效。<thead>
<tr>
<th>
您在类上设置此属性.outer table th
。但我没有在你的 HTML 中看到这个类!
实际上,根据您的 HTML 代码,您可以这样写:
.headclass th {
position: sticky;
top: 0;
}
推荐阅读
- javascript - 为什么 clearInterval 不清除我的间隔?
- sql - 简单更新 (SQL) 与批量更新 (PL/SQL)
- java - 使用 Autowired 类测试 void 方法
- vb.net - 如何解决 SMTP 服务器声明的“服务器响应是 5.5.1 身份验证”问题?
- r - Conditional calculation across columns
- c# - 如何使内容视图成为泛型?
- kubernetes - Minikube 与 nginx 入口路径重写问题
- java - 为什么 JNDI InitialContext 可以在 jsp 中正常工作,但不能在类中工作?
- java - 如何在 JOOQ 中懒惰地获取组?
- reverse-proxy - haproxy 调用请求时获取 404(直接工作正常)