design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(styles): enhance table scrollbar behavior for sticky and non-sticky headers

Browse Source
This commit is contained in:
Jürgen Kunz
2025-09-16 16:20:35 +00:00
parent bbc7dfe29a
commit 09e299bc2e
1 changed files with 14 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
ts_web/elements/dees-table/styles.ts
View File

@@ -121,6 +121,20 @@ export const tableStyles: CSSResult[] = [
overflow-x: auto; overflow-x: auto;
/* prevent vertical scroll inside the table container */ /* prevent vertical scroll inside the table container */
overflow-y: hidden; overflow-y: hidden;
/* avoid reserving extra space for classic scrollbars where possible */
scrollbar-gutter: stable both-edges;
}
/* Hide horizontal scrollbar entirely when not using sticky header */
:host(:not([sticky-header])) .tableScroll {
-ms-overflow-style: none; /* IE/Edge */
scrollbar-width: none; /* Firefox (hides both axes) */
}
:host(:not([sticky-header])) .tableScroll::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
/* In sticky-header mode, hide only the horizontal scrollbar in WebKit/Blink */
:host([sticky-header]) .tableScroll::-webkit-scrollbar:horizontal {
height: 0px;
} }
:host([sticky-header]) .tableScroll { :host([sticky-header]) .tableScroll {
max-height: var(--table-max-height, 360px); max-height: var(--table-max-height, 360px);