Vaadin Grid占满屏幕高度场景下的边框样式适配方案问询

以下两种方案均为纯CSS实现，无需编写JS逻辑，可同时适配行不足留白、行过多滚动两种场景。

方案1：外层边框+背景统一（最简便） #

改造成本最低，不需要调整原有表头、表体的样式逻辑：

• 给vaadin-grid添加基础样式，保留原有占满可用高度的设置即可

vaadin-grid {
  /* 此处保留你原有实现全高的代码，比如 flex: 1、height: calc(100vh - 自定义偏移量) 等 */
  border: 1px solid #d0d0d0; /* 替换为实际需要的边框色值 */
  border-radius: 4px; /* 不需要圆角可删除该行 */
  overflow: hidden;
  background: #ffffff; /* 和表格行的默认背景色保持完全一致 */
}

• 空白区域和行背景统一后不会出现突兀感，外层边框无论表体高度多少都会完整显示。

方案2：表头表体分离边框（适配自定义样式需求） #

如果你需要边框严格和表头、表体绑定，不想用外层整体边框，可使用该方案：

• 保留你原有给thead、tbody设置的边框，仅新增兜底样式即可

/* 你原有给表头加边框的代码，直接保留 */
vaadin-grid::part(header) {
  border: 1px solid #d0d0d0;
  border-bottom: none;
}
/* 你原有给表体加边框的代码，直接保留 */
vaadin-grid::part(body) {
  border-inline: 1px solid #d0d0d0;
}
/* 新增兜底底部边框，无论表体高度多少都会固定显示 */
vaadin-grid {
  border-bottom: 1px solid #d0d0d0;
  overflow: hidden;
}
/* 可选补充：表体高度超出出现滚动条时，隐藏最后一行的底部边框，避免和grid兜底边框重复 */
vaadin-grid::part(last-row) {
  border-bottom: none;
}

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