CSS липкий не работает при горизонтальной прокрутке ⇐ CSS

[Anonymous]

У меня есть HTML-форма, которая включает в себя широкую таблицу и ожидаемые поля меток/ввода. Требование состоит в том, чтобы окно/фрейм имел возможность прокручиваться по горизонтали, прокручивая таблицу, как ожидалось, но оставляя поля на месте во время этой прокрутки.
Попытка поместить таблицу в элемент div который может прокручиваться по горизонтали, недостаточно хорош, так как это приводит к необходимости прокручивать таблицу вниз до нижней части таблицы, чтобы найти полосу прокрутки - следовательно, полоса прокрутки h должна располагаться по всему кадру.
Я попробовал следующий код — он близок, но когда (1) я бы предпочел, чтобы красные div были 100vw вместо 50vw и (2) кажется, что это работает только тогда, когда экран шире... более тонкие экраны, похоже, какое-то время сохраняют входные данные липкими - а затем они прокручиваются

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

.form-container > div {
position:sticky;
left:10px;
color:red;
border:solid 1px red;
width:50vw;
}

Демо — также на JSFiddle

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

function createRowCopies(tr, num) {
if (!tr || num 

Подробнее здесь: [url]https://stackoverflow.com/questions/79252135/css-sticky-not-working-on-horizontal-scrolls[/url]