@import "../../style/themes/default"; @import "../../style/mixins/index"; @table-prefix-cls: ~"@{ant-prefix}-table"; @table-head-background-color: @background-color-base; .@{table-prefix-cls}-wrapper { .clearfix; } .@{table-prefix-cls} { font-size: @font-size-base; color: @text-color; overflow: hidden; position: relative; border-radius: @border-radius-base @border-radius-base 0 0; &-body { transition: opacity 0.3s ease; } table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; border-radius: @border-radius-base @border-radius-base 0 0; overflow: hidden; } &-thead > tr > th { background: @table-head-background-color; font-weight: bold; transition: background .3s ease; text-align: left; &[colspan] { text-align: center; } .@{iconfont-css-prefix}-filter { margin-left: 4px; font-size: @font-size-base; cursor: pointer; color: #aaa; transition: all .3s; &:hover { color: @text-color; } } .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter { color: @primary-color; } } &-tbody > tr > td { border-bottom: @border-width-base @border-style-base @border-color-split; transition: all .3s; } &-thead > tr, &-tbody > tr { transition: all .3s; &.@{table-prefix-cls}-row-hover, &:hover { & > td { background: @primary-1; } } } &-thead > tr:hover { background: none; } &-footer { padding: 16px 8px; background: @table-head-background-color; border-radius: 0 0 @border-radius-base @border-radius-base; position: relative; &:before { content: ''; height: 1px; background: @table-head-background-color; position: absolute; top: -1px; width: 100%; left: 0; } } &.@{table-prefix-cls}-bordered &-footer { border: @border-width-base @border-style-base @border-color-split; } &-title { padding: 16px 0; position: relative; top: 1px; border-radius: @border-radius-base @border-radius-base 0 0; } &.@{table-prefix-cls}-bordered &-title { border: @border-width-base @border-style-base @border-color-split; padding-left: 8px; padding-right: 8px; } &-title + &-content { position: relative; border-radius: @border-radius-base @border-radius-base 0 0; overflow: hidden; .@{table-prefix-cls}-bordered & { &, table { border-radius: 0; } } } // https://github.com/ant-design/ant-design/issues/4373 &-without-column-header &-title + &-content, &-without-column-header table { border-radius: 0; } &-tbody > tr.@{table-prefix-cls}-row-selected { background: #fafafa; } &-thead > tr > th.@{table-prefix-cls}-column-sort { background: #eaeaea; } &-thead > tr > th, &-tbody > tr > td { padding: 16px 8px; word-break: break-all; } &-thead > tr > th.@{table-prefix-cls}-selection-column { padding-left: 16px; padding-right: 0; } &-thead > tr > th.@{table-prefix-cls}-selection-column, &-tbody > tr > td.@{table-prefix-cls}-selection-column { text-align: center; width: 62px; } &-expand-icon-th, &-row-expand-icon-cell { text-align: center; width: 50px; } &-header { background: @table-head-background-color; overflow: hidden; } &-header table { border-radius: @border-radius-base @border-radius-base 0 0; } &-loading { position: relative; .@{table-prefix-cls}-body { background: @component-background; opacity: 0.5; } .@{table-prefix-cls}-spin-holder { height: 20px; line-height: 20px; left: 50%; top: 50%; margin-left: -30px; position: absolute; } .@{table-prefix-cls}-with-pagination { margin-top: -20px; } .@{table-prefix-cls}-without-pagination { margin-top: 10px; } } &-middle { .@{table-prefix-cls}-thead > tr > th:not(.@{table-prefix-cls}-selection-column), .@{table-prefix-cls}-tbody > tr > td { padding: 10px 8px; } .@{table-prefix-cls}-title, .@{table-prefix-cls}-footer { padding: 10px 8px; } } &-small { border: @border-width-base @border-style-base @border-color-split; border-radius: @border-radius-base; .@{table-prefix-cls}-header > table, .@{table-prefix-cls}-body > table { border: 0; padding: 0 8px; } .@{table-prefix-cls}-thead > tr > th { background: @component-background; border-bottom: @border-width-base @border-style-base @border-color-split; } .@{table-prefix-cls}-tbody > tr > td { padding: 6px 8px; } .@{table-prefix-cls}-title, .@{table-prefix-cls}-footer, .@{table-prefix-cls}-thead > tr > th:not(.@{table-prefix-cls}-selection-column) { padding: 10px 8px; } .@{table-prefix-cls}-title { border-bottom: @border-width-base @border-style-base @border-color-split; top: 0; } .@{table-prefix-cls}-header { background: @component-background; table { border-bottom: @border-width-base @border-style-base @border-color-split; } } .@{table-prefix-cls}-placeholder, .@{table-prefix-cls}-row:last-child td { border-bottom: 0; } } &-column-sorter { margin-left: 4px; display: inline-block; width: 12px; height: 14px; vertical-align: middle; text-align: center; &-up, &-down { line-height: 4px; height: 5px; display: block; width: 12px; cursor: pointer; &:hover .@{iconfont-css-prefix} { color: @text-color; } &.on { .@{iconfont-css-prefix}-caret-up, .@{iconfont-css-prefix}-caret-down { color: @primary-color; } } } .@{iconfont-css-prefix}-caret-up, .@{iconfont-css-prefix}-caret-down { .iconfont-size-under-12px(7px); line-height: 6px; height: 6px; color: #aaa; &:before { -moz-transform-origin: 53% 50%; /* fix firefox position */ } } } &-bordered { .@{table-prefix-cls}-header > table, .@{table-prefix-cls}-body > table, .@{table-prefix-cls}-fixed-left table, .@{table-prefix-cls}-fixed-right table { border: @border-width-base @border-style-base @border-color-split; border-right: 0; border-bottom: 0; } &.@{table-prefix-cls}-empty { .@{table-prefix-cls}-placeholder { border-left: @border-width-base @border-style-base @border-color-split; border-right: @border-width-base @border-style-base @border-color-split; } } &.@{table-prefix-cls}-fixed-header { .@{table-prefix-cls}-header > table { border-bottom: 0; } .@{table-prefix-cls}-body > table { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .@{table-prefix-cls}-body-inner > table { border-top: 0; } .@{table-prefix-cls}-placeholder { border: 0; } } .@{table-prefix-cls}-thead > tr > th { border-bottom: @border-width-base @border-style-base @border-color-split; } .@{table-prefix-cls}-thead > tr > th, .@{table-prefix-cls}-tbody > tr > td { border-right: @border-width-base @border-style-base @border-color-split; } &.@{table-prefix-cls}-small { border-right: 0; .@{table-prefix-cls}-header > table, .@{table-prefix-cls}-body > table, .@{table-prefix-cls}-fixed-left table, .@{table-prefix-cls}-fixed-right table { border: 0; padding: 0; } .@{table-prefix-cls}-title { border: 0; border-bottom: @border-width-base @border-style-base @border-color-split; border-right: @border-width-base @border-style-base @border-color-split; } .@{table-prefix-cls}-footer { border: 0; border-top: @border-width-base @border-style-base @border-color-split; border-right: @border-width-base @border-style-base @border-color-split; &:before { display: none; } } .@{table-prefix-cls}-placeholder { border-left: 0; border-bottom: 0; } } } &-placeholder { position: relative; padding: 16px 8px; background: @component-background; border-bottom: @border-width-base @border-style-base @border-color-split; text-align: center; font-size: @font-size-base; color: @text-color-secondary; .@{iconfont-css-prefix} { margin-right: 4px; } } &-pagination { margin: 16px 0; float: right; } &-filter-dropdown { min-width: 96px; margin-left: -8px; background: @component-background; border-radius: @border-radius-base; box-shadow: @box-shadow-base; .@{ant-prefix}-dropdown-menu { border: 0; box-shadow: none; border-radius: @border-radius-base @border-radius-base 0 0; // https://github.com/ant-design/ant-design/issues/4916 &-without-submenu { max-height: 400px; overflow-x: hidden; } &-item > label + span { padding: 0; } &-sub { border-radius: @border-radius-base; box-shadow: @box-shadow-base; } .@{ant-prefix}-dropdown-submenu-contain-selected { .@{ant-prefix}-dropdown-menu-submenu-title:after { color: @primary-color; font-weight: bold; text-shadow: 0 0 2px@primary-2; } } } .@{ant-prefix}-dropdown-menu-item { overflow: hidden; } > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-item:last-child, > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-submenu:last-child .@{ant-prefix}-dropdown-menu-submenu-title { border-radius: 0; } &-btns { overflow: hidden; padding: 7px 16px; border-top: @border-width-base @border-style-base @border-color-split; } &-link { color: @link-color; &:hover { color: @link-hover-color; } &:active { color: @link-active-color; } &.confirm { float: left; } &.clear { float: right; } } } &-selection { &-select-all { margin-right: 4px !important; } .@{iconfont-css-prefix}-down { color: #aaa; } &-menu { min-width: 96px; margin-top: 5px; margin-left: -30px; background: @component-background; border-radius: @border-radius-base; box-shadow: @box-shadow-base; .@{ant-prefix}-action-down { color: #aaa; } } &-down { cursor: pointer; padding: 0; display: inline-block; vertical-align: middle; line-height: 1; } } &-row { &-expand-icon { cursor: pointer; display: inline-block; width: 17px; height: 17px; text-align: center; line-height: 14px; border: @border-width-base @border-style-base @border-color-split; user-select: none; background: @component-background; } &-expanded:after { content: '-'; } &-collapsed:after { content: '+'; } &-spaced { visibility: hidden; &:after { content: '.'; } } &[class*="@{table-prefix-cls}-row-level-0"] .@{table-prefix-cls}-selection-column > span { display: inline-block; } } tr&-expanded-row { &, &:hover { background: #fbfbfb; } } .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon { margin-right: 8px; } &-scroll { overflow: auto; overflow-x: hidden; table { width: auto; min-width: 100%; } } &-body-inner { height: 100%; } &-fixed-header &-body { position: relative; background: @component-background; } &-fixed-header &-body-inner { overflow: scroll; } &-fixed-header &-scroll &-header { overflow: scroll; padding-bottom: 20px; margin-bottom: -20px; } /* fix firefox scrollbar bug */ &-fixed-header&-empty &-scroll &-body { padding-bottom: 20px; margin-bottom: -20px; } &-fixed-left, &-fixed-right { position: absolute; top: 0; overflow: hidden; transition: box-shadow .3s ease; border-radius: 0; table { width: auto; background: @component-background; } } &-fixed-header &-fixed-left &-body-outer &-fixed, &-fixed-header &-fixed-right &-body-outer &-fixed { border-radius: 0; } &-fixed-left { left: 0; box-shadow: 6px 0 6px -4px @shadow-color; .@{table-prefix-cls}-header { overflow-y: hidden; } // hide scrollbar in left fixed columns .@{table-prefix-cls}-body-inner { margin-right: -20px; padding-right: 20px; } .@{table-prefix-cls}-fixed-header & .@{table-prefix-cls}-body-inner { padding-right: 0; } &, table { border-radius: @border-radius-base 0 0 0; } } &-fixed-right { right: 0; box-shadow: -6px 0 6px -4px @shadow-color; &, table { border-radius: 0 @border-radius-base 0 0; } // hide expand row content in right-fixed Table // https://github.com/ant-design/ant-design/issues/1898 .@{table-prefix-cls}-expanded-row { color: transparent; pointer-events: none; } } &&-scroll-position-left &-fixed-left { box-shadow: none; } &&-scroll-position-right &-fixed-right { box-shadow: none; } }