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

Question

Я пытаюсь создать файл, содержащий a la windows explorer в 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. Это намного больше, чем просто прокрученные таблицы, и вам придется просмотреть лицензию, чтобы узнать, будет ли она работать для вас, но их сетевой объект является наиболее надежной заменой таблиц с подобным списком, похожим на пользовательский интерфейс, который я видел.