多头时如何制作桌子的粘页眉 [英] How to make Sticky Header of table when multiple head

问题描述

我正在尝试使表格的标题变粘.但这似乎不起作用.我一直在尝试使用流星框架进行这项实验.

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.

谢谢.

推荐答案

根据

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;
}

这篇关于多头时如何制作桌子的粘页眉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！