Mat Date Picker 打开时溢出答案

【问题标题】：Mat Date Picker overflows when openedMat Date Picker 打开时溢出
【发布时间】：2021-05-08 23:52:39
【问题描述】：

在我的 Angular 项目中，我在多个地方使用了mat date picker。最近我开始看到这个问题（不确定是什么原因造成的），打开时 mat 日期选择器溢出。我在整个应用程序中看到了这个问题，而不仅仅是在一个地方。不知道怎么形容，附上截图供参考。我无法在 StackBlitz 中重现这一点，因为这是特定于我的应用程序的。我正在使用 Angular 和 Material 11.1.2

更新：进一步挖掘后，我发现mat-calendar-table class 实际上越界并导致溢出

【问题讨论】：

标签： angular angular-material angular-components angular11

【解决方案1】：

检查你的全局样式，检查是否有任何全局样式到tr或td，尤其是td。

【讨论】：

【解决方案2】：

基于此issue 将table-layout: fixed; 添加到 styles.scss 文件中的表标记修复了我的问题

table
{
  table-layout: fixed !important;
  width: 100% !important; 
}

如果您还使用mat-table 并且不想修复 mat-table 布局，请将以下 css 添加到 styles.scss

table
{
  table-layout: fixed !important;
  width: 100% !important;
}

.mat-table
{
  table-layout: auto !important;
  width: 100% !important;
}

【讨论】：