移动端表格错乱的根本原因是未正确使用 table-layout: fixed 及配套宽度控制逻辑：需配合 width: 100%、百分比列宽、border-collapse: collapse 和 white-space: normal 等设置，才能实现小屏下稳定布局。

移动端表格错乱、列宽不均、文字挤成一团——根本原因不是内容太多，而是没用对 table-layout 和配套的宽度控制逻辑。

table-layout: fixed 是表格布局的开关

默认情况下浏览器按内容撑开列宽，一到小屏幕就溢出。启用 table-layout: fixed 后，浏览器只看第一行（或 <col>）定义的宽度，不再动态计算，这是所有可控布局的前提。

• 必须和 width: 100% 配合使用，否则 fixed 无实际约束力
• 一旦启用，<td> 内容超长会自动截断或换行，需配合 <code>white-space 和 overflow 控制
• IE8+ 支持，现代浏览器无兼容问题

给 th 或 td 设置宽度时用百分比更稳妥

像素值在不同设备上容易失衡；百分比能随容器缩放，且总和为 100% 时能严丝合缝填满整行。


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
• 推荐写法：th:nth-child(1) { width: 25%; }、th:nth-child(2) { width: 30%; }
• 避免混用 px 和 %，会导致最后一列被“挤掉”或留白
• 如果用了 <colgroup></colgroup>，优先在 <col> 上设 width，它比 th 更早参与布局计算

border-collapse: collapse 要加在 table 上，不是 th/td

很多人把 border-collapse: collapse 写在 th, td 里，结果边框还是双线——这个属性只对 table 元素生效，作用是合并相邻边框。

• 正确写法：table { border-collapse: collapse; }
• 搭配 border: 1px solid #ccc 才能真正呈现单线边框效果
• 若漏掉这句，即使每个单元格都设了边框，移动端也会因渲染差异出现粗细不一、错位的“伪双线”

移动端字体和内边距要单独收紧

桌面端看着刚好，放到手机上立刻糊成一片。这不是 CSS 失效，是空间不足导致视觉密度失控。

• 建议起手设：table { font-size: 14px; }，再根据实际内容微调到 12–13px
• th, td { padding: 6px 8px; } 比默认的 10px+ 更适合小屏，尤其避免左右 padding 过大压缩列宽
• 别依赖 cellpadding 这种 HTML 属性，它已被废弃，且无法响应式

最常被跳过的其实是 white-space: normal ——当某列内容全是长英文或数字时，table-layout: fixed 会让它硬生生撑破设定宽度，必须显式重置换行行为。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！