feat: table hover radius (#37370)

* feat: table hover radius

* feat/table-hover

* chore: style fix

* fix: sticky header

components/table/style/index.tsx

@@ -168,7 +168,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
       [`${componentCls}-tbody`]: {
         '> tr': {
           '> td': {
-            borderBottom: tableBorder,
+            borderTop: tableBorder,
             transition: `background ${motionDurationSlow}`,
 
             // ========================= Nest Table ===========================
@@ -191,6 +191,15 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
             },
           },
 
+          '&:last-child > td': {
+            borderBottom: tableBorder,
+          },
+
+          [`&:first-child > td,
+            &${componentCls}-measure-row + tr > td`]: {
+            borderTop: 'none',
+          },
+
           [`
             &${componentCls}-row:hover > td,
             > td${componentCls}-cell-row-hover
@@ -210,6 +219,37 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
         },
       },
 
+      [`${componentCls}:not(${componentCls}-bordered) ${componentCls}-tbody > tr`]: {
+        [`&${componentCls}-row:hover, &${componentCls}-row${componentCls}-row-selected`]: {
+          [`+ tr${componentCls}-row > td`]: {
+            borderTopColor: 'transparent',
+          },
+        },
+
+        [`&${componentCls}-row:last-child:hover > td,
+          &${componentCls}-row${componentCls}-row-selected:last-child > td`]: {
+          borderBottomColor: 'transparent',
+        },
+
+        [`
+          &${componentCls}-row:hover > td,
+          > td${componentCls}-cell-row-hover,
+          &${componentCls}-row${componentCls}-row-selected > td
+        `]: {
+          borderTopColor: 'transparent',
+
+          '&:first-child': {
+            borderStartStartRadius: tableRadius,
+            borderEndStartRadius: tableRadius,
+          },
+
+          '&:last-child': {
+            borderStartEndRadius: tableRadius,
+            borderEndEndRadius: tableRadius,
+          },
+        },
+      },
+
       // ============================ Footer ============================
       [`${componentCls}-footer`]: {
         padding: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`,

components/table/style/radius.tsx

@@ -7,11 +7,11 @@ const genRadiusStyle: GenerateStyle<TableToken, CSSObject> = token => {
   return {
     [`${componentCls}-wrapper`]: {
       [componentCls]: {
-        '&-title': {
+        [`${componentCls}-title`]: {
           borderRadius: `${tableRadius}px ${tableRadius}px 0 0`,
         },
 
-        '&-title + &-container': {
+        [`${componentCls}-title + ${componentCls}-container`]: {
           borderStartStartRadius: 0,
           borderStartEndRadius: 0,