多头时如何制作表格的粘性表头答案

【问题标题】：How to make Sticky Header of table when multiple head多头时如何制作表格的粘性表头
【发布时间】：2020-08-17 13:54:18
【问题描述】：

我正在尝试使表格的标题具有粘性。但这似乎不起作用。这个实验我一直在用流星框架尝试。

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

有人可以帮忙吗？我想让第一个广告具有粘性。

谢谢。

【问题讨论】：

这里有几个问题：1）表可能只有一个<thead>，你的例子有多个。但是<thead> 可能有多行。 2) 样式应该有.tableclass，但是你的样式没有点。首先修复它。检查此堆栈闪电战stackblitz.com/edit/js-xlycdf。它有基于您的代码的工作示例

标签： javascript html css forms meteor

【解决方案1】：

根据css-tricks.com，您不能在<thead> 或<tr> 上设置position: sticky;。但你可以粘贴<th>。这很奇怪，但它有效。

您在类.outer table th 上设置了此属性。但我没有在你的 HTML 中看到这个类！

其实根据你的HTML代码，你可以这样写：

.headclass th {
  position: sticky;
  top: 0;
}

【讨论】：

【解决方案2】：

我认为你的 css 应该是：

.headclass {
    position: sticky;
    top: 0;
}

【讨论】：