Невозможно одновременно получить липкую строку и столбец из-за переполнения-x ⇐ CSS

[Anonymous]

У меня есть таблица, которая должна прокручиваться как по вертикали, так и по горизонтали, но с двумя поворотами. Верхний/нижний колонтитул должен быть закреплен сверху/снизу, а левый набор столбцов должен быть зафиксирован с левого края.
Я использовал display:sticky, который работал как ожидалось, пока я не активировал overflow-x:scroll в правой части таблицы. Судя по всему, эти два стиля сталкиваются и приводят к нежелательному результату. Проблема решена путем переноса внутренней разметки в раздел, который можно прокручивать по вертикали. К сожалению, это исключает возможность горизонтальной прокрутки, ограниченной нужным набором столбцов. Теперь вся таблица прокручивается горизонтально (включая левые столбцы, которые должны быть зафиксированы).
Вот скрипт, иллюстрирующий «к сожалению» решенную проблему.
Как мне лучше всего подойти к этому?
Чтобы решить последнюю, неприятную часть, коллега предлагает поместить копию левых столбцов поверх мою таблицу и позвольте всему исходному содержимому прокручиваться горизонтально за ней, создавая иллюзию закрепленного содержимого.
Однако при этом возникает проблема верхнего/нижнего колонтитула наложения. не залипает при вертикальной прокрутке, и мы возвращаемся к квадрату 0. В скрипте это можно отобразить, изменив стиль отображения на flex вместо none, а компонент имеет идентификатор исправил.

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

#fixy {
display: none;
border-color: fuchsia;
position: sticky;
left: 0;
top: 0;
overflow: hidden;
z-index: 10;
}

#fixy .cell {
background-color: teal;
color: white;
font-weight: bold;
}

редактировать
Изображение желаемого идеального состояния. Стрелка влево указывает на курсор текущей горизонтальной прокрутки. Стрелка вправо указывает на желаемую ширину/расположение вся прокрутки.
[img]https:// i.sstatic.net/nSmYMQuP.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/786 ... overflow-x