Как сделать прокурутку в таблице

[Ирокез]

Есть таблица с десятками широких столбцов и сотнями строк. Она не влезает в экран ни по ширине, ни по высоте. Нужна прокрутка. Причём, при вертикальной прокрутке должна оставаться видимой верхняя строка, при горизонтальной - левый столбец. Как это сделать? Файл с таблицей генерится программой на с++, так что об удобстве кодирования можно не беспокоиться, надо только чтоб страница в мозиле огнелисе выглядела и вела себя как надо. И выкладывать таблицу на сайт не нужно, это просто лог тестового приложения для теста самописной библиотеки. Но как есть очень не удобно ориентироваться в этой таблице.Таблица заполнена в основном шестнадцатиразрядными шестнадцатеричными числами, в одном столбце мномемонические коды установленных флагов и двухзначные шестнадцатеричные числа, в первой строке имена величин, в левом столбце мнемонические обозначения на тему "после чего так стало". Потеряться, не видя ни левого столбца, ни верхней строки, и не понять, к чему конкретно относится каждое число раз плюнуть. Ну если виден 58-й столбец, то ещё можно сориентироваться, какие именно величины имеют такие то значения. Но после чего они их получили не понятно всё равно.

Edited March 27, 2018 by Ирокез

[klierik]

  On 3/27/2018 at 9:06 AM, Ирокез said:

Есть таблица с десятками широких столбцов и сотнями строк. Она не влезает в экран ни по ширине, ни по высоте.

Expand  

  On 3/27/2018 at 9:06 AM, Ирокез said:

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

Expand  

Вот тут что-то совсем не понятно что надо а что нет.

Если надо использовать существующую таблицу как есть то в качестве примера горизонтального скролла предложу этот вариант: 

Для вертикального скролла все сложнее, так как тут потребуеться JS, который будет задавать высоту для <div>.

А что касается всегда показывать заголовки с верху страницы то нужно что-то подобное:

Или типа такого — http://charliepark.org/css-only-sticky-headers/

[Ирокез]

Ну что не понятного то? Не надо:

1. Выкладывать файл с таблицей в сеть.

2. Беспокоиться об удобстве кодирования html-кода.

Надо:

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

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

Экзел есть? Загрузите его, выделите ячейку A2 и закрепите области. Как таблица будет прокручиваться полосами прокрутки экзела? Вот такую же прокрутку и надо сделать. Только в мозиле огнелисе с загруженным локальным html-файлом. Сам файл генерится самописной программой.

[Ирокез]

  On 3/27/2018 at 9:50 AM, klierik said:

Если надо использовать существующую таблицу как есть то в качестве примера горизонтального скролла предложу этот вариант: 

Expand  

Ну так то и я умею. Но так при прокрутке в право левый столбец уходит за экран и становится невидим. А надо сделать, чтоб он всегда оставался на экране. И извращаться с "существующей таблицей" не надо. Надо сделать полностью новую.

 

  On 3/27/2018 at 9:50 AM, klierik said:

Для вертикального скролла все сложнее, так как тут потребуеться JS, который будет задавать высоту для <div>.

Expand  

Чего чего сделать? Потребуеться? А это вообще как? Пишите по-русски.

 

  On 3/27/2018 at 9:50 AM, klierik said:

А что касается всегда показывать заголовки с верху страницы то нужно что-то подобное:

Expand  

А ничего, что как раз в этом варианте заголовочная строка при прокрутке вниз уходит за экран и становится не видимой?

 

  On 3/27/2018 at 9:50 AM, klierik said:

который будет задавать высоту для <div>.

Expand  

Высоту можно подобрать вручную. Прокрутить надо файл, созданный для собственного употребления на конкретной машине с конкретным дисплеем. И откуда вообще взялся div?

[mrnobody]

Ну на —  https://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/

[Ирокез]

  On 3/27/2018 at 1:27 PM, mrnobody said:

Ну на —  https://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/

Expand  

И где там вертикальная прокрутка то? А горизонтальная обычная, так я и сам умею.

Edited March 27, 2018 by Ирокез

[klierik]

Для реализации варианта с вертикальным скроллом, требуется поместить таблицу в <div> и задать ему фиксированное значение высоты, на пример:

https://jsfiddle.net/klierik/gnf8f2u8/4/