Сохранение определенной строки или столбца в таблице HTML исправлено

Question

У меня огромное количество данных, заполняющих HTML <table>, содержащее более 200 строк и 200 столбцов.

Однако, когда я прокручиваю страницу по горизонтали или вертикали для просмотра данных, столбцы заголовка (например, th) выходят за пределы страницы.

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

Answer 1

Вот хорошее решение: http://www.imaputz.com/cssStuff/bigFourVersion.html

Хотя реализация решений JavaScript / jQuery открывает гораздо больше дверей.

См. Этот пост для получения дополнительной информации: HTML-таблица с фиксированными заголовками?

Answer 2

Вы можете использовать jQuery или попытаться смешать решение ниже:

заголовок: http://fixed -header-using-jquery.blogspot.com / 2009/05 / таблица прокрутки с фиксированными заголовками and.html

заголовок и первый столбец тоже, но все еще в бета-версии: http://fixedheadertable.mmalek.com

Только первый исправленный столбец: http://www.java2s.com/Code/HTMLCSS/Table-Style/Fixedtablefirstcolumn.htm

Answer 3

Используйте простые решения, когда они существуют. :)
Вы можете использовать tbody и задать ему либо фиксированную высоту, либо максимальную высоту и переполнение: auto;:

CSS:

tbody {
  max-height: 500px;
  max-width: 100%;
  overflow: auto;
}

А HTML вот так:

<table>
<thead>
<tr><th>headers</th></tr>
</thead>
<tbody>
<tr><td>body</td></tr>
</tbody>
<tfoot>
<tr><td>footers</td></tr>
</tfoot>
</table>