HTML表格单元格内Div元素超出容器边界：求原因与解决方案

嘿，这个布局坑我之前也踩过，太闹心了！咱们先把根源说清楚：

你给<div>设置了width: 100%，这个100%指的是它的内容宽度等于父容器（也就是<td>）的宽度，但你还给div加了margin: 10px——左右margin加起来20px，所以div的总宽度就变成了100% + 20px，自然就撑破了td的红色边框。这是浏览器默认盒模型的规则：width只计算内容区域，margin、border、padding都要额外加在外面。

下面给你几个实用的修复办法，按需选择：

方法1：去掉div的width:100%（最简单直接） #

块级元素默认会自动填满父容器的可用宽度，完全没必要给div设置width:100%。删掉这个属性后，div会自动计算宽度为「td宽度 - 左右margin」，完美贴合容器：

table{ width: 80%; }
#text_status_line{ 
  margin: 10px; 
  padding: 10px; 
  /* 删掉width:100% */
  background-color: #ddd; 
}

HTML不需要改动，灰色背景立刻就会乖乖待在红色边框里。

方法2：用box-sizing调整盒模型（适合必须固定宽度的场景） #

如果你一定要保留width:100%，可以给div加上box-sizing: border-box，让width属性包含padding和border（注意：margin还是不包含在width里）。这时候建议把div的margin转移到td上，避免超出：

table{ width: 80%; }
td {
  border: 1px solid red;
  padding: 10px; /* 把div的margin移到td上 */
}
#text_status_line{ 
  padding: 10px; 
  width: 100%; 
  box-sizing: border-box; /* 关键属性 */
  background-color: #ddd; 
  margin: 0; /* 去掉div的margin */
}

这样设置后，div的width:100%会包含自身的padding，加上td的padding，既满足了间距需求，又不会超出边框。

方法3：给td加overflow:hidden（应急遮丑方案） #

如果上面两种方法都不适用，你可以给td加上overflow:hidden，强制裁剪超出的部分，但这只是临时解决，不是根源修复，除非万不得已不推荐：

<td style="border: 1px solid red; overflow:hidden;">
  <div id="text_status_line">Some text</div>
</td>

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