如何让单单元格HTML表格实现移动端响应式适配？

问题根源是你用连续下划线字符模拟的表单线条无法自动换行，会强行拉宽单元格，导致移动端出现横向滚动。下面是纯CSS解决方案，完全不用改现有HTML结构：

最终CSS代码 #

/* 让表格自适应屏幕宽度 */
table {
  max-width: 100%;
  width: 100%;
  border-collapse: collapse;
}

/* 单元格占满表格宽度，保留内边距 */
td {
  padding: 0 16px;
  width: 100%;
}

/* 统一段落样式和间距，替代空p元素的作用 */
p {
  text-align: left;
  margin: 8px 0;
}

/* 把下划线字符替换成CSS边框，自动适配宽度 */
/* 用:nth-of-type定位到对应位置的下划线p元素 */
p:nth-of-type(3),
p:nth-of-type(7) {
  border-bottom: 1px solid #000;
  height: 1.2em;
  overflow: hidden;
  color: transparent; /* 隐藏原来的下划线字符 */
}

关键说明 #

1. 表格宽度锁死：给table设置max-width:100%，确保它不会超出手机屏幕宽度。
2. 替换下划线实现：用CSS边框代替下划线字符，边框会自动跟着单元格宽度调整，不会撑出横向滚动。
3. 间距优化：给所有p元素设置统一的上下margin，替代原来的空p元素来控制行间距，布局更规整。
4. 精准定位下划线元素：因为不能改HTML，用nth-of-type直接定位到那两个带下划线字符的p元素，隐藏字符后用边框代替。

这样改完后，移动端视图里表格会自适应屏幕，下划线也会跟着容器宽度变化，彻底解决横向滚动问题。

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