fix Table style when scroll={{ x: true }} and fixed columns

close ant-design/ant-design#22160

Author: afc163

src/BaseTable.tsx

@@ -144,12 +144,15 @@ class BaseTable<ValueType> extends React.Component<BaseTableProps<ValueType>> {
     const { table } = this.context;
     const { components } = table;
     const { prefixCls, scroll, data, getBodyWrapper } = table.props;
-    const { expander, tableClassName, hasHead, hasBody, fixed } = this.props;
+    const { expander, tableClassName, hasHead, hasBody, fixed, isAnyColumnsFixed } = this.props;
     const tableStyle: React.CSSProperties = {};
 
     if (!fixed && scroll.x) {
+      // 当有固定列时，width auto 会导致 body table 的宽度撑不开，从而固定列无法对齐
+      // 详情见：https://github.com/ant-design/ant-design/issues/22160
+      const tableWidthScrollX = isAnyColumnsFixed ? 'max-content' : 'auto';
       // not set width, then use content fixed width
-      tableStyle.width = scroll.x === true ? 'auto' : scroll.x;
+      tableStyle.width = scroll.x === true ? tableWidthScrollX : scroll.x;
     }
 
     const Table = hasBody ? components.table : 'table';

tests/__snapshots__/Table.spec.js.snap

@@ -1888,7 +1888,7 @@ exports[`Table scroll renders scroll.x is true 1`] = `
       >
         <table
           class="rc-table-fixed"
-          style="width:max-content"
+          style="width:auto"
         >
           <colgroup>
             <col />