table不能直接设overflow-x: auto，需用div容器包裹并设table-layout: fixed、min-width及white-space控制，移动端列多时应降级为响应式列表。
table外层必须用包住，不能直接给table加overflow
直接在table上写overflow-x: auto无效——table是替换元素，其溢出行为受table-layout和内部盒模型限制，浏览器根本不响应这个属性。
正确做法是用一个div作为容器，显式设为块级、限定宽度并启用横向滚动：
div.table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }-
table本身要设min-width（比如min-width: 600px），否则窄屏下缩得太小，文字糊成一片
- 别忘了加
viewport meta：<meta name="viewport" content="width=device-width, initial-scale=1">，否则iOS Safari可能忽略width: 100%
为什么加了width: 100%还是撑出屏幕？
因为浏览器默认用table-layout: auto，它会等所有内容（长URL、连续英文、图片）加载完才计算列宽。小屏下某列被撑开，整行就歪掉，width: 100%只是把“歪掉的整张表”拉满父容器。
必须显式设置table-layout: fixed，但有两个前提：
立即学习“前端免费学习笔记（深入）”；
-
table得有width: 100%（否则fixed不触发）
- 至少一个
<col>或第一行<th>带width（推荐用百分比，如width: 20%），否则剩余列均分，容易失衡
滚动时文字被截断或显示不全
常见原因是td里用了white-space: nowrap（比如日期、ID字段常用），但没配text-overflow: ellipsis和overflow: hidden。
要让关键字段可读又不撑破列宽，得组合控制：
td.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }- 如果单元格里嵌了
<div>或<span>，它们默认继承white-space: nowrap，得单独重置：td div { white-space: normal; }
- 图片和
<code>类内容需额外约束：img { max-width: 100%; height: auto; }，td code { word-break: break-all; }
移动端列数 ≥ 4 时，滚动不是最优解
横向滚动对用户极不友好，尤其字段语义强（如“下单时间”“收货人电话”）时，滑动中根本记不住哪列对应什么。
这时候该主动降级，而不是硬撑表格结构：
- 给每行
<tr>加data-label，例如<tr data-label="订单 #12345">
- 小屏媒体查询里隐藏
<thead>和原始<th>，用tr:before显示data-label
- 把每个
<td>设为display: block，再用td:before { content: attr(data-label) ": "; }补字段名
真正难的不是写CSS，是判断什么时候该放弃表格、什么时候该用table-layout: fixed、以及哪些字段必须保留完整文本——这些得看业务场景，不是靠一套样式能兜底的。
直接在table上写overflow-x: auto无效——table是替换元素，其溢出行为受table-layout和内部盒模型限制，浏览器根本不响应这个属性。
正确做法是用一个div作为容器，显式设为块级、限定宽度并启用横向滚动：
div.table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }-
table本身要设min-width（比如min-width: 600px），否则窄屏下缩得太小，文字糊成一片 - 别忘了加
viewportmeta：<meta name="viewport" content="width=device-width, initial-scale=1">，否则iOS Safari可能忽略width: 100%
为什么加了width: 100%还是撑出屏幕？
因为浏览器默认用table-layout: auto，它会等所有内容（长URL、连续英文、图片）加载完才计算列宽。小屏下某列被撑开，整行就歪掉，width: 100%只是把“歪掉的整张表”拉满父容器。
必须显式设置table-layout: fixed，但有两个前提：
立即学习“前端免费学习笔记（深入）”；
-
table得有width: 100%（否则fixed不触发） - 至少一个
<col>或第一行<th>带width（推荐用百分比，如width: 20%），否则剩余列均分，容易失衡
滚动时文字被截断或显示不全
常见原因是td里用了white-space: nowrap（比如日期、ID字段常用），但没配text-overflow: ellipsis和overflow: hidden。
要让关键字段可读又不撑破列宽，得组合控制：
td.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }- 如果单元格里嵌了
<div>或<span>，它们默认继承white-space: nowrap，得单独重置：td div { white-space: normal; } - 图片和
<code>类内容需额外约束：img { max-width: 100%; height: auto; }，td code { word-break: break-all; }
移动端列数 ≥ 4 时，滚动不是最优解
横向滚动对用户极不友好，尤其字段语义强（如“下单时间”“收货人电话”）时，滑动中根本记不住哪列对应什么。
这时候该主动降级，而不是硬撑表格结构：
- 给每行
<tr>加data-label，例如<tr data-label="订单 #12345"> - 小屏媒体查询里隐藏
<thead>和原始<th>，用tr:before显示data-label - 把每个
<td>设为display: block，再用td:before { content: attr(data-label) ": "; }补字段名
真正难的不是写CSS，是判断什么时候该放弃表格、什么时候该用table-layout: fixed、以及哪些字段必须保留完整文本——这些得看业务场景，不是靠一套样式能兜底的。
