Wie kann man den Tischkopf klebrig halten und dabei eine horizontale Schriftrolle ohne Fehlausrichtung der Säule aktivie ⇐ HTML

[Anonymous]

Ich arbeite an einem Tabellenlayout, in dem ich die folgenden zwei Funktionen benötige:
Halten Sie den Tischkopf (einschließlich Schaltflächen und Suchleiste) klebrig, während Sie die Seite nach unten scrollen (d. H. Der Schriftrolle sollte auf der vollen Seite sein, nicht im. Maincontainer ). Wenn ich jedoch horizontal scrolle, wird die Spaltenausrichtung falsch ausgerichtet, wodurch die Header- und Körperspalten falsch verschoben werden. Zweitens fehlgerichtet die horizontale Schriftrolle den Header mit den Tischkörperspalten.

Code: Select all

.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