Проблема с макетом, вертикальной прокруткой элемента body и таблицей с горизонтальной прокруткой и прикрепленными заголо ⇐ CSS

[Anonymous]

У меня есть overflow-y auto для тела и содержимого, содержащего таблицу.
есть элемент div, содержащий таблицу, и он имеет overflow-x auto для горизонтальной прокрутки в представлении таблицы.
the Таблица имеет заголовок с фиксированной позицией и верхним значением 0.
Мои текущие проблемы:

• Если я добавлю auto overflow-x в контейнер таблицы div тогда липкое позиционирование головы не работает (оно не будет прикрепляйтесь к верхней части стола при прокрутке по оси Y).
• Если я изменю заголовок на фиксированное положение, он будет работать, но создаст другую проблему: он испортит ширину контейнера заголовка, поскольку фиксированное положение основано для порта просмотра экрана, а не относительно родительского.

Можно ли иметь элемент с фиксированной позицией и разрешить одному из контейнеров иметь переполнение-x auto ?
структура следующая:







.main-container {
height: 100%;
width: 100%;
display: inline-grid;
}

.table-container {
overflow-x: auto; //this will mess thead sticky positioning.
also tried, overflow-x: clip; - but it doesn't work..
height: 100%;
width: 100%;
}

table {
border-collapse: separate;
width: 100%;
table-layout: auto;
position: relative;
}

thead {
top: 194px;
position: sticky; //If i change to position fixed it will work but will create another issue where thead is not relative to parent and will overflow it's width.
}


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