Build in and improve UI of nested Table in expand-children Table

close #12877

components/table/demo/nested-table.md

@@ -106,37 +106,3 @@ function NestedTable() {
 
 ReactDOM.render(<NestedTable />, mountNode);
 ````
-
-````css
-.components-table-demo-nested .ant-table-expanded-row > td:last-child {
-  padding: 0 48px 0 8px;
-}
-
-.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-thead th {
-  border-bottom: 1px solid #e9e9e9;
-}
-
-.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-thead th:first-child {
-  padding-left: 0;
-}
-
-.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-row td:first-child {
-  padding-left: 0;
-}
-
-.components-table-demo-nested .ant-table-expanded-row .ant-table-row:last-child td {
-  border: none;
-}
-
-.components-table-demo-nested .ant-table-expanded-row .ant-table-thead > tr > th {
-  background: none;
-}
-
-.components-table-demo-nested .table-operation a:not(:last-child) {
-  margin-right: 24px;
-}
-
-.components-table-demo-nested .ant-table-expanded-row:hover > td {
-  background: #fbfbfb;
-}
-````

components/table/style/index.less

@@ -205,7 +205,7 @@
     transition: all .3s, height 0s;
     &.@{table-prefix-cls}-row-hover,
     &:hover {
-      & > td {
+      &:not(.@{table-prefix-cls}-expanded-row) > td {
         background: @table-row-hover-bg;
       }
     }
@@ -547,6 +547,10 @@
     &:hover {
       background: @table-expanded-row-bg;
     }
+
+    .@{table-prefix-cls}-wrapper {
+      margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical - 1px;
+    }
   }
 
   .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon {