fix(components): [table] avoid table border style conflict (#3064)

packages/components/table/src/table-body/render-helper.ts

@@ -155,7 +155,7 @@ function useRender<T>(props: Partial<TableBodyProps<T>>) {
               'td',
               {
                 colspan: store.states.columns.value.length,
-                class: 'el-table__expanded-cell',
+                class: 'el-table__cell el-table__expanded-cell',
               },
               [renderExpanded({ row, $index, store })],
             ),

packages/components/table/src/table-body/styles-helper.ts

@@ -111,6 +111,8 @@ function useStyles<T>(props: Partial<TableBodyProps<T>>) {
       )
     }
 
+    classes.push('el-table__cell')
+
     return classes.join(' ')
   }
   const getSpan = (

packages/components/table/src/table-footer/index.ts

@@ -115,7 +115,7 @@ export default defineComponent({
                     key: cellIndex,
                     colspan: column.colSpan,
                     rowspan: column.rowSpan,
-                    class: this.getRowClasses(column, cellIndex),
+                    class: [...this.getRowClasses(column, cellIndex), 'el-table__cell'],
                   },
                   [
                     h(

packages/components/table/src/table-header/style.helper.ts

@@ -115,6 +115,8 @@ function useStyle<T>(props: TableHeaderProps<T>) {
       )
     }
 
+    classes.push('el-table__cell')
+
     return classes.join(' ')
   }
 

packages/theme-chalk/src/table.scss

@@ -91,8 +91,7 @@
     border-right: 0;
     border-bottom: 0;
 
-    th.gutter,
-    td.gutter {
+    .#{$namespace}-table__cell.gutter {
       border-right-width: 1px;
     }
   }
@@ -114,14 +113,13 @@
     font-weight: 500;
 
     &.is-group {
-      th {
+      th.#{$namespace}-table__cell {
         background: var(--el-background-color-base);
       }
     }
   }
 
-  th,
-  td {
+  .#{$namespace}-table__cell {
     padding: 12px 0;
     min-width: 0;
     box-sizing: border-box;
@@ -153,24 +151,21 @@
   }
 
   @include m(medium) {
-    th,
-    td {
+    .#{$namespace}-table__cell {
       padding: 10px 0;
     }
   }
 
   @include m(small) {
     font-size: 12px;
-    th,
-    td {
+    .#{$namespace}-table__cell {
       padding: 8px 0;
     }
   }
 
   @include m(mini) {
     font-size: 12px;
-    th,
-    td {
+    .#{$namespace}-table__cell {
       padding: 6px 0;
     }
   }
@@ -183,16 +178,16 @@
     }
   }
 
-  th.is-leaf,
-  td {
+  th.#{$namespace}-table__cell.is-leaf,
+  td.#{$namespace}-table__cell {
     border-bottom: var(--el-table-border);
   }
 
-  th.is-sortable {
+  th.#{$namespace}-table__cell.is-sortable {
     cursor: pointer;
   }
 
-  th {
+  th.#{$namespace}-table__cell {
     overflow: hidden;
     user-select: none;
     background-color: var(--el-table-header-background-color);
@@ -221,7 +216,7 @@
     }
   }
 
-  td {
+  td.#{$namespace}-table__cell {
     div {
       box-sizing: border-box;
     }
@@ -287,8 +282,7 @@
     //   border-color: transparent;
     // }
 
-    th,
-    td {
+    .#{$namespace}-table__cell {
       border-right: var(--el-table-border);
 
       &:first-child .cell {
@@ -296,12 +290,12 @@
       }
     }
 
-    th.gutter:last-of-type {
+    th.#{$namespace}-table__cell.gutter:last-of-type {
       border-bottom: var(--el-table-border);
       border-bottom-width: 1px;
     }
 
-    & th {
+    & th.#{$namespace}-table__cell {
       border-bottom: var(--el-table-border);
     }
   }
@@ -364,7 +358,7 @@
     bottom: 0;
     z-index: 3;
 
-    & tbody td {
+    & tbody td.#{$namespace}-table__cell {
       border-top: var(--el-table-border);
       background-color: var(--el-table-row-hover-background-color);
       color: var(--el-table-font-color);
@@ -385,7 +379,7 @@
 
   @include e(footer-wrapper) {
     margin-top: -1px;
-    td {
+    td.#{$namespace}-table__cell {
       border-top: var(--el-table-border);
     }
   }
@@ -398,7 +392,7 @@
   @include e((header-wrapper, footer-wrapper)) {
     overflow: hidden;
 
-    & tbody td {
+    & tbody td.#{$namespace}-table__cell {
       background-color: var(--el-table-row-hover-background-color);
       color: var(--el-table-font-color);
     }
@@ -489,11 +483,11 @@
   @include m(striped) {
     & .#{$namespace}-table__body {
       & tr.#{$namespace}-table__row--striped {
-        td {
+        td.#{$namespace}-table__cell {
           background: #fafafa;
         }
 
-        &.current-row td {
+        &.current-row td.#{$namespace}-table__cell {
           background-color: var(--el-table-current-row-background-color);
         }
       }
@@ -506,14 +500,14 @@
       &.#{$namespace}-table__row--striped {
         &,
         &.current-row {
-          > td {
+          > td.#{$namespace}-table__cell {
             background-color: var(--el-table-row-hover-background-color);
           }
         }
       }
     }
 
-    tr.current-row > td {
+    tr.current-row > td.#{$namespace}-table__cell {
       background-color: var(--el-table-current-row-background-color);
     }
   }
@@ -541,13 +535,13 @@
   }
 
   @include m(enable-row-transition) {
-    .#{$namespace}-table__body td {
+    .#{$namespace}-table__body td.#{$namespace}-table__cell {
       transition: background-color 0.25s ease;
     }
   }
 
   @include m(enable-row-hover) {
-    .#{$namespace}-table__body tr:hover > td {
+    .#{$namespace}-table__body tr:hover > td.#{$namespace}-table__cell {
       background-color: var(--el-table-row-hover-background-color);
     }
   }