Question

我有一个表可以在页面上变得很长，所以标题会丢失，所以我认为一个粘性标题会解决这个问题。向下滚动太远，标题仍在那里，让你知道字段是什么。

我知道用jQuery做粘贴标头的传统方法，但我想用css尝试不同的方式。

我在网上发现了this它应该可以正常工作，但我似乎无法让它按预期运行。

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 15px;
}

并且帮助将是伟大的或任何其他css技巧，以帮助这项工作将是伟大的。

我设置了一个jsFiddel超过我的表单的here，所以你可以很好地了解正在发生的事情。

Answer 1

除非Chrome中有bug，否则您无法直接修复thead。因此，你必须在第th个元素上修复它：

thead th {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background: white;
    z-index: 10;
}

Answer 2

看看这个answer。神奇的是position: fixed。

如果你想跳枪：工作示例here

修改

我不认为你可以在没有Javascript的情况下干净利落地。然而，我对这个问题很感兴趣，所以我提出了这个解决方案。它使用div的数据周围的包装overflow: scroll。

<强> JSFIDDLE

Answer 3

这是对我有用的代码，用于在桌子上创建一个粘帖式广告...

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:50px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width:400px;
}

Answer 4

我遇到了类似的问题，不同之处在于我不得不弄清楚如何使其在更复杂的情况下能够正常工作：我面临的问题是，如果在同一页面中有更多的表，如何使位置固定工作正常进行，其中一些仅在thead元素中排入一行，而另一些在th元素中排入2行。

我发现的解决方案是使用CSS伪类第一个孩子和最后一个孩子。

下面的代码显示了如何实现技巧：

// 1st rule:
    thead > :first-child th, thead > :last-child th
    {
        position: sticky;
        z-index: 1;
    }
//2nd rule
    thead > :last-child th
    {
        top: 80px;
    }
//3rd rule
    thead > :first-child th
    {
        top: 50px;
    }

让我们专注于第二和第三条CSS规则：您可能会倾向于按逻辑顺序将它们写为第一个孩子，然后是最后一个孩子，但是将无法正常工作。在此解决方案中，为了正常工作，您必须放置第二个孩子的最后一个孩子：

thead > :last-child th

在必须将第一个孩子写为第三条规则之前：

thead > :first-child th

即使乍一看似乎是不合逻辑的。

因此，即使您在同一html页面中的表中的不同thead元素中包含1或2行，也可以使用上面的通用代码，因为css规则是由浏览器从上到下以及在完成解析后应用的html-css内容可以使您的元素获得正确的外观。但是如果您将第二个和第三个倒置，它将不再起作用，因为需要将第二个和第三个解析为一个主题，因此第三个规则必须克服第二个规则才能正常工作。实际上，如果您在巫婆剧院中放了一张桌子，只放了一行，那么仅使用

可能会遇到问题

thead th

或在我的代码中将第二条规则与第三条规则颠倒

thead > :first-child th {...}
thead > :last-child th {...}

因为当您只有一行时，第一个孩子也同时是最后一个孩子，因此浏览器将顶部位置的80px位置应用到该行上，结果一团糟，这不是您想要的。

Answer 5

如果父元素具有“溢出”功能，则无法使用...除非您已设置宽度/高度并且正在滚动。

除此之外，此：

position：sticky;顶：0; //垂直

position：sticky;左：0; //用于水平粘贴

足以工作。

在thead上创建一个粘性标题

5 个答案: