Плагин TableSorter 2.0 - Включить прокрутку таблицы

Question

Я использую плагин Tablesorter, и он отлично работает. В настоящее время я выполняю прокрутку таблицы с помощью div-оболочки. Можно ли сделать прокрутку таблицы, сохраняя заголовки видимыми при прокрутке и не используя div?

Answer 1

Попробуйте этот CSS, регулируя высоту в соответствии с:

tbody{height: 4em; overflow: scroll}

Пример: http://jsbin.com/ofice

Answer 2

Как показано выше (или в этом примере ), для кроссбраузерности (и любого типа документа) теги tbody и thead должны содержать CSS display как блок. Если вам нужно показать полосу прокрутки ВНЕ tbody или вам нужно использовать нестандартные браузеры, вам нужно более сложное решение:

Для отображения полосы прокрутки снаружи или использования со старыми браузерами

Решение состоит в том, чтобы разделить таблицы thead и tbody на две отдельные таблицы, а затем использовать div для управления прокруткой (overflow-y) второй таблицы (содержимое tbody).

Компромиссы:

• нужно разделить на две таблицы (jQuery может сделать, создав вторую таблицу и скопировав thead);
• нужно выровнять оба, добавив widthes.

Похожие вопросы:

• Есть ли прямая цель для тела HTML?
• Strict DocType устанавливает минимальную высоту строки таблицы в FF / Chrome

---

Примеры * +1045 * разделенный стол (вручную): http://jsfiddle.net/krauss/B9NsU/1/ jQuery копирование thread в отдельную таблицу: http://jsfiddle.net/krauss/yLGg6/1/

Answer 3

Примечание: я отвечаю на этот старый пост, чтобы узнать о прогрессе плагина TableSorter jQuery.

Вы можете использовать форк этого плагина от @Mottie (http://mottie.github.io/tablesorter/docs/index.html)

Затем, когда DOM готов, запустите этот скрипт:

 $('table').tablesorter({
        widgets        : ['zebra', 'columns', 'stickyHeaders']
    });

Все, что вы должны включить, чтобы это работало:

1) jquery.tablesorter.js

2) jquery.tablesorter.widgets.js

3) любая из тем css, например: theme.blue.css

Виджет StickyHeaders поможет вам.