本文介绍了多头时如何制作桌子的粘页眉的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使表格的标题变粘.但这似乎不起作用.我一直在尝试使用流星框架进行这项实验.
I'm trying to make a table's header sticky. But it doesn't seem to work. This experiment I have been trying with meteor framework.
<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;
}
有人可以帮忙吗?我想让第一个thead粘起来.
can someone please help. I want to make first thead sticky.
谢谢.
推荐答案
根据 css-tricks.com ,您不能在<thead>
或<tr>
上设置position: sticky;
.但您可以粘贴<th>
.很奇怪,但是有效.
According to css-tricks.com you can't set position: sticky;
on <thead>
nor a <tr>
. but you can sticky a <th>
. it's weird but it works.
您可以在类.outer table th
上设置此属性.但我在您的HTML中没有看到此类!
You set this property on the class .outer table th
. but I didn't see this class in your HTML!
实际上基于您的HTML代码,您可以编写以下代码:
Actually based on your HTML code, you can write this:
.headclass th {
position: sticky;
top: 0;
}
这篇关于多头时如何制作桌子的粘页眉的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!