diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 8b31bbcdea70..2df9c3069902 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -122,6 +122,7 @@ export default class Table extends React.Component, TableState< showHeader: true, sortDirections: ['ascend', 'descend'], childrenColumnName: 'children', + tableLayout: 'auto', }; CheckboxPropsCache: { @@ -866,6 +867,26 @@ export default class Table extends React.Component, TableState< return getColumnKey(sortColumn) === getColumnKey(column); } + isTableLayoutFixed() { + const { tableLayout, columns = [], rowSelection, useFixedHeader, scroll = {} } = this.props; + if (tableLayout === 'fixed') { + return true; + } + // if one column fixed, use fixed table layout to fix align issue + if (columns.some(({ fixed }) => !!fixed)) { + return true; + } + // if selection column fixed, use fixed table layout to fix align issue + if (rowSelection && rowSelection.fixed) { + return true; + } + // if header fixed, use fixed table layout to fix align issue + if (useFixedHeader || scroll.y) { + return true; + } + return false; + } + // Get pagination, filters, sorter prepareParamsArguments(state: any): PrepareParamsArgumentsReturn { const pagination = { ...state.pagination }; @@ -1217,7 +1238,7 @@ export default class Table extends React.Component, TableState< }) => { const { showHeader, locale, getPopupContainer, ...restTableProps } = this.props; // do not pass prop.style to rc-table, since already apply it to container div - const restProps = omit(restTableProps, ['style']); + const restProps = omit(restTableProps, ['style', 'tableLayout']); const data = this.getCurrentPageData(); const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false; @@ -1230,11 +1251,11 @@ export default class Table extends React.Component, TableState< mergedLocale.emptyText = renderEmpty('Table'); } - const classString = classNames({ - [`${prefixCls}-${this.props.size}`]: true, + const classString = classNames(`${prefixCls}-${this.props.size}`, { [`${prefixCls}-bordered`]: this.props.bordered, [`${prefixCls}-empty`]: !data.length, [`${prefixCls}-without-column-header`]: !showHeader, + [`${prefixCls}-layout-fixed`]: this.isTableLayoutFixed(), }); const columnsWithRowSelection = this.renderRowSelection({ diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index b4048fd9e555..31aa60f3cb91 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -59,6 +59,7 @@ const columns = [ | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | +| tableLayout | [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) attribute of table element | 'auto' \| 'fixed' | 'auto', `fixed` when header or columns are fixed` | 3.24.0 | | bordered | Whether to show all table borders | boolean | `false` | | | childrenColumnName | The column contains children to display | string\[] | children | 3.4.2 | | columns | Columns of table | [ColumnProps](https://git.io/vMMXC)\[] | - | | diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 687e86a2f202..6c81dbd6d8b8 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -64,6 +64,7 @@ const columns = [ | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | +| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性 | 'auto' \| 'fixed' | 'auto',当固定头或固定列时默认值为 `fixed` | 3.24.0 | | bordered | 是否展示外边框和列边框 | boolean | false | | | childrenColumnName | 指定树形结构的列名 | string\[] | children | 3.4.2 | | columns | 表格列的配置描述,具体项见下表 | [ColumnProps](https://git.io/vMMXC)\[] | - | | diff --git a/components/table/interface.tsx b/components/table/interface.tsx index 5022f4ead2af..1c6d04ed8579 100644 --- a/components/table/interface.tsx +++ b/components/table/interface.tsx @@ -190,6 +190,7 @@ export interface TableProps { bodyStyle?: React.CSSProperties; className?: string; style?: React.CSSProperties; + tableLayout?: React.CSSProperties['tableLayout']; children?: React.ReactNode; sortDirections?: SortOrder[]; getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; diff --git a/components/table/style/index.less b/components/table/style/index.less index aa4893b745e5..60948d4ec3a4 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -37,6 +37,10 @@ border-spacing: 0; } + &-layout-fixed table { + table-layout: fixed; + } + &-thead > tr > th { color: @table-header-color; font-weight: 500;