fix align right not work

This commit is contained in:
zombiej 2019-04-06 12:56:07 +08:00
parent f7d2dd757e
commit bdc3ad431d
2 changed files with 37 additions and 37 deletions

View File

@ -925,12 +925,14 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
[`${prefixCls}-column-sort`]: isSortColumn && sortOrder, [`${prefixCls}-column-sort`]: isSortColumn && sortOrder,
}), }),
title: [ title: [
<div key="title" className={sortButton ? `${prefixCls}-column-sorters` : undefined}> <span key="title" className={`${prefixCls}-header-column`}>
<span className={`${prefixCls}-column-title`}> <div className={sortButton ? `${prefixCls}-column-sorters` : undefined}>
{this.renderColumnTitle(column.title)} <span className={`${prefixCls}-column-title`}>
</span> {this.renderColumnTitle(column.title)}
<span className={`${prefixCls}-column-sorter`}>{sortButton}</span> </span>
</div>, <span className={`${prefixCls}-column-sorter`}>{sortButton}</span>
</div>
</span>,
filterDropdown, filterDropdown,
], ],
onHeaderCell, onHeaderCell,

View File

@ -116,6 +116,9 @@
-webkit-background-clip: border-box; // For Chrome extra space: https://github.com/ant-design/ant-design/issues/14926 -webkit-background-clip: border-box; // For Chrome extra space: https://github.com/ant-design/ant-design/issues/14926
&.@{table-prefix-cls}-column-has-filters { &.@{table-prefix-cls}-column-has-filters {
// https://github.com/ant-design/ant-design/issues/12650
padding-right: 30px !important;
.@{iconfont-css-prefix}-filter, .@{iconfont-css-prefix}-filter,
.@{table-prefix-cls}-filter-icon { .@{table-prefix-cls}-filter-icon {
&.@{table-prefix-cls}-filter-open { &.@{table-prefix-cls}-filter-open {
@ -154,41 +157,36 @@
} }
} }
} }
// https://github.com/ant-design/ant-design/issues/12650
&.@{table-prefix-cls}-column-has-sorters,
&.@{table-prefix-cls}-column-has-filters {
padding-right: 30px !important;
}
&.@{table-prefix-cls}-column-has-sorters.@{table-prefix-cls}-column-has-filters {
padding-right: 54px !important;
}
} }
.@{table-prefix-cls}-column-sorters { .@{table-prefix-cls}-header-column {
display: table; display: inline-block;
vertical-align: top;
> .@{table-prefix-cls}-column-title { .@{table-prefix-cls}-column-sorters {
display: table-cell; display: table;
vertical-align: middle;
}
> *:not(.@{table-prefix-cls}-column-sorter) { > .@{table-prefix-cls}-column-title {
position: relative; display: table-cell;
} vertical-align: middle;
&::before { }
position: absolute;
top: 0; > *:not(.@{table-prefix-cls}-column-sorter) {
right: 0; position: relative;
bottom: 0; }
left: 0; &::before {
background: transparent; position: absolute;
transition: all 0.3s; top: 0;
content: ''; right: 0;
} bottom: 0;
&:hover::before { left: 0;
background: rgba(0, 0, 0, 0.04); background: transparent;
transition: all 0.3s;
content: '';
}
&:hover::before {
background: rgba(0, 0, 0, 0.04);
}
} }
} }