Фиксированный заголовок / прокручиваемый стол с переменной шириной

Question

Я понимаю, что этот вопрос довольно часто задавался о переполнении стека;однако, просмотрев несколько из них, я считаю, что у моего вопроса есть еще одно требование.Я хочу превратить обычную HTML-таблицу в таблицу, которую можно прокручивать как по вертикали, так и по горизонтали, в то время как заголовок остается наверху.Ширина этой таблицы превышает ширину страницы, поэтому мне нужно, чтобы заголовки перемещались горизонтально при прокрутке таблицы.Я бы предпочел использовать чистый метод CSS;однако я буду использовать Javascript, если это необходимо.Еще предстоит найти решение, которое делает все это.

Answer 1

Это решение может работать для вас в зависимости от стиля ваших заголовков.Это чистый CSS.http://salzerdesign.com/blog/?p=191

Answer 2

Почему бы вам не просто использовать a и установить для него высоту и ширину, допускающие переполнение. Тогда просто поставьте туда свой стол, и все готово.

Мне это кажется самым логичным и простым способом ...

Answer 3

ну, вы можете использовать JQuery, чтобы сделать это в несколько строк кода, вы можете увидеть мой другой пост, чтобы создать таблицу с исправлением заголовка и прокручиваемый корпус

Создать таблицу с прокручиваемым телом

после этого давайте представим, что у вас есть один div для заголовков с именем класса = "Top1" и один div для тела с именем класса = "Top2", вы можете привязать прокрутку одного к другому

$('.Top2').bind('scroll', function(){
  $(".Top1").scrollLeft($(this).scrollLeft());
});

$('.Top1').bind('scroll', function(){
  $(".Top2").scrollLeft($(this).scrollLeft());
});

jsFliddle demo

Answer 4

Вот хороший плагин jQuery, работающий во всех браузерах!(посмотрите демо)

В результате получается таблица с фиксированным заголовком, прокручиваемая (на данный момент ..) только по вертикали, но с переменной шириной.

Я разработал этот плагин длявстретить проблему фиксированного заголовка + гибкая ширина.

Проверьте это: https://github.com/benjaminleouzon/tablefixedheader