Merge pull request #195 from oceanbase/dengfuping-dev

fix(design): zebra stripe style should be correct for scroll table
oceanbase · Oct 19, 2023 · 37858ef · 37858ef
2 parents bc20fcb + 3357711
commit 37858ef
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/packages/design/src/table/demo/fixed-columns-header-tables.tsx b/packages/design/src/table/demo/fixed-columns-header-tables.tsx
@@ -46,7 +46,7 @@ const App: React.FC = () => {
   const columns: ColumnProps<DataType>[] = [
     {
       title: 'Full Name',
-      width: 100,
+      width: 120,
       dataIndex: 'name',
       key: 'name',
       fixed: 'left',
@@ -76,7 +76,7 @@ const App: React.FC = () => {
     },
   ];
 
-  return <Table columns={columns} dataSource={dataSource} scroll={{ x: 1440, y: 200 }} />;
+  return <Table columns={columns} dataSource={dataSource} scroll={{ x: 1440 }} />;
 };
 
 export default App;
diff --git a/packages/design/src/table/style/index.ts b/packages/design/src/table/style/index.ts
@@ -107,6 +107,25 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
       },
     },
 
+    // 滚动表格样式
+    // 由于滚动表格会在 tbody 下最前面多一个 tr 元素，因此需要设置相反的斑马条样式
+    // .ant-table-scroll-horizontal: 水平滚动
+    // .ant-table-fixed-header: 垂直滚动
+    [`${componentCls}-wrapper ${componentCls}${componentCls}-scroll-horizontal, ${componentCls}-wrapper ${componentCls}${componentCls}-fixed-header`]:
+      {
+        [`${componentCls}-tbody`]: {
+          // 斑马纹样式
+          [`tr:nth-child(2n + 1):not(${componentCls}-placeholder):not(${componentCls}-row-selected):not(${antCls}-descriptions-row) > td`]:
+            {
+              backgroundColor: colorFillQuaternary,
+            },
+          [`tr:nth-child(2n):not(${componentCls}-placeholder):not(${componentCls}-row-selected):not(${componentCls}-expanded-row):not(${antCls}-descriptions-row) > td`]:
+            {
+              backgroundColor: colorBgBase,
+            },
+        },
+      },
+
     // large 表格样式
     [`${componentCls}-wrapper`]: {
       [`${componentCls}:not(${componentCls}-middle):not(${componentCls}-small)`]: {