能否设置display:table-row的<tr>高度？grid.js表格行拉伸问题

当Grid.js设置固定高度（如80vh）且数据行数少于分页限制时，表格行会被自动拉伸填满<tbody>，这是因为表格布局的默认特性——会优先分配空间填满容器，直接给.gridjs-tr设置height或max-height（哪怕加!important）都没用，因为display: table-row元素的高度属性只是建议值，不会被强制生效。

以下两种可行的解决方法：

方法一：修改<tbody>的布局模式 #

把<tbody>改成弹性布局，让行保持自身高度，剩余空间留空：

.gridjs-tbody {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gridjs-tr {
  flex-shrink: 0; /* 防止行被压缩，固定自身高度 */
  line-height: 20px;
}

这种方式直接打破表格的默认布局逻辑，行不会再被拉伸，剩余空间会留在表格底部，不影响正常行的显示。

方法二：添加空白占位行 #

如果不想改动布局，可以在数据中补充空白行，填满分页限制的行数，再隐藏这些空白行的视觉效果：

new gridjs.Grid({
  columns: ["Name", "Email", "Phone Number"],
  data: () => {
    const rawData = [["John", "john@example.com", "(353) 01 222 3333"]];
    const pageSize = 5; // 对应你的分页每页显示数
    const emptyRows = Array(pageSize - rawData.length).fill(["", "", ""]);
    return [...rawData, ...emptyRows];
  },
  height: '80vh'
}).render(document.getElementById("coolTable"));

然后给空白行加样式，避免影响视觉和交互：

.gridjs-tr:has(td:empty) {
  opacity: 0;
  pointer-events: none;
}

关键原因说明 #

表格布局中，<tbody>作为display: table-row-group元素，会自动分配子行的高度以填满自身空间，table-row元素的height属性无法覆盖这种分配逻辑，必须通过修改布局或补充内容的方式绕过这个特性。

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