使用 CSS/Angular JS 修复列和标题

Posted 2023-02-19

【中文标题】使用 CSS/Angular JS 修复列和标题

【英文标题】：Fixed columns and header with CSS/Angular JS

【发布时间】：2014-12-01 20:43:10

【问题描述】：

我在执行以下操作时遇到了问题：

修复表头 修复前 4/5 列冻结，其余列水平滚动 表格应位于固定高度和宽度的 div 内

我能够修复标题，但我无法实现#2。该表位于页面上的窗格内。所以我不能真正使用position:absolute 来修复列以实现#2。

我在网上尝试了几个例子来实现这一点，但我需要创建一个 Angular JS 指令来做到这一点。我是 AngularJS 的新手，但是，我尝试调整以下示例但没有运气。

https://www.pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive

任何有关 CSS 方式的帮助也会有所帮助。

我还为我正在尝试做的事情添加了 plunker。所以我想冻结示例中的前 2 列。

http://plnkr.co/edit/iKwNrqT1Gy1oDvyK6FFN?p=preview

【问题讨论】：

如果您尝试设置一个 jsbin/jsfiddle/plunker 将会很有帮助。

我尝试使用多个表，例如jsfiddle.net/zS7Ny，但我不想使用 2 个表，因为数据是一个列表，我需要迭代两次。

您希望水平滚动仅应用于specific columns？你试过这个来自jthe的answer吗？

我试过这个例子，没有运气。我的桌子在一个 div 里面。 div 是水平滚动的。所以整个东西仍然向右滚动。

我添加了 plunker 以了解我已经拥有的东西。谢谢！

【参考方案1】：

如果您只是向thead 添加更多行，它将自动为您修复它们，就像指令调用的那样。

请看这里：http://embed.plnkr.co/CmJBfd/preview

因此，您所要做的就是在您不希望看起来像标题的行上放置一个自定义类，并将它们的样式设置为行。

【讨论】：

这没有像要求的那样冻结列