Забавное поведение с прокручиваемой таблицей ⇐ CSS

[Anonymous]

==== Окончательное редактирование ====
У меня страница работает настолько хорошо, насколько это возможно. Ни один из ответов здесь не был окончательным. Я просто работал над этим, пока это не сработало. Благодарю всех, кто пытался помочь, поскольку сами усилия достойны признания.
Текст ниже изменен, чтобы показать мое решение проблемы.
================
По моему опыту я обнаружил, что один размер подходит всем, когда дело касается таблиц прокрутки CSS. Каждый раз, когда я реализую их, мне приходится создавать новый способ сделать это, потому что предыдущие способы не работали. Так обстоит дело и на этот раз.
Вот CSS, который работает:

Код: Выделить всё

table {             border:                 none;
border-spacing:         0;
border-collapse:        separate;
table-layout:           fixed;
}

/* freeze panes */
/* rows 1-3 */
thead {             position:               sticky;
top:                    0;
min-height:             35pt;
height:                 35pt;
z-index:                50;
background-color:       White;
}

/* columns */
/* col 1 */
.posfixleft {       position:               sticky;
top:                    0;
left:                   0;
height:                 12pt;
width:                  35pt;
z-index:                20;
background-color:       White;
}

Вот изменения в HTML:

Код: Выделить всё

level
hbox5
yasc hbox





1

Здесь много столбцов и много строк, поэтому я показываю только код, соответствующий CSS. Я загрузил страницу на свой веб-сайт, чтобы вы могли увидеть, что она содержит, и просмотреть исходный код полностью: https://wayneca.neocities.org/Sokoban/hbox-yasc.html

Подробнее здесь: https://stackoverflow.com/questions/793 ... ling-table