Table 6与Table 7无法并排显示问题排查求助

故障原因 #

1. 盒子模型计算导致宽度溢出
   你给section设置了width: 50%; float: left;，但默认box-sizing: content-box规则下，section的宽度仅计算内容区域，内部表格的总宽度（含边框、内边距）一旦超过section的内容区宽度，就会撑开section，导致两个section总宽度超出父容器，触发换行，视觉上表现为Table6偏移至右侧：

   • Table6（.szesc）的两个单元格总宽度为200px*2=400px，加上20px的外围边框，整体宽度达440px，若section内容区宽度小于440px，必然被撑开；
   • Table7（.siedem）设置了padding:20px 50px和20px边框，进一步增加了自身宽度，加剧了布局溢出问题。

2. 浮动未被正确约束
   前四组表格的section已占据两行空间，但第五、第六个section因内部表格宽度溢出，无法维持50%的宽度占比，浮动布局逻辑被打破，最终导致错乱。

修复方案 #

步骤1：统一盒子模型 #

给所有元素添加box-sizing: border-box，让元素宽度计算包含边框和内边距，彻底避免内部内容撑开容器：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

步骤2：限制表格最大宽度 #

确保表格不会超出所在section的宽度范围：

section table {
  max-width: 100%;
  margin: 0 auto; /* 可选：让表格在section内居中对齐 */
}

步骤3：调整Table6单元格宽度（可选） #

如果想保留Table6的布局风格，可动态计算单元格宽度，适配section的50%宽度：

table.szesc td {
  width: calc(50% - 5px); /* 减去边框宽度，保证单元格总宽度不超出表格 */
  height: 100px;
}

关键修复后的CSS片段 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  float: left;
  width: 50%;
  margin: 50px 0;
}

section table {
  max-width: 100%;
  margin: 0 auto;
}

table.szesc td {
  width: calc(50% - 5px);
  height: 100px;
}

效果验证 #

应用上述修改后，Table6和Table7会被严格约束在各自的50%宽度section内，实现正常并排显示，不会再出现偏移和布局错乱问题。

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