Table: avoid th & td style conflict

ElemeFE · Aug 25, 2021 · 25cb53f · 25cb53f
1 parent 5709e9b
commit 25cb53f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 28 deletions.
diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
@@ -201,7 +201,7 @@ export default {
     },
 
     getCellClass(rowIndex, columnIndex, row, column) {
-      const classes = [column.id, column.align, column.className];
+      const classes = ['el-table__cell', column.id, column.align, column.className];
 
       if (this.isColumnHidden(columnIndex)) {
         classes.push('is-hidden');
@@ -404,7 +404,7 @@ export default {
         return [[
           tr,
           <tr key={'expanded-row__' + tr.key}>
-            <td colspan={ this.columnsCount } class="el-table__expanded-cell">
+            <td colspan={ this.columnsCount } class="el-table__cell el-table__expanded-cell">
               { renderExpanded(this.$createElement, { row, $index, store: this.store }) }
             </td>
           </tr>]];

diff --git a/packages/table/src/table-footer.js b/packages/table/src/table-footer.js
@@ -63,7 +63,7 @@ export default {
                 key={cellIndex}
                 colspan={ column.colSpan }
                 rowspan={ column.rowSpan }
-                class={ this.getRowClasses(column, cellIndex) }>
+                class={ ['el-table__cell', ...this.getRowClasses(column, cellIndex)] }>
                 <div class={ ['cell', column.labelClassName] }>
                   {
                     sums[cellIndex]
@@ -72,7 +72,7 @@ export default {
               </td>)
             }
             {
-              this.hasGutter ? <th class="gutter"></th> : ''
+              this.hasGutter ? <th class="el-table__cell gutter"></th> : ''
             }
           </tr>
         </tbody>

diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js
@@ -136,7 +136,7 @@ export default {
                   </th>))
                 }
                 {
-                  this.hasGutter ? <th class="gutter"></th> : ''
+                  this.hasGutter ? <th class="el-table__cell gutter"></th> : ''
                 }
               </tr>
             )
@@ -260,7 +260,7 @@ export default {
     },
 
     getHeaderCellClass(rowIndex, columnIndex, row, column) {
-      const classes = [column.id, column.order, column.headerAlign, column.className, column.labelClassName];
+      const classes = ['el-table__cell', column.id, column.order, column.headerAlign, column.className, column.labelClassName];
 
       if (rowIndex === 0 && this.isCellHidden(columnIndex, row)) {
         classes.push('is-hidden');

diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss
@@ -89,7 +89,7 @@
     border-right: 0;
     border-bottom: 0;
 
-    th.gutter, td.gutter {
+    .el-table__cell.gutter {
       border-right-width: 1px;
     }
   }
@@ -111,13 +111,13 @@
     font-weight: 500;
 
     &.is-group {
-      th {
+      th.el-table__cell {
         background: $--background-color-base;
       }
     }
   }
 
-  th, td {
+  .el-table__cell {
     padding: 12px 0;
     min-width: 0;
     box-sizing: border-box;
@@ -149,21 +149,21 @@
   }
 
   @include m(medium) {
-    th, td {
+    .el-table__cell {
       padding: 10px 0;
     }
   }
 
   @include m(small) {
     font-size: 12px;
-    th, td {
+    .el-table__cell {
       padding: 8px 0;
     }
   }
 
   @include m(mini) {
     font-size: 12px;
-    th, td {
+    .el-table__cell {
       padding: 6px 0;
     }
   }
@@ -176,15 +176,16 @@
     }
   }
 
-  th.is-leaf, td {
+  th.el-table__cell.is-leaf,
+  td.el-table__cell {
     border-bottom: $--table-border;
   }
 
-  th.is-sortable {
+  th.el-table__cell.is-sortable {
     cursor: pointer;
   }
 
-  th {
+  th.el-table__cell {
     overflow: hidden;
     user-select: none;
     background-color: $--table-header-background-color;
@@ -215,7 +216,7 @@
     }
   }
 
-  td {
+  td.el-table__cell {
     div {
       box-sizing: border-box;
     }
@@ -280,20 +281,20 @@
       border-color: transparent;
     }
 
-    th, td {
+    .el-table__cell {
       border-right: $--table-border;
 
       &:first-child .cell {
         padding-left: 10px;
       }
     }
 
-    th.gutter:last-of-type {
+    th.el-table__cell.gutter:last-of-type {
       border-bottom: $--table-border;
       border-bottom-width: 1px;
     }
 
-    & th {
+    & th.el-table__cell {
       border-bottom: $--table-border;
     }
   }
@@ -356,7 +357,7 @@
     bottom: 0;
     z-index: 3;
 
-    & tbody td {
+    & tbody td.el-table__cell {
       border-top: $--table-border;
       background-color: $--table-row-hover-background-color;
       color: $--table-font-color;
@@ -377,7 +378,7 @@
 
   @include e(footer-wrapper) {
     margin-top: -1px;
-    td {
+    td.el-table__cell {
       border-top: $--table-border;
     }
   }
@@ -390,7 +391,7 @@
   @include e((header-wrapper, footer-wrapper)) {
     overflow: hidden;
 
-    & tbody td {
+    & tbody td.el-table__cell {
       background-color: $--table-row-hover-background-color;
       color: $--table-font-color;
     }
@@ -481,11 +482,11 @@
   @include m(striped) {
     & .el-table__body {
       & tr.el-table__row--striped {
-        td {
+        td.el-table__cell {
           background: #FAFAFA;
         }
 
-        &.current-row td {
+        &.current-row td.el-table__cell {
           background-color: $--table-current-row-background-color;
         }
       }
@@ -496,14 +497,14 @@
     tr.hover-row {
       &, &.el-table__row--striped {
         &, &.current-row {
-          > td {
+          > td.el-table__cell {
             background-color: $--table-row-hover-background-color;
           }
         }
       }
     }
 
-    tr.current-row > td {
+    tr.current-row > td.el-table__cell {
       background-color: $--table-current-row-background-color;
     }
   }
@@ -531,13 +532,13 @@
   }
 
   @include m(enable-row-transition) {
-    .el-table__body td {
+    .el-table__body td.el-table__cell {
       transition: background-color .25s ease;
     }
   }
 
   @include m(enable-row-hover) {
-    .el-table__body tr:hover > td {
+    .el-table__body tr:hover > td.el-table__cell {
       background-color: $--table-row-hover-background-color;
     }
   }