Статическая строка в таблице HTML

Question

Я пытаюсь создать файл со списком проводника Windows в HTML / Javascript. Поэтому я хотел бы, чтобы первая строка таблицы, которая содержала заголовки для всех столбцов, была видимой даже при прокрутке столбцов.

Я пробовал несколько вариантов, связанных с размещением заголовков в отдельной таблице, но все они потерпели неудачу в основном по одной причине - когда список файлов прокручивается горизонтально, таблица заголовков не прокручивается вместе с ним.

Следовательно, я, по сути, ищу элемент, связанный с другим таким образом, чтобы он прокручивался с другим по горизонтали, но не по вертикали.

Я понимаю, что многие подумают, что мне следует использовать css, а не таблицы, но это спорный вопрос, поскольку даже при использовании css я не могу решить проблему, заключающуюся в том, чтобы строка заголовка прокручивала файлы горизонтально, но не вертикально. *

Любая помощь, которую вы можете предложить, будет принята с благодарностью.

Answer 1

Я предлагаю использовать Javascript.Подцепите событие onScroll обоих прокручиваемых элементов и обновите свойство scrollLeft обоих элементов.

    var tableHeader = document.getElementById('tableHeader');
    var tableBody = document.getElementById('tableBody');

    function updateTableBody(e){
        tableBody = tableHeader.scrollLeft;
    }

    function updateTableHeader(e){
        tableHeader = tableBody.scrollLeft;
    }    

    tableHeader.addEventListener('scroll', updateTableBody, false);
    tableBody.addEventListener('scroll', updateTableHeader, false);

Конечно, это не пуленепробиваемо и может быть оптимизировано, но это даст вам и идеюи, надеюсь, хорошее начало.

ПРИМЕЧАНИЕ. Убедитесь, что оба элемента имеют одинаковые размеры, в противном случае свиток будет иметь странное смещение.

Answer 2

К сожалению, это не доступно как решение только для CSS. У CSS есть некоторые функции, которые теоретически должны использоваться для прокрутки TBODY, но поддержка браузера слишком противоречива.

Одним из решений, которое еще не упоминалось, является библиотека Ext JS. Он делает гораздо больше, чем просто прокручиваемые таблицы, и вам придется просмотреть лицензирование, чтобы увидеть, сработает ли оно для вас, но их объект сетки является самой надежной заменой таблиц с расширенным пользовательским интерфейсом из всех, что я видел.