CSS表格长地址换行时首列单元格上移，如何设置规避？

表格单元格默认以baseline作为垂直对齐基准，当同行存放地址的长文本触发自动换行时，整行的文本基线会随行高动态下移。没有明确设置对齐规则的首列单元格，会跟着基线位置发生跳动，看起来就像是向上偏移了。你代码里用的百分比负边距，会随表格宽度、行高变化放大这种错位的视觉效果。

• 先做全局对齐约束，从根源消除基线跳动
  覆盖表格默认的基线对齐逻辑，给所有单元格、尤其是首列设置明确的垂直居中规则，替换原有相关样式：

.td-width {
  border-collapse: collapse;
}
.td-width tr td {
  vertical-align: middle;
  padding: 8px;
}
.td-width tr td:first-child{
  width: 100px;
  vertical-align: middle;
}

• 修正现有负边距的计算逻辑，减少动态误差
  你当前给.table-bottom、.table-top写的百分比边距，计算基准是父元素宽度，和行高没有关联，很容易在内容长度变化时出现位置偏移，建议替换为固定像素值的边距：

.table-bottom{
  margin-bottom: 12px;
}
.table-top{
  margin-top: 8px;
}

• 补充地址列的长文本换行规则
  给存放长地址的单元格增加换行约束，避免长文本撑破单元格边界，连带其他列发生错位：

/* 类名替换为你实际的地址单元格类即可 */
.td-width tr td.address-content {
  word-break: break-all;
  line-height: 1.5;
}

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