From 46de1f938baa810ec8e4a17d213bcfeede7d9507 Mon Sep 17 00:00:00 2001 From: gerasidev <141961075+gerasidev@users.noreply.github.com> Date: Mon, 6 Jul 2026 18:24:23 +0300 Subject: [PATCH 1/2] fix: prevent sticky pinned column overlap --- examples/react/column-pinning-sticky/src/index.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/examples/react/column-pinning-sticky/src/index.css b/examples/react/column-pinning-sticky/src/index.css index 5d1f3392a1..dc0c562e94 100644 --- a/examples/react/column-pinning-sticky/src/index.css +++ b/examples/react/column-pinning-sticky/src/index.css @@ -17,13 +17,16 @@ table { /* box-shadow and borders will not work with position: sticky otherwise */ border-collapse: collapse; border-spacing: 0; + table-layout: fixed; } th { background-color: lightgray; border-bottom: 1px solid lightgray; + box-sizing: border-box; font-weight: bold; height: 30px; + overflow: hidden; padding: 2px 4px; position: relative; text-align: center; @@ -31,6 +34,8 @@ th { td { background-color: white; + box-sizing: border-box; + overflow: hidden; padding: 2px 4px; } @@ -187,6 +192,8 @@ td { } .nowrap { + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } From 16973316bc20fd161ae5fb2b8c023a657526cc5e Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Mon, 6 Jul 2026 16:49:23 -0500 Subject: [PATCH 2/2] do for other framework examples too --- examples/angular/column-pinning-sticky/src/styles.css | 7 +++++++ examples/lit/column-pinning-sticky/src/main.ts | 7 +++++++ examples/preact/column-pinning-sticky/src/index.css | 7 +++++++ examples/solid/column-pinning-sticky/src/index.css | 7 +++++++ examples/svelte/column-pinning-sticky/src/index.css | 7 +++++++ examples/vue/column-pinning-sticky/src/index.css | 7 +++++++ 6 files changed, 42 insertions(+) diff --git a/examples/angular/column-pinning-sticky/src/styles.css b/examples/angular/column-pinning-sticky/src/styles.css index 5d1f3392a1..dc0c562e94 100644 --- a/examples/angular/column-pinning-sticky/src/styles.css +++ b/examples/angular/column-pinning-sticky/src/styles.css @@ -17,13 +17,16 @@ table { /* box-shadow and borders will not work with position: sticky otherwise */ border-collapse: collapse; border-spacing: 0; + table-layout: fixed; } th { background-color: lightgray; border-bottom: 1px solid lightgray; + box-sizing: border-box; font-weight: bold; height: 30px; + overflow: hidden; padding: 2px 4px; position: relative; text-align: center; @@ -31,6 +34,8 @@ th { td { background-color: white; + box-sizing: border-box; + overflow: hidden; padding: 2px 4px; } @@ -187,6 +192,8 @@ td { } .nowrap { + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } diff --git a/examples/lit/column-pinning-sticky/src/main.ts b/examples/lit/column-pinning-sticky/src/main.ts index dcca15a78b..efe0a35c24 100644 --- a/examples/lit/column-pinning-sticky/src/main.ts +++ b/examples/lit/column-pinning-sticky/src/main.ts @@ -349,13 +349,16 @@ class LitTableExample extends LitElement { } table { + table-layout: fixed; } th { background-color: lightgray; border-bottom: 1px solid lightgray; + box-sizing: border-box; font-weight: bold; height: 30px; + overflow: hidden; padding: 2px 4px; position: relative; text-align: center; @@ -363,6 +366,8 @@ class LitTableExample extends LitElement { td { background-color: white; + box-sizing: border-box; + overflow: hidden; padding: 2px 4px; } @@ -493,6 +498,8 @@ class LitTableExample extends LitElement { border-color: #000; } .nowrap { + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } .demo-note { diff --git a/examples/preact/column-pinning-sticky/src/index.css b/examples/preact/column-pinning-sticky/src/index.css index 5d1f3392a1..dc0c562e94 100644 --- a/examples/preact/column-pinning-sticky/src/index.css +++ b/examples/preact/column-pinning-sticky/src/index.css @@ -17,13 +17,16 @@ table { /* box-shadow and borders will not work with position: sticky otherwise */ border-collapse: collapse; border-spacing: 0; + table-layout: fixed; } th { background-color: lightgray; border-bottom: 1px solid lightgray; + box-sizing: border-box; font-weight: bold; height: 30px; + overflow: hidden; padding: 2px 4px; position: relative; text-align: center; @@ -31,6 +34,8 @@ th { td { background-color: white; + box-sizing: border-box; + overflow: hidden; padding: 2px 4px; } @@ -187,6 +192,8 @@ td { } .nowrap { + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } diff --git a/examples/solid/column-pinning-sticky/src/index.css b/examples/solid/column-pinning-sticky/src/index.css index cf254482e6..0989fddd21 100644 --- a/examples/solid/column-pinning-sticky/src/index.css +++ b/examples/solid/column-pinning-sticky/src/index.css @@ -16,13 +16,16 @@ html { table { border-collapse: collapse; border-spacing: 0; + table-layout: fixed; } th { background-color: lightgray; border-bottom: 1px solid lightgray; + box-sizing: border-box; font-weight: bold; height: 30px; + overflow: hidden; padding: 2px 4px; position: relative; text-align: center; @@ -30,6 +33,8 @@ th { td { background-color: white; + box-sizing: border-box; + overflow: hidden; padding: 2px 4px; } @@ -186,6 +191,8 @@ td { } .nowrap { + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } diff --git a/examples/svelte/column-pinning-sticky/src/index.css b/examples/svelte/column-pinning-sticky/src/index.css index cf254482e6..0989fddd21 100644 --- a/examples/svelte/column-pinning-sticky/src/index.css +++ b/examples/svelte/column-pinning-sticky/src/index.css @@ -16,13 +16,16 @@ html { table { border-collapse: collapse; border-spacing: 0; + table-layout: fixed; } th { background-color: lightgray; border-bottom: 1px solid lightgray; + box-sizing: border-box; font-weight: bold; height: 30px; + overflow: hidden; padding: 2px 4px; position: relative; text-align: center; @@ -30,6 +33,8 @@ th { td { background-color: white; + box-sizing: border-box; + overflow: hidden; padding: 2px 4px; } @@ -186,6 +191,8 @@ td { } .nowrap { + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } diff --git a/examples/vue/column-pinning-sticky/src/index.css b/examples/vue/column-pinning-sticky/src/index.css index cf254482e6..0989fddd21 100644 --- a/examples/vue/column-pinning-sticky/src/index.css +++ b/examples/vue/column-pinning-sticky/src/index.css @@ -16,13 +16,16 @@ html { table { border-collapse: collapse; border-spacing: 0; + table-layout: fixed; } th { background-color: lightgray; border-bottom: 1px solid lightgray; + box-sizing: border-box; font-weight: bold; height: 30px; + overflow: hidden; padding: 2px 4px; position: relative; text-align: center; @@ -30,6 +33,8 @@ th { td { background-color: white; + box-sizing: border-box; + overflow: hidden; padding: 2px 4px; } @@ -186,6 +191,8 @@ td { } .nowrap { + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; }