table-layout: fixed 是表格自适应的硬性前提，不加则任何宽度控制都不可靠；启用后列宽只认<col>或首行th/td的width声明，内容再长也强制换行，需配合word-wrap: break-word等处理溢出。

table-layout: fixed 是表格自适应的硬性前提

不加 table-layout: fixed，任何宽度控制都不可靠。浏览器默认用 table-layout: auto，它会扫描所有单元格内容再反推列宽，导致在小屏下文字撑破、列宽跳变、响应式断点失效。

启用后，列宽只认 col 或 th/td 的 width 声明，内容再长也强制换行——这是实现“固定列+弹性列”结构的基础。

• 必须配合 word-wrap: break-word 或 overflow-wrap: break-word 作用于 td，否则中文/长URL仍可能溢出
• 禁止对 tr 设 height，否则行高会被截断，内容显示不全
• 若用 vw 或 rem 设列宽（如 width: 20vw），需确认父容器宽度已由媒体查询约束，否则大屏下仍过宽

混合单位列宽比纯百分比更可控

全用 width: 20% 看似简单，但实际中：窄屏下多列挤压导致文字密集难读；宽屏下空隙过大，视觉失衡。更稳妥的是“关键列定宽 + 主内容列弹性”。

例如三列表格：序号（固定 60px）、状态（固定 100px）、说明（剩余空间）：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

table { table-layout: fixed; width: 95%; }
col:nth-child(1) { width: 60px; }
col:nth-child(2) { width: 100px; }
col:nth-child(3) { width: 1fr; }

• col 元素比在 td 上写 width 更干净，避免重复声明
• 固定列优先用 rem（如 3.75rem 对应 60px），便于后续统一缩放
• 1fr 在表格中需配合 display: grid 才生效；纯表格建议用 width: auto 或 width: 100% 配合 table-layout: fixed

小屏下表格横向滚动比强行压缩更合理

当分辨率低于 480px，列数 ≥ 4 时，强行缩列宽或改堆叠布局（如 display: block）常引发新问题：行数据错位、操作按钮消失、筛选控件被裁切。

直接启用横向滚动，反而保真度更高：

• 给 table 外层套一层 div，设 overflow-x: auto 和 width: 100%
• 禁用 -webkit-overflow-scrolling: touch（iOS 16+ 已废弃，且可能干扰惯性滚动）
• 避免给 table 设 min-width，否则滚动条失效；可用 min-width: max-content 替代
• 滚动容器加 scrollbar-width: none（Firefox）和 ::-webkit-scrollbar { display: none; } 保持简洁

移动端点击区域小是隐藏雷区

表格在手机上最常被忽略的问题不是“看不清”，而是“点不中”。td 默认 padding 小、文字行高紧，手指点击命中率低，尤其带复选框或操作按钮的行。

• 确保每行可点区域高度 ≥ 44px（iOS 最小触控建议），可用 min-height: 44px + padding: 8px 12px
• 操作列按钮不要仅靠 font-size 控制大小，必须设 min-width 和 min-height
• 禁用 user-select: none 在整行上，否则长按会触发文本选择而非点击
• 测试时真机连点 10 次，观察是否偶发无响应——这往往暴露了 pointer-events 或 z-index 覆盖问题

亚像素对齐在表格里虽不如 Grid 明显，但当 border-collapse: collapse 遇上非整数 DPR 时，细边框仍会虚化；此时把 border-width 改为 0.0625rem（对应 1px @16px base）比写死 1px 更稳。