diff --git a/Client/Components/widgets/Treetable_V2.ts b/Client/Components/widgets/Treetable_V2.ts index 523662d..ed05b84 100644 --- a/Client/Components/widgets/Treetable_V2.ts +++ b/Client/Components/widgets/Treetable_V2.ts @@ -107,8 +107,14 @@ export const Treetable: m.ClosureComponent = (vnode) => { : null, m("div", {style: {height: '100%'}}, // Ohne Topbar nutzt der scrollbare Bereich die volle Höhe. - m("div", {style: {height: hatTopbar ? 'calc(100% - 32px' : '100%', overflow: 'auto', width: '100%'}}, - m("table.w3-table", {style: {'overflow-y': 'auto'}}, + // Wichtig für den Sticky-Header: Dieser div muss selbst der + // Scroll-Container sein (feste Höhe + overflow), damit sich + // position:sticky der th-Zellen auf ihn bezieht. + m("div", {style: {height: hatTopbar ? 'calc(100% - 32px)' : '100%', overflow: 'auto', width: '100%'}}, + // overflow darf hier NICHT auf dem table-Element gesetzt + // werden — sonst wird die Tabelle selbst zum Scroll-Container + // und der Sticky-Header bricht. + m("table.w3-table", // Optionale Spaltenüberschriften: Ein Titel je // columnmapper-Spalte, 1:1 von links nach rechts // (die Einrückung teilt sich das td mit der @@ -118,7 +124,11 @@ export const Treetable: m.ClosureComponent = (vnode) => { ? m("thead", m("tr.w3-theme", vnode.attrs.header.map((titel: string) => - m("th", { + m("th.w3-theme", { + // Sticky-Header: Eigener Hintergrund + // nötig, da der tr-Hintergrund beim + // Scrollen mit den Daten wegwandert + // und sonst Zeilen durchscheinen. style: { position: 'sticky', top: '0',