表格单元格文本hover放大字体，如何避免单元格移位？

问题根源在于你给a:hover设置了position: absolute，这会让链接脱离文档流，同时字体放大后单元格没有预留足够空间，导致列和表格整体移位。以下是修复方案：

修改后的CSS代码 #

#footer h1 {
  font-size: 35px;
  margin: -145px 0px 0px 150px;
}

#footer div table {
  color: black;
  text-align: left;
  width: 800px;
  height: 220px;
  margin: 0px 115px 0px 0px;
  font-size: 14px;
}

#footer div table tr td {
  padding: 5px 10px; /* 增加内边距，预留文本放大空间 */
  opacity: 70%;
  min-width: 120px; /* 固定最小列宽，防止列宽变化 */
  min-height: 24px; /* 固定最小行高，防止行高变化 */
}

#footer div table tr td a {
  text-decoration: none;
  color: black;
  display: inline-block; /* 稳定链接的尺寸计算 */
  transition: all 0.5s ease;
}

#footer div table tr td a:hover {
  color: red;
  font-size: 120%;
}

关键修复点 #

• 移除a:hover中的position: absolute、top、left属性，让链接保持在正常文档流内，避免布局错乱
• 给td设置min-width和min-height，确保单元格有足够空间容纳放大后的文本，不会拉伸移位
• 增加td的内边距，让文本与单元格边框保持合适间距，放大后不会拥挤
• 给a设置display: inline-block，确保其尺寸计算稳定，过渡动画更平滑

HTML代码无需修改，保持原结构即可。

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