fix(material/table): switch back to class-based styling for flex tables

In an earlier PR we switched the flex-based table styles to target the tag names, rather than classes in order to support flex tables in MDC. The problem with targeting tag names is that it doesn't allow our styles to be applied to other elements within the table. E.g. in #22349 the user isn't able to target the "no data" row.

These changes switch back to targeting classes and add some styles to prevent the flex-specific styles from bleeding into the table-based ones.

Fixes #22349.

Author: crisbeto

src/material-experimental/mdc-table/table.scss

@@ -3,8 +3,11 @@
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/table/table-flex-styles';
 
+.mat-mdc-table:not(table) {
+  @include table-flex-styles.private-table-flex-styles('mat-mdc');
+}
+
 @include mdc-data-table.core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
-@include table-flex-styles.private-table-flex-styles();
 
 .mat-mdc-table-sticky {
   // Note that the table can either set this class or an inline style to make something sticky.
@@ -24,6 +27,11 @@
 // MDC table rows are styled with a top border, whereas our legacy flex table styles rows with
 // a bottom border. Remove the bottom border style from the rows and let MDC display its top
 // border.
-mat-row.mat-mdc-row, mat-header-row.mat-mdc-header-row, mat-footer-row.mat-mdc-footer-row {
+mat-row.mat-mdc-row,
+mat-header-row.mat-mdc-header-row,
+mat-footer-row.mat-mdc-footer-row,
+.mat-mdc-table:not(table) .mat-mdc-row,
+.mat-mdc-table:not(table) .mat-mdc-header-row,
+.mat-mdc-table:not(table) .mdc-mdc-footer-row {
   border-bottom: none;
 }

src/material/table/_table-flex-styles.scss

@@ -4,26 +4,21 @@ $row-height: 48px;
 $row-horizontal-padding: 24px;
 
 // Only use tag name selectors here since the styles are shared between MDC and non-MDC
-@mixin private-table-flex-styles {
-  mat-table {
-    display: block;
-  }
+@mixin private-table-flex-styles($prefix) {
+  display: block;
 
-  mat-header-row {
+  .#{$prefix}-header-row {
     min-height: $header-row-height;
   }
 
-  mat-row, mat-footer-row {
+  .#{$prefix}-row, .#{$prefix}-footer-row {
     min-height: $row-height;
   }
 
-  mat-row, mat-header-row, mat-footer-row {
+  .#{$prefix}-row, .#{$prefix}-header-row, .#{$prefix}-footer-row {
     display: flex;
-    // Define a border style, but then widths default to 3px. Reset them to 0px except the bottom
-    // which should be 1px;
-    border-width: 0;
     border-bottom-width: 1px;
-    border-style: solid;
+    border-bottom-style: solid;
     align-items: center;
     box-sizing: border-box;
 
@@ -37,7 +32,7 @@ $row-horizontal-padding: 24px;
     }
   }
 
-  mat-cell, mat-header-cell, mat-footer-cell {
+  .#{$prefix}-cell, .#{$prefix}-header-cell, .#{$prefix}-footer-cell {
     // Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
     // elements like ripples or badges from throwing off the layout (see #11165).
     &:first-of-type {
@@ -59,7 +54,7 @@ $row-horizontal-padding: 24px;
     }
   }
 
-  mat-cell, mat-header-cell, mat-footer-cell {
+  .#{$prefix}-cell, .#{$prefix}-header-cell, .#{$prefix}-footer-cell {
     flex: 1;
     display: flex;
     align-items: center;

src/material/table/_table-theme.scss

@@ -14,13 +14,13 @@
   }
 
   .mat-table thead, .mat-table tbody, .mat-table tfoot,
-  mat-header-row, mat-row, mat-footer-row,
+  .mat-header-row, .mat-row, .mat-footer-row,
   [mat-header-row], [mat-row], [mat-footer-row],
   .mat-table-sticky {
     background: inherit;
   }
 
-  mat-row, mat-header-row, mat-footer-row,
+  .mat-row, .mat-header-row, .mat-footer-row,
   th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
     border-bottom-color: theming.get-color-from-palette($foreground, divider);
   }

src/material/table/table.scss

@@ -1,7 +1,9 @@
 @use '../core/style/vendor-prefixes';
 @use './table-flex-styles';
 
-@include table-flex-styles.private-table-flex-styles();
+.mat-table:not(table) {
+  @include table-flex-styles.private-table-flex-styles('mat');
+}
 
 // Native HTML table structure
 table.mat-table {