如何为React表格添加滚动条？设置max-height与overflow无效问题

步骤1：调整CSS样式 #

需要修改表格、表头和tbody的样式，让tbody可以独立滚动：

.table-journal {
  width: 100%;
  table-layout: fixed; /* 固定表格布局，保证表头与表格体列宽一致 */
  border-collapse: collapse; /* 可选，合并边框提升美观度 */
}

.table-head {
  display: block; /* 将thead转为块级元素 */
  width: 100%;
}

.table-body {
  display: block; /* 将tbody转为块级元素，使overflow生效 */
  max-height: 600px; /* 设置最大高度阈值 */
  overflow-y: auto; /* 垂直方向超出时自动显示滚动条 */
  width: 100%;
}

/* 强制表头与表格体的列宽对齐，避免错位 */
.table-head-row th,
.table-body-row td {
  width: 33.33%; /* 三列均分宽度，可根据实际需求调整 */
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid #ddd; /* 可选，添加行分隔线 */
}

步骤2：JSX结构无需修改 #

你现有的JSX结构可以直接适配上述样式，不需要调整DOM层级。

原设置无效的原因 #

• <table>默认display: table布局，overflow属性对该布局不生效，表格会自动根据内容撑开高度。
• <tbody>默认display: table-row-group，无法直接通过max-height和overflow控制滚动，必须转为block级元素才能触发滚动逻辑。
• table-layout: fixed是核心配置，它能强制表头与tbody的列宽保持一致，避免滚动时出现列错位问题。

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