为什么我的HTML表格不显示横向滚动条，仅出现纵向滚动条？

问题根源 #

• 表格元素#employee_details设置了position: absolute，脱离父容器#emp的文档流，导致父容器的overflow滚动规则无法对表格生效
• 滚动属性同时分配给父容器和表格，逻辑冲突；且表格自身宽度（85em）远大于父容器宽度（40em），但脱离文档流后父容器无法检测到表格的溢出宽度，不会触发横向滚动

修复代码 #

修改后CSS #

/* 父容器作为滚动容器，定位规则移到父容器 */
#emp {
  position: absolute;
  top: 15em;
  left: 20em;
  width: 40em;
  height: 20em;
  /* 自动识别x/y轴溢出，显示对应滚动条 */
  overflow: auto;
}

/* 表格移除绝对定位、冗余的滚动和宽高设置 */
#employee_details {
  border: 2px solid;
  /* 可选：固定列宽，避免单元格内容自动压缩导致宽度不足无法触发滚动 */
  table-layout: fixed;
  /* 可选：设置最小宽度，保证即使内容较少也能撑开宽度触发横向滚动 */
  min-width: 85em;
  width: 100%;
}

HTML无需修改，保持原有结构即可 #

<div id="emp"><table id="employee_details" border="2"></table></div>

补充说明 #

• 如果你的表格内容本身宽度已经超过父容器的40em，可以移除min-width: 85em配置，滚动条会自动触发
• 如果需要保留表格的自适应列宽特性，移除table-layout: fixed即可

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