diff --git a/.changeset/blue-impalas-brake.md b/.changeset/blue-impalas-brake.md new file mode 100644 index 000000000..7d07fbc4c --- /dev/null +++ b/.changeset/blue-impalas-brake.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +fix(table): 修复合并单元格边框样式问题 diff --git a/.changeset/tame-eels-pump.md b/.changeset/tame-eels-pump.md new file mode 100644 index 000000000..93892ad8c --- /dev/null +++ b/.changeset/tame-eels-pump.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/table": patch +--- + +fix: 修复合并单元格边框样式问题 diff --git a/packages/ui/table/src/BaseTable.tsx b/packages/ui/table/src/BaseTable.tsx index 908ad3c29..5b2572faa 100644 --- a/packages/ui/table/src/BaseTable.tsx +++ b/packages/ui/table/src/BaseTable.tsx @@ -197,6 +197,8 @@ export const BaseTable = forwardRef( } = providedValue const hasBorder = borderedProp ?? bordered + const hasScrollToLeft = scrollSize.scrollLeft === 0 + const hasLeftFixedColumns = leftFrozenColKeys.length > 0 const extraHeader = extra && extra.header const extraFooter = extra && extra.footer @@ -290,6 +292,7 @@ export const BaseTable = forwardRef( prefixCls, className, hasBorder && `${prefixCls}--bordered`, + (hasScrollToLeft || hasLeftFixedColumns) && `${prefixCls}--bordered-left-none`, striped && `${prefixCls}--striped`, size && `${prefixCls}--size-${size}`, virtual && `${prefixCls}--virtual` diff --git a/packages/ui/table/src/styles/table.scss b/packages/ui/table/src/styles/table.scss index 95decfd04..130eb92ad 100644 --- a/packages/ui/table/src/styles/table.scss +++ b/packages/ui/table/src/styles/table.scss @@ -106,54 +106,42 @@ $emptyContent: '#{$component-prefix}-table-body-empty-content' !default; } &--bordered { - table { - thead { - & > tr > th:not(:last-child) { - border-right: use-border-size('normal') use-color('gray', 200); - } - - & > tr:has(+ tr) { - th:not(.#{$prefix}-header-cell--group-last-column) { - border-right: use-border-size('normal') use-color('gray', 200); - } - } + > .#{$prefix}__wrapper { + border: use-border-size('normal') use-color('gray', 200); - & > tr + tr:last-child { - th { - border-right: use-border-size('normal') use-color('gray', 200); - } - } + .#{$prefix}-header-cell, .#{$prefix}-cell { + border-left: use-border-size('normal') use-color('gray', 200); } - tr { + .#{$prefix}-row { &:last-child { - td { + .#{$prefix}-cell { border-bottom: none; } } - - td:not(:last-child) { - border-right: use-border-size('normal') use-color('gray', 200); - } } } - .#{$prefix}__wrapper { - border: use-border-size('normal') use-color('gray', 200); + &.#{$prefix}--bordered-left-none { + > .#{$prefix}__wrapper { + border-left: none; + } } &.#{$prefix}--virtual { - .#{$prefix}-row { - .#{$prefix}-cell:not(:last-child) { - border-right: use-border-size('normal') use-color('gray', 200); + > .#{$prefix}__wrapper { + .#{$prefix}-row { + .#{$prefix}-cell { + border-bottom: use-border-size('normal') use-color('gray', 200); + } } - } - .#{$prefix}-virtual-row { - &:last-child { - .#{$prefix}-row { - .#{$prefix}-cell { - border-bottom: none; + .#{$prefix}-virtual-row { + &:last-child { + .#{$prefix}-row { + .#{$prefix}-cell { + border-bottom: none; + } } } }