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

[Anonymous]

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

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

table {             border:                 none;
border-spacing:         0;
border-collapse:        separate;
width:                  100%;
/*height:                   36em;*/
table-layout:           fixed;
}
/* freeze panes */
/* rows */
thead {             /*display:              table;*/
position:               sticky;
top:                    0;
min-height:             35pt;
height:                 35pt;
width:                  100%;
z-index:                50;
background-color:       White;
}
/*tbody {               display:                block;
height:                 36em;
width:                  100%;
overflow:               scroll;
}*/
/*tbody tr {            display:                table;
table-layout            fixed;
}*/
/* columns */
/* rows 1-3, COL 1 */
.posfixleft1 {      position:               sticky;
top:                    0;
left:                   0;
height:                 35pt;
width:                  35pt;
z-index:                50;
background-color:       White;
}
/* rows 4-n, COL 1 */
.posfixleft2 {      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