Angular：表头上有粘性的东西答案

【问题标题】：Angular: Sticky things on table headerAngular：表头上有粘性的东西
【发布时间】：2019-09-06 06:16:26
【问题描述】：

我正在从事一个中型项目，我们需要在一个复杂的表格中显示一些信息。标题需要粘性，这样当您向下滚动页面时，标题会粘在表格的顶部。

由于我想支持 IE 和早期版本的 Chrome，我不想使用 position: sticky;。我不介意它涉及一点 JS，因为我之前的尝试也包括了。

我已经走上了这条路，当用户进一步向下滚动到表格标题时，只需通过 JS 执行此操作并制作position: fixed;。然而，这似乎也有与堆栈闪电战中进一步说明的问题相同的问题。这让我认为它可能与我的尺寸不正确有关。

我对@987654321@ 的使用进行了一些研究。我只是想了解如何在给定的上下文中使用这个库：

我有一个 Stackblitz 示例用法。

如果有人能给我一个提示，告诉我到底应该怎么做，我会很高兴的。

我希望整个thead 向下移动，而不会缩放自身或缩放表格的其余部分！

【问题讨论】：

【解决方案1】：

我在第一个 CSS 行中添加了 display:inherit 以更接近您想要的...width 属性用于匹配粘性标题和表格其余部分之间的宽度...

thead.is-sticky{display:inherit;width:calc(100vw - 35px)!important;}

唯一剩下的限制是桌子的限制。例如如果标题太大，它会在较小的屏幕上弄乱外观，所以我们打破了这个词，因此第二个 CSS 行：

th, tr{word-break: break-word;}

【讨论】：