如何冻结可滚动表的标题行？ [英] How to freeze header row of a scrollable table?

问题描述

在动态创建的表中，我想冻结顶行，以便在滚动表时始终显示它。相关的代码如下。标题行如何冻结？谢谢。

In a dynamically created table, I want to freeze the top row so that it always displays when the table is scrolled. The related piece of code is below. How can the header row get frozen? Thanks.

        function createTable(_records, cellWidth) {
            var _table = document.createElement("TABLE");

            var row = _table.insertRow(-1);
//            row.style.position = 'fixed';
            for (var i = 0; i < _records[0].length; i++) {
                var headerCell = document.createElement("TH");
                headerCell.innerHTML = _records[0][i];
                headerCell.bgColor = '#FFCCFF';     // pale pink
                headerCell.style = 'first-row-style';
                headerCell.style.height = '24px';
                //headerCell.style.position = 'fixed';
                headerCell.style.textAlign = 'center';
                headerCell.style.borderLeft = '.5px solid black';
                row.appendChild(headerCell);
            }
        ....
        }

我的尝试：



如何冻结可滚动表的标题行？

What I have tried:

How to freeze header row of a scrollable table?

推荐答案

冻结标题是通过将元素的位置属性设置为绝对来完成的。这将允许您的元素浮动到任何地方，您希望它。在这种情况下，绝对定位非常有用，在这种情况下，您希望元素浮动在另一个元素上，例如在滚动的同时将标题（或列名称）保持在自己的位置。



位置 - CSS | MDN [ ^ ]

Tryit Editor v3.0 [ ^ ]



在你的情况下，它会是，

The freezing of the headers is done by setting the position property of the element to absolute. This would allow your element to float anywhere, you want it to. Absolute positioning is really very helpful in such scenarios, where you want an element to float on another element such as in the cases of scrolling while keeping the headers (or the column names) in their own position.

position - CSS | MDN[^]
Tryit Editor v3.0[^]

In your case, it would be,

headerCell.style.position = "absolute";

// Rest of the configurations to keep the header on top
headerCell.style.top = "0px";

但有时候这可能有点过分，这意味着在使用这种方法之前你应该总是考虑另一种方法，在这里阅读， html - 使用绝对定位被认为是不好的做法吗？ - 堆栈溢出 [ ^ ]。

这篇关于如何冻结可滚动表的标题行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！