s yu Ответов: 1

Как заморозить строку заголовка прокручиваемой таблицы?

В динамически создаваемой таблице я хочу заморозить верхнюю строку, чтобы она всегда отображалась при прокрутке таблицы. Соответствующий фрагмент кода приведен ниже. Как строка заголовка может быть заморожена? Спасибо.

        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);
            }
        ....
        }


Что я уже пробовал:

Как заморозить строку заголовка прокручиваемой таблицы?

1 Ответов

Рейтинг:
0

Afzaal Ahmad Zeeshan

Замораживание заголовков производится путем установки position свойство элемента absolute Это позволит вашему элементу плавать в любом месте, где вы этого хотите. Абсолютное позиционирование действительно очень полезно в таких сценариях, когда вы хотите, чтобы элемент плавал на другом элементе, например, в случаях прокрутки, сохраняя при этом заголовки (или имена столбцов) в их собственном положении.

позиция-CSS | MDN[^]
Tryit Editor v3. 0[^]

В вашем случае это было бы, 

headerCell.style.position = "absolute";

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

Но иногда это может быть излишним, это означает, что вы всегда должны рассмотреть другой способ, Прежде чем использовать этот метод, читайте здесь, HTML-код - это считается плохой практикой, чтобы использовать абсолютное позиционирование? - переполнение стека[^].

s yu

ААЗ: Спасибо за ваши консультации. Ваш код работает частично. В этой таблице строка заголовка содержит 3 ячейки. Я немного пересмотрел ваш код,
подряд.стиль.позиция = "абсолютное";
Тогда это работает. Спасибо снова.

Afzaal Ahmad Zeeshan

Вы также можете пометить сообщение как ответ.

0x01AA

Есть 5 на данный момент :)

Afzaal Ahmad Zeeshan

Спасибо.