Как зафиксировать шапку у таблицы?

Question

[Петр Питерский]

Есть таблица

<div class="table">
<header>
<div>Название</div>
<div>Описание</div>
<div>Цена</div>
<div>Количество</div>
</header>
<main>
<div>
<div>Телевизор</div>
<div>Большой цветной телевизор</div>
<div>1000р</div>
<div>10 штук</div>
</div>
<main>
</div>

.table {
  border: 1px solid var(--grey-dc-color);
  border-radius: 0.5rem;
overflow-x: auto; /* Таблица имеет внутренний горизонтальный скрол !!! */
}

.table header {
box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 2;

}

Как сделать, чтобы при скроле страницы (вертикальный скрол) шапка фиксировалась, проблема в том, что сама таблица имеет горизонтальный скрол и соответственно position: sticky; не срабатывает у шапки, а хотелось бы.

Во время скрола таблицы (горизонтальный скрол) шапка и данные скролятся одновременно, чтобы можно было соотнести данные и колонку, но когда страницу прокручиваем вверх и шапка уходит за viewport, это неудобно. Как можно всё-таки шапку зафиксировать.

Нельзя менять структуру HTML таблицы, максимум обернуть таблицу во что-то, вариант, с установкой высоты таблицы не пойдёт, потому что нужен только внешний скрол у страницы, а не у таблицы!
Если вообще-то какое-то решение?

Пробовал разные варианты в том числе и на JS IntersectionObserver, но если у шапки ставить position absolute или fixed, тогда при горизонтальном скроле в таблице шапка уже не скролится, то есть должен остаться sticky по-видимому для корректной работы горизонтального скрола. Либо как-то синхронизировать скролы шапки и самой таблицы.

Пример

Comments

[szQocks]

Пробовал разные варианты в том числе и на JS IntersectionObserver, но если у шапки ставить position absolute или fixed

те надо что бы она изначально была вообще простом состоянии ( в котором она должна скролиться в блоке со скроллом горизонтальным, а при вертикальном скролле уже отслеживать её и добавлять к ней уже fixed

сверстай нормально и сделай демо ( или хотя бы сверстай для демо нормально ) , а не вот эти ошмётки которые в вопросе

[szQocks]

а лучше покажи макет сам, где гарантия что твоя структура верная ?

[Петр Питерский]

Делал через IntersectionObserver и добавлял к шапке fixed, да она сидит где надо, но проблема, что при скроле таблицы шапка уже не скролится(

[szQocks]

Петр Питерский, https://codepen.io/kapysta-xxl/pen/JjgXPeq так ? ну хз так и не так, я спать ушёл, тут даже походу и обсервер не нужен был

[Петр Питерский]

szQocks, ну как так, а где горизонтальный скрол и сама таблица должна быть ограниченно ширины

[szQocks]

Петр Питерский, есть скролл, и ширина у ней ограничена и равана ширине боди

тебе надо верстать вот именно как я дал - пример, по такому же принципу, если этот блок с таблицей находиться не в сомом верху, а на пример в какой-нибудь секции по середине, тогда эту секцию и все остальные секции которые идут ниже придётся обернуть в какой-нибудь див и дать ему релатив позишн

[Петр Питерский]

szQocks, Нельзя менять структуру HTML таблицы, максимум обернуть таблицу во что-то, вариант

[szQocks]

Петр Питерский, с чего нельзя менять структуру ? аргументируй

[Петр Питерский]

szQocks, задача такая, так как все таблицы сверстаны именно с такой структурой

[szQocks]

Петр Питерский, тогда без js не вариант, сделать как сделал DIVSIDE но ещё на js повесить событие на скролл и при скролле у этого хедера менять top стиль, и если он равен нижней границе блока, тогда ещё что-то делать, ну это бред полный, я явно даже пример это бреда писать не буду

[szQocks]

Петр Питерский, он сразу не может быть стики для двух блоков

[Петр Питерский]

Пример

Вот посмотрите, что требуется

Answer 1

[Ulugbekov]

Для решения вашей задачи с фиксированием шапки таблицы при вертикальном скролле, не меняя структуру HTML и сохраняя горизонтальный скролл, можно использовать комбинацию CSS и JavaScript. Вот подход, который может помочь:

1. CSS: Сначала установите необходимые стили для шапки таблицы, чтобы она была “липкой” (sticky):

.table-container {
    position: relative; /* Создаем контекст для абсолютного позиционирования шапки */
}

.table-header {
    position: sticky;
    top: 0; /* Фиксируем шапку к верху контейнера */
    background-color: white; /* Цвет фона для видимости */
    z-index: 10; /* Чтобы шапка была выше других элементов */
}

2. JavaScript: Затем, используйте JavaScript, чтобы добавить функциональность для синхронизации скролла шапки и самой таблицы. Можно использовать scroll событие для отслеживания вертикального скролла страницы и управления свойством transform шапки:

const tableContainer = document.querySelector('.table-container');
const tableHeader = document.querySelector('.table-header');

tableContainer.addEventListener('scroll', () => {
    // Прокручиваем шапку таблицы, чтобы она оставалась на уровне видимости
    const scrollTop = tableContainer.scrollTop;
    tableHeader.style.transform = `translateY(${scrollTop}px)`;
});

3. HTML: Оберните вашу таблицу в контейнер с классом .table-container, если этого еще не сделано:

<div class="table-container" style="overflow-x: auto; overflow-y: auto; max-height: 500px;">
    <table>
        <thead class="table-header">
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <!-- другие колонки -->
            </tr>
        </thead>
        <tbody>
            <!-- данные таблицы -->
        </tbody>
    </table>
</div>