鼠标悬停表格单元格加边框时，如何避免改变其他单元格尺寸？

问题根源 #

默认CSS盒模型中，border 是额外计算在元素宽高之外的。当hover时给单元格添加4px边框，单元格实际尺寸会增加8px（左右/上下各4px），导致整个表格布局偏移。你尝试缩小max-width/max-height的方式无效，因为表格单元格的尺寸计算逻辑和普通块元素不同，max-width/max-height无法精准控制其实际显示尺寸。

两种可行解决方案 #

方案1：使用box-sizing: border-box #

将盒模型设置为边框盒，让border包含在元素的宽高范围内，不会额外撑大尺寸。同时可以简化CSS代码，用通用类名替代重复的单个类：

.td_index_intro {
  max-width: 500px;
  max-height: 300px;
  box-sizing: border-box; /* 核心：边框纳入元素尺寸计算 */
}

.td_index_intro:hover {
  border: 4px solid darkblue;
  cursor: pointer;
}

对应HTML统一class：

<table class="table_intro" style="margin-left:200px; margin-top:50px;border-spacing:20px">   
  <tr>
    <td class="td_index_intro">
      <img src="images/index_machovw.png" style="display:block;width:100%; height:100%">
    </td>
    <td class="td_index_intro">
      <img src="images/index_connect.png" style="display:block; width:100% ; height:100% ">
    </td>
  </tr>
  <tr>
    <td class="td_index_intro">
      <img src="images/index_docu.png" style="display:block; width:100% ; height:100%">
    </td>
    <td class="td_index_intro">
      <img src="images/index_admin.png" style="display:block; width:100% ; height:100%">
    </td>
  </tr>
</table>

方案2：提前设置透明边框 #

给单元格默认添加与hover时宽度一致的透明边框，hover时仅修改边框颜色，确保尺寸始终不变，避免布局偏移：

.td_index_intro {
  max-width: 500px;
  max-height: 300px;
  border: 4px solid transparent; /* 提前预留边框空间 */
}

.td_index_intro:hover {
  border-color: darkblue; /* hover时切换边框颜色 */
  cursor: pointer;
}

HTML部分与方案1一致，使用统一的td_index_intro类即可。

补充说明 #

• 表格单元格的尺寸受表格布局规则影响，使用通用类名可大幅减少重复代码，提升可维护性。
• 两种方案都能解决hover时尺寸变化的问题：box-sizing是通用型解决方案，适合大多数场景；透明边框方案更直接，不会引入盒模型设置可能带来的其他影响。

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