如何在Tanstack Table中设置固定行高并解决行高拉伸问题？

问题原因分析 #

你遇到的行高被拉伸情况，核心原因是表格容器或父元素的布局强制表格填满高度，当数据量少时，浏览器会自动拉伸表格行填充剩余空间。直接给<tr>/<th>设行高无效，通常是因为父容器高度优先级更高，或者表格默认布局模式（table-layout: auto）导致行高被覆盖。

实现方案 #

1. 控制容器高度，避免强制拉伸

如果不需要表格填满整个容器，直接移除容器的height: 100%或flex: 1属性，让表格自适应内容高度。如果必须保留容器固定高度，给容器添加滚动条，让内容超出时滚动：

.table-container {
  height: 600px; /* 按需设置固定高度 */
  overflow-y: auto; /* 内容超出时垂直滚动 */
}

2. 用CSS强制固定行高

通过CSS给表格、行、单元格设置明确的高度限制，禁用自动拉伸：

/* 表格基础配置 */
.tanstack-table {
  table-layout: fixed; /* 固定表格布局，避免列宽变化影响行高 */
  border-collapse: collapse;
  width: 100%;
}

/* 固定表头和数据行的高度 */
.tanstack-table th,
.tanstack-table tr {
  height: 50px; /* 自定义行高，按需调整 */
  min-height: 50px;
  max-height: 50px;
}

/* 单元格样式，防止文本换行撑高 */
.tanstack-table td,
.tanstack-table th {
  padding: 8px 12px;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超长文本显示省略号 */
}

3. 虚拟滚动场景下的配置（如果使用）

如果开启了Tanstack Table的虚拟滚动功能，需要在表格配置里同步设置行高，确保虚拟滚动计算和实际样式一致：

const table = useReactTable({
  columns,
  data,
  enableRowVirtualization: true,
  rowVirtualizerOptions: {
    rowHeight: 50, // 必须和CSS中设置的行高保持一致
  },
});

4. 排查父元素的flex布局冲突

检查表格的所有父元素，如果父元素用了display: flex，默认的align-items: stretch会拉伸表格，导致行高被强制填充。修改为align-items: flex-start即可：

.table-parent-container {
  display: flex;
  align-items: flex-start; /* 取消子元素拉伸 */
}

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