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>