Забавное поведение с прокручиваемой таблицей ⇐ 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
====EDIT====
Я добился небольшого прогресса. Я оставил исходную страницу на своем сайте и загрузил новую версию №2: https://wayneca.neocities.org/Sokoban/hbox-yasc2.html
Хотя в этой версии есть полосы прокрутки на столе он также по-прежнему прикрепляет полосы прокрутки к области просмотра. Вы также заметите, что расположение ячеек в таблице теперь неправильное. Я понятия не имею, что делать, чтобы все это исправить. Ниже приведен измененный CSS.
table { border: none;
border-spacing: 0;
border-collapse: separate;
width: 99vw;
height: 100vh;
table-layout: fixed;
}

/* freeze panes */
/* rows */
thead { display: table;
position: sticky;
top: 0;
min-height: 35pt;
height: 35pt;
width: 99vw;
z-index: 50;
background-color: White;
}
tbody { display: block;
height: 37em;
width: 99vw;
overflow: scroll;
}


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