table-layout: fixed 是响应式表格的起点，需配合 width: 100% 和显式列宽（如 <th style="width:25%">），否则不生效；小屏下推荐 data-label + display: block 或容器水平滚动。
直接给 table 加 width: 100% 不管用，小屏下照样溢出、文字挤成一团、列宽崩坏——这不是写漏了媒体查询，而是没动表格的底层布局逻辑。
table-layout: fixed 是响应式表格的起点
浏览器默认用 table-layout: auto，会等所有内容（包括图片、长 URL）加载完才算列宽，窄屏下一列被撑开，整行就歪掉。改成 table-layout: fixed 后，列宽只看第一行 <th> 或显式 width，不依赖内容，渲染快且可控。
必须同时设 width: 100%，否则 fixed 不生效；<th> 或 <col> 上得有明确宽度，比如：
<th style="width: 25%">订单号</th> <th style="width: 20%">时间</th> <th style="width: 30%">商品</th> <th style="width: 25%">状态</th>
- 不设满所有列宽时，剩余空间由未设宽的列平分，容易失衡
- IE8+ 支持，但 Outlook（用 Word 渲染引擎）完全不认这个属性，发邮件别用
- 配合
word-wrap: break-word或text-overflow: ellipsis处理超长文本，否则内容会溢出或撑破
小屏列数 ≥ 4 时，优先转卡片堆叠
横向滚动对用户不友好，尤其字段语义强（如“下单时间”“收货人电话”）时，滑来滑去根本记不住哪列是啥。更稳妥的做法是让每行 <tr> 变成独立区块，每个 <td> 带上 data-label 记录原表头。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
HTML 示例：
<tr> <td data-label="订单号">ORD-2026-7890</td> <td data-label="时间">2026-04-18 14:22</td> <td data-label="状态">已发货</td> </tr>
- 媒体查询里隐藏
<thead>，把<tr>设为display: block -
<td>设display: block+position: relative，再用::before { content: attr(data-label) }插入标签 - 别用
float或inline-block，窄屏下换行错位风险高
报表类表格：靠容器滚动最务实
后台数据列表、财务明细这类列多且不能删字段的场景，水平滚动不是妥协，是合理选择。关键在滚动要顺滑、有提示、不卡顿。
- 外层容器加
overflow-x: auto和-webkit-overflow-scrolling: touch（iOS 惯性滚动） -
<table>设min-width: fit-content或具体值（如min-width: 1200px），防内容被压缩变形 - 禁用
white-space: nowrap在<td>上，否则无空格长文本（如 Base64、URL）会直接撑爆容器 - 父容器要有明确宽度，比如
max-width: 100vw；光靠width: 100%在 flex 容器里可能失效
data-label + display: block 的坑比想象中多
这个方案看着简单，实际最容易翻车的是可访问性和样式继承问题。
-
data-label值必须和<th>文本严格一致，否则屏幕阅读器读出来就错位 - 如果表格嵌在
flex或grid容器里，<td>的display: block可能被父级align-items干扰，需额外重置align-self: stretch -
::before插入的标签默认是 inline，若font-size或line-height不匹配，会出现上下偏移，建议统一用padding-top/padding-bottom微调
