Angular：table header 上有粘性东西
Angular: Sticky things on table header
我正在做一个 medium-sized 项目，我们需要在其中显示一些复杂的信息 table。 header 需要 粘性 ，这样当您向下滚动页面时，header 会粘在 table 的顶部。
因为我想支持 IE 和更早版本的 Chrome，所以我 不想 使用 position: sticky;。我不介意它涉及一点 JS，因为我之前对此的尝试也包括了它。
我已经走了这条路，简单地通过 JS 做到这一点，并在用户进一步向下滚动 table header 时制作 position: fixed;。然而，这似乎也存在与下面的堆栈闪电战中所说明的相同的问题。
这让我认为它可能有一些我不合适的尺寸。
我研究了一下 Angular Sticky Things 的使用。我可以全神贯注地思考如何在给定的上下文中使用这个库：
我有一个 Stackblitz 以及它的用法示例。
如果有人能给我一些提示，告诉我到底应该怎么做，我会很高兴。
我希望整个 thead 向下移动，而不缩放自身或缩放 table 的其余部分！
我在第一行 CSS 添加了 display:inherit 以更接近您想要的... width 属性 用于匹配粘性之间的宽度header 和其余 table...
thead.is-sticky{display:inherit;width:calc(100vw - 35px)!important;}
剩下的唯一限制是 table 的限制。例如如果标题太大，它会弄乱小屏幕上的外观，所以我们打破这个词，因此第二个 CSS 行：
th, tr{word-break: break-word;}
我正在做一个 medium-sized 项目，我们需要在其中显示一些复杂的信息 table。 header 需要 粘性 ，这样当您向下滚动页面时，header 会粘在 table 的顶部。
因为我想支持 IE 和更早版本的 Chrome，所以我 不想 使用 position: sticky;。我不介意它涉及一点 JS，因为我之前对此的尝试也包括了它。
我已经走了这条路，简单地通过 JS 做到这一点，并在用户进一步向下滚动 table header 时制作 position: fixed;。然而，这似乎也存在与下面的堆栈闪电战中所说明的相同的问题。
这让我认为它可能有一些我不合适的尺寸。
我研究了一下 Angular Sticky Things 的使用。我可以全神贯注地思考如何在给定的上下文中使用这个库：
我有一个 Stackblitz 以及它的用法示例。
如果有人能给我一些提示，告诉我到底应该怎么做，我会很高兴。
我希望整个 thead 向下移动，而不缩放自身或缩放 table 的其余部分！
我在第一行 CSS 添加了 display:inherit 以更接近您想要的... width 属性 用于匹配粘性之间的宽度header 和其余 table...
thead.is-sticky{display:inherit;width:calc(100vw - 35px)!important;}
剩下的唯一限制是 table 的限制。例如如果标题太大，它会弄乱小屏幕上的外观，所以我们打破这个词，因此第二个 CSS 行：
th, tr{word-break: break-word;}