fix(style): 修复横向滚动,竖向滚动的样式 bug

Author: chenJJ-88

packages/docs/demos/native/BasicDemo.tsx

@@ -21,7 +21,7 @@ const columns: EditableColumn<User>[] = [
         title: '姓名',
         dataIndex: 'name',
         width: 140,
-        fixed: 'left',
+        // fixed: 'left',
         rules: [{ required: true, message: '姓名不能为空' }],
         editRender: ({ value, onChange }) => (
             <input className="et-editor-input" value={value} onChange={(e) => onChange(e.target.value)} />

packages/docs/demos/native/LargeScrollDemo.tsx

@@ -155,6 +155,7 @@ export default function LargeScrollDemo() {
                 500 行 × 10 列，虚拟滚动 + 横向滚动，姓名列左侧固定，操作列右侧固定
             </p>
             <EditableTable<Row>
+                bordered
                 rowKey="id"
                 dataSource={dataSource}
                 onChange={setDataSource}

packages/docs/native/performance.md

@@ -20,7 +20,7 @@ EditableTable 基于 `@tanstack/react-virtual` 实现虚拟滚动，只渲染可
 ### 500 行 × 10 列 + 横向滚动
 
 <ClientOnly>
-  <ReactDemo :component="LargeScrollDemo" :source="LargeScrollDemoSource" title="10 列横向滚动" description="500 行 × 10 列，虚拟滚动 + 横向滚动，左右列固定" />
+  <ReactDemo :component="LargeScrollDemo" :source="LargeScrollDemoSource" title="10 列横向滚动"  />
 </ClientOnly>
 
 ## 启用虚拟滚动

packages/editable-table/src/components/EditableTable/EditableTable.css

@@ -48,15 +48,6 @@
     width: 100%;
 }
 
-/* 有竖向滚动条时，表头保留等宽的不可见滚动条，使内容区宽度与表体一致 */
-.et-scroll-x-vscroll {
-    overflow-y: scroll;
-    scrollbar-color: transparent transparent;
-}
-.et-scroll-x-vscroll::-webkit-scrollbar {
-    background: transparent;
-}
-
 /* ===== 表格内容区：列少时撑满容器，列多时允许溢出 ===== */
 .et-inner {
     width: fit-content;
@@ -93,13 +84,12 @@
 }
 
 .et-body::-webkit-scrollbar {
-    width: 6px;
+    width: 0;
     height: 4px;
 }
 
-.et-body::-webkit-scrollbar-thumb {
-    background: #c1c1c1;
-    border-radius: 3px;
+.et-body {
+    scrollbar-width: none;
 }
 
 .et-row {
@@ -327,15 +317,6 @@
     background: var(--et-row-hover-bg);
 }
 
-/* 固定列右侧/左侧阴影 */
-.et-fixed-left {
-    border-right: 1px solid var(--et-border-color);
-}
-
-.et-fixed-right {
-    border-left: 1px solid var(--et-border-color);
-}
-
 /* ===== Bordered 模式 ===== */
 .et-bordered .et-header-cell,
 .et-bordered .et-cell {

packages/editable-table/src/components/EditableTable/index.tsx

@@ -367,7 +367,10 @@ function EditableTable<T extends object = Record<string, unknown>>(
             <div
                 className={`et-table${bordered ? ' et-bordered' : ''}${scrollShadow.left ? ' et-scroll-left' : ''}${scrollShadow.right ? ' et-scroll-right' : ''}`}
             >
-                <div ref={headerScrollRef} className={`et-scroll-x${scrollY != null ? ' et-scroll-x-vscroll' : ''}`}>
+                <div
+                    ref={headerScrollRef}
+                    className="et-scroll-x"
+                >
                     <div className="et-inner">
                         <div className="et-header" style={{ display: 'grid', gridTemplateColumns: gridTemplate }}>
                             {columns.map((col, colIndex) => {
@@ -438,6 +441,7 @@ function EditableTable<T extends object = Record<string, unknown>>(
                                                 minWidth: '100%',
                                                 transform: `translateY(${virtualRow.start}px)`,
                                                 height: `${virtualRow.size}px`,
+                                                borderBottom: 'none',
                                             }}
                                         >
                                             {columns.map((col, colIndex) => {