[英]How to make Sticky Header of table when multiple head
I'm trying to make a table's header sticky.我正在尝试使表格的 header 具有粘性。 But it doesn't seem to work.
但这似乎不起作用。 This experiment I have been trying with meteor framework.
这个实验我一直在尝试使用 meteor 框架。
<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>
I used following style.我使用了以下样式。
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;
}
can someone please help.有人可以帮忙吗? I want to make first thead sticky.
我想让第一个主题变得粘稠。
Thanks.谢谢。
According to css-tricks.com you can't set position: sticky;
根据css-tricks.com你不能设置
position: sticky;
on <thead>
nor a <tr>
.在
<thead>
也不是<tr>
上。 but you can sticky a <th>
.但你可以粘一个
<th>
。 it's weird but it works.这很奇怪,但它有效。
You set this property on the class .outer table th
.您在 class
.outer table th
上设置此属性。 but I didn't see this class in your HTML!但我没有在你的 HTML 中看到这个 class !
Actually based on your HTML code, you can write this:实际上根据您的 HTML 代码,您可以这样写:
.headclass th { position: sticky; top: 0; }
I think you css should be:我认为你 css 应该是:
.headclass {
position: sticky;
top: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.