fix(material/table): style no data row properly

goldens/cdk/table/index.api.md

@@ -249,7 +249,11 @@ export class CdkHeaderRowDef extends BaseRowDef implements CanStick, OnChanges {
 export class CdkNoDataRow {
     constructor(...args: unknown[]);
     // (undocumented)
-    _contentClassName: string;
+    _cellClassNames: string[];
+    // (undocumented)
+    _cellSelector: string;
+    // (undocumented)
+    _contentClassNames: string[];
     // (undocumented)
     templateRef: TemplateRef<any>;
     // (undocumented)

goldens/material/table/index.api.md

@@ -130,8 +130,9 @@ export class MatHeaderRowDef extends CdkHeaderRowDef {
 
 // @public
 export class MatNoDataRow extends CdkNoDataRow {
+    constructor();
     // (undocumented)
-    _contentClassName: string;
+    _cellSelector: string;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatNoDataRow, "ng-template[matNoDataRow]", never, {}, {}, never, never, true, never>;
     // (undocumented)

src/cdk/table/row.ts

@@ -366,7 +366,9 @@ export class CdkRow {}
 export class CdkNoDataRow {
   templateRef = inject<TemplateRef<any>>(TemplateRef);
 
-  _contentClassName = 'cdk-no-data-row';
+  _contentClassNames = ['cdk-no-data-row', 'cdk-row'];
+  _cellClassNames = ['cdk-cell', 'cdk-no-data-cell'];
+  _cellSelector = 'td, cdk-cell, [cdk-cell], .cdk-cell';
 
   constructor(...args: unknown[]);
   constructor() {}

src/cdk/table/table.ts

@@ -1419,7 +1419,13 @@ export class CdkTable<T>
       // to figure out which one to add it to when there are multiple.
       if (view.rootNodes.length === 1 && rootNode?.nodeType === this._document.ELEMENT_NODE) {
         rootNode.setAttribute('role', 'row');
-        rootNode.classList.add(noDataRow._contentClassName);
+        rootNode.classList.add(...noDataRow._contentClassNames);
+
+        const cells = rootNode.querySelectorAll(noDataRow._cellSelector);
+
+        for (let i = 0; i < cells.length; i++) {
+          cells[i].classList.add(...noDataRow._cellClassNames);
+        }
       }
     } else {
       container.clear();

src/material/table/row.ts

@@ -130,5 +130,11 @@ export class MatRow extends CdkRow {}
   providers: [{provide: CdkNoDataRow, useExisting: MatNoDataRow}],
 })
 export class MatNoDataRow extends CdkNoDataRow {
-  override _contentClassName = 'mat-mdc-no-data-row';
+  override _cellSelector = 'td, mat-cell, [mat-cell], .mat-cell';
+
+  constructor() {
+    super();
+    this._contentClassNames.push('mat-mdc-no-data-row', 'mat-mdc-row', 'mdc-data-table__row');
+    this._cellClassNames.push('mat-mdc-cell', 'mdc-data-table__cell', 'mat-no-data-cell');
+  }
 }

src/material/table/testing/cell-harness.ts

@@ -56,7 +56,7 @@ export abstract class _MatCellHarnessBase extends ContentContainerComponentHarne
 /** Harness for interacting with an Angular Material table cell. */
 export class MatCellHarness extends _MatCellHarnessBase {
   /** The selector for the host element of a `MatCellHarness` instance. */
-  static hostSelector = '.mat-mdc-cell';
+  static hostSelector = '.mat-mdc-cell:not(.mat-no-data-cell)';
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a table cell with specific attributes.

src/material/table/testing/row-harness.ts

@@ -61,7 +61,7 @@ export abstract class _MatRowHarnessBase<
 /** Harness for interacting with an Angular Material table row. */
 export class MatRowHarness extends _MatRowHarnessBase<typeof MatCellHarness, MatCellHarness> {
   /** The selector for the host element of a `MatRowHarness` instance. */
-  static hostSelector = '.mat-mdc-row';
+  static hostSelector = '.mat-mdc-row:not(.mat-mdc-no-data-row)';
   protected _cellHarness = MatCellHarness;
 
   /**