React组件应用overflow:hidden等样式后表格首行内容与其他行不对齐

问题根因 #

你代码中首行第一个<td>内部嵌套的<div>设置了column-width多列布局属性，该属性会改变元素的基线计算逻辑，而<td>默认的垂直对齐规则是vertical-align: baseline，导致同<tr>下其他单元格的内容按基线对齐时出现错位。
同时你给<td>设置的max-width: 100px和给<div>设置的column-width: 150px本身存在逻辑冲突，列宽大于容器宽度，多列布局实际无法生效，反而引发了对齐异常。

排查思路 #

• 首先确认错位仅出现在首行，排除全局表格样式问题，定位首行独有的DOM结构和样式
• 逐个注释首行独有元素的CSS属性验证，注释掉column-width相关属性后对齐恢复正常，即可锁定根因

修复方案 #

你可以任选以下任意一种方案解决：

方案1：统一单元格垂直对齐规则（推荐，不影响原有布局逻辑） #

给所有表格单元格添加上对齐规则，覆盖默认的基线对齐，修改CSS如下：

#customers td {
  vertical-align: top;
}

方案2：移除无效的多列布局属性 #

如果你本身不需要多列展示效果，直接删除<div>上的多列布局相关代码即可：

tbody tr td div {
  height: 50px;
  overflow: hidden;
  /* 删除下面两行无效属性 */
  /* -webkit-column-width: 150px; */
  /* column-width: 150px; */
}

附加优化建议 #

如果你需要让<td>的max-width: 100px规则生效，可以给表格添加固定布局属性：

#customers {
  table-layout: fixed;
}

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