Angular中Kendo Grid设置列宽后部分列无法显示的问题求助

我在Angular项目中使用Kendo Grid时遇到显示异常：设置列宽后，表格前两列（Nutzername、Vorname）被隐藏在元素左侧，仅能在开发者工具中查看，当前可见首列是Nachname。移除所有列的width属性后，所有列虽能显示但会被挤压，因此我添加了列宽和自定义CSS来实现水平滚动，却出现了列偏移的问题。

相关代码 #

HTML代码 #

<mat-card class="f-layoutcard lage-table">
  <kendo-grid
    class="f-table f-searchable"
    [data]="mitarbeiterListForKendoGrid"
    [loading]="loading$ | async"
    [scrollable]="'scrollable'"
    [selectable]="selectableSettings"
    #kendoGridInstance="kendoGrid"
  >
    <kendo-grid-column field="name" title="Nutzername" [width]="150">
    </kendo-grid-column>
    <kendo-grid-column field="vorname" title="Vorname" [width]="150">
    </kendo-grid-column>
    <kendo-grid-column field="nachname" title="Nachname" [width]="150">
    </kendo-grid-column>
    <kendo-grid-column
      field="einsatzOeName"
      title="Einsatz-OE"
      [width]="150"
    >
    </kendo-grid-column>
    <kendo-grid-column
      field="dienstgradName"
      title="Dienstgrad"
      [width]="150"
    >
    </kendo-grid-column>
    <kendo-grid-column
      field="baoStandardFunktionName"
      title="Standardfunktion"
      [width]="150"
    >
    </kendo-grid-column>
    <kendo-grid-column
      field="name"
      title="BAO-Organisation"
      [width]="150"
    >
    </kendo-grid-column>
    <kendo-grid-column field="name" title="Aktion" [width]="150">
    </kendo-grid-column>
    <sh-util-kendo-grid-custom-messages>
    </sh-util-kendo-grid-custom-messages>
    <kendo-grid-messages
      noRecords="Keine Datensätze verfügbar."
    ></kendo-grid-messages>
  </kendo-grid>
</mat-card>

CSS代码 #

.lage-table {
  overflow-x: scroll; /* 目标是让表格可水平滚动 */
}
::ng-deep .f-table {
  min-width: 100%;
}

问题原因 #

• 自定义的::ng-deep .f-table { min-width: 100%; }与Kendo Grid的scrollable="scrollable"布局机制冲突，Grid自身会计算容器宽度，这个额外的min-width设置导致表格内部出现偏移。
• 外层容器的滚动设置本身没问题，但内部样式打乱了Grid表头与内容的滚动对齐逻辑，最终造成前几列被隐藏。

解决方法 #

• 移除冲突样式：删除::ng-deep .f-table { min-width: 100%; }，让Kendo Grid自行处理容器宽度。
• 保留滚动设置：保留.lage-table的overflow-x: scroll，确保外层容器支持水平滚动。
• 可选：设置容器最小宽度：如果希望表格在小屏幕下触发滚动，大屏幕下正常展开，可以给mat-card设置等于所有列宽总和的min-width：

.lage-table {
  overflow-x: scroll;
  min-width: 1200px; /* 8列 × 150px = 1200px */
}

• 排查全局样式影响：检查是否有其他全局CSS或父容器样式（比如padding、text-align）干扰了Grid布局。

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