React组件中HTML表格行(TR)不响应CSS限制内容高度如何解决？

问题原因 #

1. HTML表格的<tr>行元素本身不支持overflow属性，浏览器默认表格布局模型下，行高会随内容自动撑开，你给<tr>设置的height仅作为最小高度生效，内容超出时仍会被撑高。
2. 表格默认table-layout属性为auto，会自动根据单元格内容调整宽高，你设置的固定尺寸规则不会优先生效。
3. 即使直接给<td>单元格设置overflow也不会生效，因为<td>默认的display: table-cell属性本身不支持溢出裁剪规则。

解决方法 #

方案1：单元格内套容器（推荐，兼容性最好） #

不需要改动表格原有布局属性，只需给需要固定高度的单元格内部套一层容器元素，给容器设置固定高度和溢出隐藏即可，不会破坏表格原有的对齐、布局特性。
修改示例：

1. 调整App.js中的单元格结构：

<td>
  <div className="cell-content">
    bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj 
    bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj 
    {/* 原有内容全部放在这个div内 */}
  </div>
</td>

2. 在styles.css中添加对应样式：

.cell-content {
  /* 按需求设置固定高度 */
  height: 20px;
  overflow: hidden;
  /* 可选配置：如果需要文字超出显示省略号，添加以下两行 */
  /* white-space: nowrap;
  text-overflow: ellipsis; */
  /* 可选配置：如果需要允许文字换行后超出再隐藏，添加以下行 */
  /* word-break: break-all; */
}

方案2：修改表格布局属性（无需改动HTML结构） #

如果不想修改JSX结构，可以调整CSS配置实现效果，但要注意可能影响原有表格的自适应特性：

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  /* 新增：开启固定表格布局，按设置的尺寸渲染，不随内容自适应 */
  table-layout: fixed;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  padding: 8px;
  /* 新增：设置固定高度、溢出隐藏 */
  height: 20px;
  overflow: hidden;
  /* 可选：强制内容换行，避免单行文字超出单元格宽度 */
  word-break: break-all;
}

/* 移除原有给tr设置的height、overflow属性，该配置不生效 */
#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

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