width: 100% 经常不生效，因依赖父容器明确宽度、viewport 设置及 table-layout 模式；需重置 body margin/padding、设置 table-layout: fixed + <col>、防内容撑破列宽并适配小屏。
直接设 width: 100% 大概率没用——它只在父容器有明确宽度、table-layout 行为可控、且内容不撑破列宽时才真正生效。
为什么 width: 100% 经常不生效
百分比宽度依赖父级尺寸，而 body 默认带 margin、未设 width，导致子元素的 100% 算出来远小于视口；移动端若漏掉 <meta name="viewport" content="width=device-width, initial-scale=1.0">，浏览器按 980px 渲染，100% 就是错的。
- 必须重置：
html, body { margin: 0; padding: 0; width: 100%; } -
<table>的父容器（比如<div>）也得有明确宽度，不能是display: inline或被overflow: hidden裁剪 -
<td>上写width: 20%基本无效：在table-layout: auto下浏览器优先按内容撑开，在fixed下又只读第一行或<col>
用 table-layout: fixed + <col> 真正控制列宽
table-layout: fixed 不是“自适应开关”，而是把列宽计算权交给你——但它只认 <table> 的 width 和 <col>（或第一行 <th>）的 width 声明，其他地方写的都忽略。
-
<table>必须有明确width，如width: 100%或width: 800px -
<col>必须放在<table>开始后、<thead>前，单位只支持%、px、em（fr无效） - 没写
<col>的列，宽度由第一行对应单元格的width决定；全都没写，列宽会坍缩成最小内容宽 - 避免混用
min-width/max-width，它们在fixed模式下常被跳过
防内容撑破列宽的关键 CSS
即使列宽固定，长文本（如 URL、base64）、图片或无空格字符串仍会强行撑开单元格，导致横向溢出或文字挤压。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 对
<td>设word-break: break-all或word-wrap: break-word，强制断词换行 - 设
white-space: normal（别用nowrap，除非你真需要单行显示） - 图片加
max-width: 100%; height: auto;，防止拉伸破坏布局 - 外层容器加
overflow-x: auto，小屏时允许横向滚动，比内容挤成一团更可用
小屏下别硬撑，该转就转
表格语义是二维对齐，窄屏（尤其是 320px 宽）强行“自适应”只会让文字缩成针尖大小、操作按钮无法点击。这不是 CSS 写得不够好，而是表格本身不适合这种场景。
- 用媒体查询在
@media (max-width: 768px)里把<tr>和<td>改成display: block，堆叠成卡片式列表 - 隐藏冗余表头，用
<span class="label">姓名:</span>前缀替代重复列名 - 真要一维流式展示（比如聊天记录、日志列表），直接用
display: flex或display: grid替代<table>，控制力强得多
最易被忽略的一点：所有“自适应”都依赖上下文——父容器是否撑开、是否清除浮动、是否被 overflow: hidden 裁剪、是否在 flex/grid 容器里被隐式压缩。没理清这些，光调 table 自身属性，永远在修表面。
