u

code/g3soft-libs/docs/.vitepress/theme/custom.css

@@ -694,3 +694,80 @@
 .vitepress-demo-plugin__container > .vitepress-demo-plugin-preview {
   overflow-x: auto;
 }
+
+/* --------------------------------------------------------------------------
+   ⚠ 必须还原 <table> 自身：`.vp-doc table { display:block; overflow-x:auto;
+   margin:20px 0; border-collapse:collapse }`
+   --------------------------------------------------------------------------
+   这一整条是 VitePress 给 markdown 表格做「宽表横向滚动 + 上下留白」用的，
+   但它命中了 G3Table 内部的 `<table class="stk-table-main">`，四个属性逐个都有害：
+
+     display:block + overflow-x:auto
+       → table 自身成为**滚动容器**
+       → th { position: sticky; top: 0 } 的定位基准变成这张 15 万 px 高、
+         永不滚动的 table，而不是真正在滚的 .stk-table
+       → 纵向滚动时**表头跟着一起滚走**
+     margin:20px 0
+       → 表格在容器内整体下移 20px，表头起始位置就偏了 20px
+     border-collapse:collapse
+       → 库要求 separate（它用 border-spacing:0 + 逐格 background-image 画线），
+         collapse 会改变边框模型
+
+   实测对比（同一组件、同一库版本、同样 5000 行虚拟滚动）：
+     playground（无 .vp-doc）：滚动 600px 后表头位移 delta=0     ← 正常
+     文档站（有 .vp-doc）    ：delta=-600，且 table 计算值 overflow:auto
+
+   还原成 table 的默认呈现，让 sticky 的作用域回到 .stk-table 这一层。
+   ⚠ 不要用 `all: revert` 之类的粗暴重置：那会连带清掉库需要的
+     border-spacing / border-collapse:separate（库显式依赖二者）。 */
+.vp-doc .vitepress-demo-plugin-preview table {
+  display: table;
+  overflow: visible;
+  margin: 0;
+  border-collapse: separate;
+}
+
+/* ==========================================================================
+   组件 Demo：隔断 VitePress 的正文排版样式
+   --------------------------------------------------------------------------
+   `.vp-doc` 是 VitePress 给正文（markdown 渲染结果）套的排版容器，它带一条
+   `.vp-doc th, .vp-doc td { border: 1px solid var(--vp-c-divider) }` —— 给
+   markdown 表格画的**四边**框线。而 demo 预览区（.vitepress-demo-plugin-preview）
+   也在 .vp-doc 里面，于是 G3Table 的每个单元格都被额外套上四边框：
+
+     实测（/ui/data/table，docs 站）：
+       单元格计算值 borderTop/Bottom/Left/Right 全是 1px
+       逐像素量内部横线 2px、竖线 2–3px   ← 用户看到的「内部边框很厚」
+     同一组件在 playground（无 .vp-doc）量到的是干净 1px。
+
+   也就是说「很厚」= VitePress 的四边框 + 组件自己的行分隔线叠出来的，
+   组件本身没问题。修在文档站这一层，别去动组件样式。
+
+   注意选择器写在 .vp-doc **之内**限定 demo 预览区，不要写全局
+   `.g3-table th` —— 那会把组件库样式泄漏到宿主页，反过来污染文档站正文里的
+   普通 markdown 表格。
+   ========================================================================== */
+.vp-doc .vitepress-demo-plugin-preview table th,
+.vp-doc .vitepress-demo-plugin-preview table td {
+  border: 0;
+  padding: 0;
+}
+
+/* 内边距交回组件自己：上面 padding:0 是为了清掉 .vp-doc 给 markdown 单元格
+   设的 padding，但我们的组件用的是 --cell-padding-x，被清掉后文字会贴边，
+   所以这里还原回库的变量。
+
+   ⚠ 这里**不要**再写 border-bottom：组件已改为把边框完全交给库
+   （传 bordered: true），库的 .stk-table.bordered th,td 会用
+   --bg-border-bottom 渐变自己画底部线。
+   早先组件用 bordered-v（库不画底部线）时这里补过一条 border-bottom，
+   现在两者会在同一像素位置叠成 2px —— 正是「内部边框很厚」的来源。 */
+.vp-doc .vitepress-demo-plugin-preview .g3-table__inner.stk-table th,
+.vp-doc .vitepress-demo-plugin-preview .g3-table__inner.stk-table td {
+  padding: var(--cell-padding-y) var(--cell-padding-x);
+}
+
+/* 展示态/编辑器内容自己带内边距，别被再套一层 */
+.vp-doc .vitepress-demo-plugin-preview .g3-table__inner.stk-table td:has(> .g3-table__cell-editor-root) {
+  padding: 3px;
+}