diff --git a/components/table/style/index.less b/components/table/style/index.less index 9d0116c29370..3729ef171d0b 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -32,169 +32,174 @@ border-collapse: collapse; } - &-thead > tr > th { - color: @table-header-color; - font-weight: 500; - text-align: left; + &-thead > tr { + // For Chrome extra space: + // - https://github.com/ant-design/ant-design/issues/14926 + // - https://github.com/ant-design/ant-design/issues/16131 background: @table-header-bg; - border-bottom: @border-width-base @border-style-base @border-color-split; - transition: background 0.3s ease; - &[colspan] { - text-align: center; - } - - .@{iconfont-css-prefix}-filter, - .@{table-prefix-cls}-filter-icon { - position: absolute; - top: 0; - right: 0; - width: 28px; - height: 100%; - color: @table-header-icon-color; - font-size: @font-size-sm; - text-align: center; - cursor: pointer; - transition: all 0.3s; + > th { + color: @table-header-color; + font-weight: 500; + text-align: left; + background: transparent; + border-bottom: @border-width-base @border-style-base @border-color-split; + transition: background 0.3s ease; - > svg { - position: absolute; - top: 50%; - left: 50%; - margin-top: -@font-size-sm / 2 + 1px; - margin-left: -@font-size-sm / 2; + &[colspan] { + text-align: center; } - } - - .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter { - color: @primary-color; - } - .@{table-prefix-cls}-column-sorter { - display: table-cell; - vertical-align: middle; - - .@{table-prefix-cls}-column-sorter-inner { - height: 1em; - margin-top: 0.35em; - margin-left: 0.57142857em; + .@{iconfont-css-prefix}-filter, + .@{table-prefix-cls}-filter-icon { + position: absolute; + top: 0; + right: 0; + width: 28px; + height: 100%; color: @table-header-icon-color; - line-height: 1em; + font-size: @font-size-sm; text-align: center; + cursor: pointer; transition: all 0.3s; - .@{table-prefix-cls}-column-sorter-up, - .@{table-prefix-cls}-column-sorter-down { - .iconfont-size-under-12px(11px); + > svg { + position: absolute; + top: 50%; + left: 50%; + margin-top: -@font-size-sm / 2 + 1px; + margin-left: -@font-size-sm / 2; + } + } + + .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter { + color: @primary-color; + } + + .@{table-prefix-cls}-column-sorter { + display: table-cell; + vertical-align: middle; - display: block; + .@{table-prefix-cls}-column-sorter-inner { height: 1em; + margin-top: 0.35em; + margin-left: 0.57142857em; + color: @table-header-icon-color; line-height: 1em; + text-align: center; transition: all 0.3s; - &.on { - color: @primary-color; - } - } - - &-full { - margin-top: -0.15em; .@{table-prefix-cls}-column-sorter-up, .@{table-prefix-cls}-column-sorter-down { - height: 0.5em; - line-height: 0.5em; + .iconfont-size-under-12px(11px); + + display: block; + height: 1em; + line-height: 1em; + transition: all 0.3s; + &.on { + color: @primary-color; + } } - .@{table-prefix-cls}-column-sorter-down { - margin-top: 0.125em; + &-full { + margin-top: -0.15em; + + .@{table-prefix-cls}-column-sorter-up, + .@{table-prefix-cls}-column-sorter-down { + height: 0.5em; + line-height: 0.5em; + } + + .@{table-prefix-cls}-column-sorter-down { + margin-top: 0.125em; + } } } } - } - &.@{table-prefix-cls}-column-has-actions { - position: relative; - background-clip: padding-box; // For Firefox background bug, https://github.com/ant-design/ant-design/issues/12628 - /* stylelint-disable-next-line */ - -webkit-background-clip: border-box; // For Chrome extra space: https://github.com/ant-design/ant-design/issues/14926 + &.@{table-prefix-cls}-column-has-actions { + position: relative; + background-clip: padding-box; // For Firefox background bug, https://github.com/ant-design/ant-design/issues/12628 - &.@{table-prefix-cls}-column-has-filters { - // https://github.com/ant-design/ant-design/issues/12650 - padding-right: 30px !important; + &.@{table-prefix-cls}-column-has-filters { + // https://github.com/ant-design/ant-design/issues/12650 + padding-right: 30px !important; - .@{iconfont-css-prefix}-filter, - .@{table-prefix-cls}-filter-icon { - &.@{table-prefix-cls}-filter-open { - color: @text-color-secondary; - background: @table-header-filter-active-bg; - } - } - // Very complicated styles logic but necessary - &:hover { .@{iconfont-css-prefix}-filter, .@{table-prefix-cls}-filter-icon { - &:hover { + &.@{table-prefix-cls}-filter-open { color: @text-color-secondary; background: @table-header-filter-active-bg; } - &:active { - color: @text-color; + } + // Very complicated styles logic but necessary + &:hover { + .@{iconfont-css-prefix}-filter, + .@{table-prefix-cls}-filter-icon { + &:hover { + color: @text-color-secondary; + background: @table-header-filter-active-bg; + } + &:active { + color: @text-color; + } } } } - } - &.@{table-prefix-cls}-column-has-sorters { - cursor: pointer; - &:hover { - background: @table-header-sort-active-bg; - .@{iconfont-css-prefix}-filter, - .@{table-prefix-cls}-filter-icon { + &.@{table-prefix-cls}-column-has-sorters { + cursor: pointer; + &:hover { background: @table-header-sort-active-bg; + .@{iconfont-css-prefix}-filter, + .@{table-prefix-cls}-filter-icon { + background: @table-header-sort-active-bg; + } } - } - &:active { - .@{table-prefix-cls}-column-sorter-up:not(.on), - .@{table-prefix-cls}-column-sorter-down:not(.on) { - color: @text-color-secondary; + &:active { + .@{table-prefix-cls}-column-sorter-up:not(.on), + .@{table-prefix-cls}-column-sorter-down:not(.on) { + color: @text-color-secondary; + } } } } - } - .@{table-prefix-cls}-header-column { - display: inline-block; - vertical-align: top; + .@{table-prefix-cls}-header-column { + display: inline-block; + vertical-align: top; - .@{table-prefix-cls}-column-sorters { - display: table; + .@{table-prefix-cls}-column-sorters { + display: table; - > .@{table-prefix-cls}-column-title { - display: table-cell; - vertical-align: middle; - } + > .@{table-prefix-cls}-column-title { + display: table-cell; + vertical-align: middle; + } - > *:not(.@{table-prefix-cls}-column-sorter) { - position: relative; - } - &::before { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: transparent; - transition: all 0.3s; - content: ''; - } - &:hover::before { - background: rgba(0, 0, 0, 0.04); + > *:not(.@{table-prefix-cls}-column-sorter) { + position: relative; + } + &::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: transparent; + transition: all 0.3s; + content: ''; + } + &:hover::before { + background: rgba(0, 0, 0, 0.04); + } } } - } - &.@{table-prefix-cls}-column-has-sorters { - user-select: none; + &.@{table-prefix-cls}-column-has-sorters { + user-select: none; + } } } @@ -230,10 +235,6 @@ } } - &-thead > tr:hover { - background: none; - } - &-footer { position: relative; padding: @table-padding-vertical @table-padding-horizontal;