如何用CSS选择Angular-Material表格tbody并解决样式无效问题？

我来帮你解决这个Angular Material表格tbody样式的问题～

首先来说为什么你用.mat-table tbody或者table tbody不生效——这是因为Angular的**视图封装（View Encapsulation）**机制，它会给组件内的样式自动添加唯一的属性选择器，而Angular Material的表格内部元素（比如tbody）不在当前组件的DOM封装范围内，所以你的样式无法穿透过去。下面给你几个可行的解决方案：

方法1：使用:host ::ng-deep穿透样式（推荐） #

这是最常用的方式，既能穿透视图封装，又能通过:host限定样式只作用在当前组件内的表格，不会污染全局样式：

/* 在组件的.scss/.css文件中 */
:host ::ng-deep .mat-table tbody {
  /* 示例样式：设置tbody背景色和行高 */
  background-color: #fafafa;
  tr {
    height: 52px;
  }
}

如果你的表格是原生table标签结合Material指令的，也可以这样写：

:host ::ng-deep table tbody {
  border-top: 1px solid #e0e0e0;
}

方法2：关闭组件的视图封装 #

如果你的组件样式不需要隔离，可以直接关闭视图封装，这样写的样式就能直接作用到tbody上，但要注意给组件加个独特的类名，避免影响其他组件：

// 在组件装饰器中
@Component({
  selector: 'app-my-table',
  templateUrl: './my-table.component.html',
  styleUrls: ['./my-table.component.scss'],
  encapsulation: ViewEncapsulation.None // 关闭视图封装
})

然后在样式文件中：

.app-my-table .mat-table tbody {
  /* 你的样式 */
}

方法3：使用全局样式文件 #

把tbody的样式写到全局的styles.scss（或styles.css）里，这样肯定能生效，但缺点是会作用到所有页面的表格，适合全局统一的样式：

/* styles.scss */
.mat-table tbody {
  /* 全局样式 */
}

关于“能否将tbody包裹在div中”的问题 #

答案是不行，因为HTML的表格结构有严格的规范：tbody必须是<table>的直接子元素，不能被<div>或其他非表格相关标签包裹。如果强行包裹，浏览器会自动修正DOM结构（比如把div移到table外面），导致表格渲染异常，所以这种做法不符合HTML标准，不建议尝试。

内容的提问来源于stack exchange，提问作者Rahman Saleh