Как сохранить липкий заголовок таблицы, обеспечивая горизонтальный свиток без разгрузки колонны? ⇐ Html

[Anonymous]

Я работаю над макетом таблицы, где мне нужны следующие две функции:
Держите заголовок таблицы (включая кнопки и панель поиска), прокручивая страницу (то есть свиток должен находиться на полной странице, а не внутри. Однако, когда я прокручиваю горизонтали, выравнивание столбца становится смещенным, что заставляет заголовок и колонны тела неправильно переключаться.
В настоящее время у меня есть две проблемы ниже. Во-вторых, горизонтальная прокрутка смазывает заголовок с столбцами тела таблицы.

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

.MainContainer {
width: 90%;
margin: 0 auto;
background: white;
border-radius: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
}

.StickyHeader {
position: sticky;
top: 0;
background: white;
z-index: 300;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.TableHeader {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #007bff;
color: white;
padding: 15px;
}

.TableOptions {
display: flex;
gap: 10px;
}

.TableOptions button {
padding: 8px 12px;
border: none;
background-color: white;
color: #007bff;
cursor: pointer;
border-radius: 5px;
font-size: 14px;
}

.TableOptions button:hover {
background-color: #0056b3;
color: white;
}

.SearchBar input {
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
width: 250px;
}

.StickyTableHead {
position: sticky;
top: 55px;
background: white;
z-index: 250;
}

.StickyTableHead table {
width: 100%;
border-collapse: collapse;
}

.StickyTableHead th {
background-color: #007bff;
color: white;
padding: 10px;
text-align: left;
border: 1px solid #ddd;
white-space: nowrap;
}

.TableWrapper {
width: 100%;
overflow-x: auto;
max-height: 70vh;
}

.TableWrapper table {
width: 150%;
border-collapse: collapse;
min-width: 1200px;
}

.TableWrapper td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
white-space: nowrap;
}< /code>





Table Demo







Add
Edit
Delete









ID
Name
Email
Phone
Address
Role
Status
Created At
Updated At
Extra Column 1
Extra Column 2
Extra Column 3









const tableBody = document.querySelector(".TableWrapper tbody");
const statuses = ["Active", "Inactive", "Pending", "Banned"];
const roles = ["Admin", "User", "Manager", "Editor", "Subscriber", "Author"];

for (let i = 1; i 

Подробнее здесь: [url]https://stackoverflow.com/questions/79476381/how-to-keep-table-header-sticky-while-enabling-horizontal-scroll-without-column[/url]