Vaadin Flow中vaadin-grid仅在tbody区域显示滚动条可行吗？

要实现滚动条仅在tbody区域可见，核心思路是固定表头并让tbody容器单独滚动，具体通过CSS调整结合Grid的高度设置来实现：

步骤1：设置Grid固定高度 #

首先给Vaadin Grid设置一个固定高度，确保内容超出时能触发滚动。可以通过Java代码或CSS设置：

• Java代码方式：

grid.setHeight("400px"); // 根据需求调整高度值

• CSS方式：

vaadin-grid {
  height: 400px;
}

步骤2：添加自定义CSS样式 #

通过穿透Vaadin Grid的内部DOM结构，调整滚动行为：

/* 隐藏Grid自身的滚动条 */
vaadin-grid {
  overflow: hidden;
}

/* 让tbody所在的滚动容器显示垂直滚动条 */
vaadin-grid [part~="scrollable"] {
  overflow-y: auto;
}

/* 固定表头在顶部，避免滚动时跟随tbody移动 */
vaadin-grid [part~="header-row"] {
  position: sticky;
  top: 0;
  background-color: #ffffff; /* 匹配你的主题背景色，防止内容穿透 */
}

注意事项 #

• 不同Vaadin版本的内部DOM结构可能有细微差异，需确认part名称是否对应（Vaadin 24+版本上述样式适用）。
• 如果使用了自定义主题，可能需要调整背景色值以匹配整体风格。

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