style(table): allow custom tr background-color (#3166)

* style(table): allow custom tr background-color

* style(table): format table docs & add status tr example by var

packages/theme-chalk/src/common/var.scss

@@ -668,6 +668,7 @@ $--table: map.merge(
     'header-background-color': var(--el-color-white),
     'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
     'background-color': var(--el-color-white),
+    'tr-background-color': var(--el-color-white),
     'expanded-cell-background-color': var(--el-color-white),
   ),
   $--table

packages/theme-chalk/src/table.scss

@@ -171,7 +171,7 @@
   }
 
   tr {
-    background-color: var(--el-color-white);
+    background-color: var(--el-table-tr-background-color);
 
     input[type='checkbox'] {
       margin: 0;
@@ -328,7 +328,7 @@
     position: absolute;
     top: -1px;
     right: 0;
-    background-color: var(--el-color-white);
+    background-color: var(--el-table-header-background-color);
     border-bottom: var(--el-table-border);
   }
 

website/demo-styles/table.scss

@@ -1,9 +1,9 @@
 .#{$namespace}-table .warning-row {
-  background: var(--el-color-warning-lighter);
+  --el-table-tr-background-color: var(--el-color-warning-lighter);
 }
 
 .#{$namespace}-table .success-row {
-  background: var(--el-color-success-lighter);
+  --el-table-tr-background-color: var(--el-color-success-lighter);
 }
 
 .demo-table .name-wrapper {

website/docs/jp/table.md

@@ -199,11 +199,10 @@
 
 <style>
   .el-table .warning-row {
-    background: oldlace;
+    --el-table-tr-background-color: var(--el-color-warning-lighter);
   }
-
   .el-table .success-row {
-    background: #f0f9eb;
+    --el-table-tr-background-color: var(--el-color-success-lighter);
   }
 </style>