diff --git a/packages/design/src/table/demo/fixed-columns-header-tables.tsx b/packages/design/src/table/demo/fixed-columns-header-tables.tsx index ea2b1232c..6ba0d3e74 100644 --- 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[] = [ { title: 'Full Name', - width: 100, + width: 120, dataIndex: 'name', key: 'name', fixed: 'left', @@ -76,7 +76,7 @@ const App: React.FC = () => { }, ]; - return ; + return
; }; export default App; diff --git a/packages/design/src/table/style/index.ts b/packages/design/src/table/style/index.ts index 9a8d16013..f2394e2b4 100644 --- a/packages/design/src/table/style/index.ts +++ b/packages/design/src/table/style/index.ts @@ -107,6 +107,25 @@ export const genTableStyle: GenerateStyle = (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)`]: {