嘿，这个需求我之前刚好做过，给你分享一套靠谱的实现方法，完美匹配你要的「固定列+比例列随页面缩放自适应」要求，一步步来：

1. 模板基础配置 #

先在组件模板里定义Grid结构，给不同列加上自定义类名，方便后续用CSS精准控制：

<kendo-grid
  [data]="yourGridData"
  style="width: 100%;"
  scrollable="none" <!-- 不需要横向滚动就加这个，需要的话换成"scrollable"再调整样式 -->
>
  <!-- 固定宽度50px的列 -->
  <kendo-grid-column 
    field="id" 
    title="ID" 
    class="fixed-column"
  ></kendo-grid-column>
  <!-- 占剩余空间40%的列 -->
  <kendo-grid-column 
    field="name" 
    title="名称" 
    class="flex-column-40"
  ></kendo-grid-column>
  <!-- 占剩余空间60%的列 -->
  <kendo-grid-column 
    field="description" 
    title="描述" 
    class="flex-column-60"
  ></kendo-grid-column>
</kendo-grid>

记得给Grid设置width: 100%，让它占满父容器宽度，才能跟着页面缩放响应。

2. CSS核心样式（关键步骤！） #

Kendo Grid默认是固定表格布局，我们需要穿透样式修改布局逻辑，用flex实现比例分配。在组件样式文件里添加：

/* 取消Kendo默认的固定表格布局，让flex规则生效 */
::ng-deep .k-grid {
  table-layout: auto !important;
}

/* 把表头和内容行改成flex容器，确保列能按比例分配空间 */
::ng-deep .k-grid-header tr,
::ng-deep .k-grid-content tr {
  display: flex;
  width: 100%;
}

/* 固定列：锁定宽度50px，不参与伸缩 */
::ng-deep .fixed-column,
::ng-deep .fixed-column > .k-cell-inner {
  flex: 0 0 50px;
  min-width: 50px;
  max-width: 50px;
}

/* 40%比例列：flex-grow设为4，和另一列的6保持4:6的分配比例 */
::ng-deep .flex-column-40,
::ng-deep .flex-column-40 > .k-cell-inner {
  flex: 4 1 0%;
  min-width: 150px; /* 可选：设置最小宽度，防止窗口过窄时列内容挤压变形 */
}

/* 60%比例列：flex-grow设为6，和上一列的4对应比例 */
::ng-deep .flex-column-60,
::ng-deep .flex-column-60 > .k-cell-inner {
  flex: 6 1 0%;
  min-width: 200px; /* 可选：同上，根据业务需求调整 */
}

3. 额外注意事项 #

• 如果需要横向滚动，把scrollable="none"改成scrollable="scroll"，同时给.k-grid-content添加overflow-x: auto，确保滚动逻辑正常。
• ::ng-deep用来穿透Angular的样式隔离，如果你用Angular 12+，也可以把这些样式写在全局styles.css里，就不需要加::ng-deep了。
• 给比例列设置min-width是个实用小技巧，避免窗口缩到极小时列内容无法正常显示。

这样设置后，页面宽度变化时，固定列会保持50px不动，另外两列会自动按4:6的比例分配剩余空间，完全符合你的预期~

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