根本原因是display: table在移动端强制撑宽容器使overflow-x失效；须改用display: grid或保留table时加table-layout: fixed、min-width约束、-webkit-overflow-scrolling: touch，并确保外层容器width: 100%。
移动端表格横向滚动不生效，怎么修？
根本原因是 display: table 在移动端会强制撑开容器宽度，让 overflow-x: auto 彻底失效。哪怕你给父容器加了 width: 100% 和 overflow-x: scroll，内部单元格依然会把整行拉宽，滚动条出现但拖不动内容。
必须放弃原生 <table> 结构或至少改写外层容器的 display 类型：
<ul>
<li>用 <code>display: grid 替代 display: table，天然支持列宽约束和滚动嵌套
<table> 标签，得加 <code>table-layout: fixed + 显式设置 width 或 max-width
min-width: 0（不是 width: 0），防止文本撑宽width: 100%，不能只靠 max-width；iOS Safari 还要加 -webkit-overflow-scrolling: touch 提升流畅度Grid 列数在小屏上错乱或挤成一团，怎么调？
不是 Grid 写错了，而是桌面端写的 grid-template-columns: 1fr 3fr 1fr 被直接照搬到 375px 宽的手机上——浏览器硬塞三列，结果要么文字换行异常，要么触发横向溢出。
正确做法是「移动优先」+ 分层控制：
- 默认样式（无 media）设单列：
grid-template-columns: 1fr，确保小屏天然安全 - 用
@media (min-width: 769px)向上增强，避免断点冲突 - 慎用固定值
repeat(3, 1fr)，改用repeat(auto-fit, minmax(280px, 1fr))，让列数随容器自动增减 -
gap也要响应式：小屏用gap: 12px，大屏再加到24px，否则 gap 自身就吃掉两列空间
横屏下 Grid 表格显示稀疏或留白过多，怎么优化？
问题出在 minmax(120px, 1fr) 的最小值卡死了列宽。横屏时视口变宽（如 iPhone 从 375px → 667px），但 120px 下限不让列收缩，浏览器就不敢多列，结果还是单列或两列+大片留白。
两种可靠解法：
- 媒体查询动态调最小值：
@media (orientation: landscape) { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); } - 更稳的是用
clamp()：minmax(clamp(80px, 15vw, 120px), 1fr)，让最小值随视口平滑变化——竖屏卡在 80px，横屏落到 100px 左右，列数自然增加 - 别无脑压到 40px，太小会导致文字挤成一团；也别在卡片内用
height: 100%，优先用aspect-ratio+object-fit
冻结首列 + 多选功能怎么和 Grid 配合？
Grid 天然适合这类复杂交互：冻结列靠 grid-column: 1 / 2 锁定位置，多选状态用 CSS 变量或 class 控制背景色，无需 JS 操控 DOM 重排。
关键细节：
- 固定表头需分离
<thead> 和 <code><tbody>，给 <code><tbody> 单独设 <code>max-height+overflow-y: auto - 冻结列不要用
position: sticky套在table-cell上——它在 Grid 里不可靠；改用 Grid 的显式列定位 - 每行用
display: contents扁平化结构，避免嵌套<tr><td> 带来的渲染限制 <li>性能敏感场景（如 50+ 行 SKU 表），避免在单元格内用 <code>width: 100%或position: absolute，这会让尺寸脱离滚动上下文
Grid 不是万能胶，但它把“列宽控制”“滚动边界”“区域重排”这些移动端表格最头疼的问题，收进了一套声明式规则里。真正麻烦的从来不是写几行 CSS，而是想清楚哪些地方该让浏览器算、哪些地方必须人来定——比如 minmax() 的下限值，测一遍 iPhone SE 和折叠屏半开状态，比查兼容性表格管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
