打开时垫日期选择器溢出

Question

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

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

Answer 1

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

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;
}