@tablePrefixCls: rc-table; @text-color : #666; @font-size-base : 12px; @line-height: 1.5; @table-border-color: #e9e9e9; @table-head-background-color: #f7f7f7; @vertical-padding: 16px; @horizontal-padding: 8px; .@{tablePrefixCls} { font-size: @font-size-base; color: @text-color; transition: opacity 0.3s ease; position: relative; line-height: @line-height; overflow: hidden; .@{tablePrefixCls}-scroll { overflow: auto; table { width: auto; min-width: 100%; } } .@{tablePrefixCls}-header { overflow: hidden; background: @table-head-background-color; } &-fixed-header &-body { background: #fff; position: relative; } &-fixed-header &-body-inner { height: 100%; overflow: scroll; } &-fixed-header &-scroll &-header { overflow-x: scroll; padding-bottom: 20px; margin-bottom: -20px; overflow-y: scroll; box-sizing: border-box; } // https://github.com/ant-design/ant-design/issues/10828 &-fixed-columns-in-body { visibility: hidden; pointer-events: none; } .@{tablePrefixCls}-title { padding: @vertical-padding @horizontal-padding; border-top: 1px solid @table-border-color; } .@{tablePrefixCls}-content { position: relative; } .@{tablePrefixCls}-footer { padding: @vertical-padding @horizontal-padding; border-bottom: 1px solid @table-border-color; } .@{tablePrefixCls}-placeholder { padding: 16px 8px; background: #fff; border-bottom: 1px solid @table-border-color; text-align: center; position: relative; &-fixed-columns { position: absolute; bottom: 0; width: 100%; background: transparent; pointer-events: none; } } table { width: 100%; border-collapse: separate; text-align: left; } th { background: @table-head-background-color; font-weight: bold; transition: background 0.3s ease; } td { border-bottom: 1px solid @table-border-color; &:empty:after { content: '.'; // empty cell placeholder visibility: hidden; } } tr { transition: all 0.3s ease; &:hover { background: #eaf8fe; } &.@{tablePrefixCls}-row-hover { background: #eaf8fe; } } th, td { padding: @vertical-padding @horizontal-padding; white-space: nowrap; } } .@{tablePrefixCls} { &-expand-icon-col { width: 34px; } &-row, &-expanded-row { &-expand-icon { cursor: pointer; display: inline-block; width: 16px; height: 16px; text-align: center; line-height: 16px; border: 1px solid @table-border-color; user-select: none; background: #fff; } &-spaced { visibility: hidden; } &-spaced:after { content: '.'; } &-expanded:after { content: '-'; } &-collapsed:after { content: '+'; } } tr&-expanded-row { background: #f7f7f7; &:hover { background: #f7f7f7; } } &-column-hidden { display: none; } &-prev-columns-page, &-next-columns-page { cursor: pointer; color: #666; z-index: 1; &:hover { color: #2db7f5; } &-disabled { cursor: not-allowed; color: #999; &:hover { color: #999; } } } &-prev-columns-page { margin-right: 8px; &:before { content: '<'; } } &-next-columns-page { float: right; &:before { content: '>'; } } &-fixed-left, &-fixed-right { position: absolute; top: 0; overflow: hidden; table { width: auto; background: #fff; } } &-fixed-left { left: 0; box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1); & .@{tablePrefixCls}-body-inner { margin-right: -20px; padding-right: 20px; } .@{tablePrefixCls}-fixed-header & .@{tablePrefixCls}-body-inner { padding-right: 0; } } &-fixed-right { right: 0; box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1); // hide expand row content in right fixed Table // https://github.com/ant-design/ant-design/issues/1898 .@{tablePrefixCls}-expanded-row { color: transparent; pointer-events: none; } } &&-scroll-position-left &-fixed-left { box-shadow: none; } &&-scroll-position-right &-fixed-right { box-shadow: none; } }