table-layout: fixed生效需同时满足三个条件：table必须显式设置width（如100%），至少一列通过或指定宽度，且父容器不能是塌陷的flex/grid；缺一则退化为auto模式。
移动端表格不是“缩放”问题，而是结构错配问题——直接加 width: 100% 或用媒体查询隐藏 <thead> 基本无效。真正起效的只有三类动作：强制布局、重构行结构、或包裹滚动容器。
<h3>table-layout: fixed 为什么总不生效</h3>
<p>它不是失效，是缺了三个硬性条件：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul><li><code><table> 元素必须显式写 <code>width: 100%，只给父容器设没用
<th style="width: 25%"> 或 <code><col width="200"> 指定宽度，空着就退化回 auto 模式
flex/grid 容器，得加 max-width: 100vw 或 display: block 防继承失效Outlook 等邮件客户端完全无视这个属性，发 HTML 邮件时别用。
data-label + display: block 堆叠卡片怎么写才不翻车
适合字段语义强、列数 ≥ 4 的业务表格（比如订单列表），关键不在“怎么转”，而在“怎么不丢信息”：
立即学习“前端免费学习笔记（深入）”；
- 每个
<td> 必须带 <code>data-label，如<td data-label="下单时间">2026-06-02 12:15</td> - 小屏下把
<tr> 设为 <code>display: block，<td> 设为 <code>display: block; position: relative - 用
td::before { content: attr(data-label); }插入标签，别用float或inline-block，窄屏换行错位率高 - 伪元素默认是
inline，若 label 和值要对齐，得加display: inline-block; width: 80px;控制宽度 - 外层容器必须加
-webkit-overflow-scrolling: touch（iOS 惯性滚动才跟手） <table> 要设 <code>min-width: fit-content或具体值（如min-width: 1200px），防文字被压扁- 禁用
white-space: nowrap在<td> 上，否则 Base64、长 URL 会直接撑爆容器 <li>纯 CSS 很难统一滚动条样式，更实际的做法是在容器底部加提示文字，比如 “← 左右滑动查看全部列 →”</li> <p>最容易被忽略的是：<code><meta name="viewport" content="width=device-width, initial-scale=1">必须放在最前。没这句，再细的 CSS 也白搭——它不是锦上添花，是响应式表格能跑起来的前提。
overflow-x: auto 滚动容器必须配什么
这是后台报表、财务明细这类列多且不可删字段场景最稳的选择，但光加 overflow-x: auto 不够：
