width: 100% 经常不生效，因依赖父容器明确宽度、viewport 设置及 table-layout 模式；需重置 body margin/padding、设置 table-layout: fixed + 、防内容撑破列宽并适配小屏。

直接设 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> 的父容器（比如 <code><div>）也得有明确宽度，不能是 <code>display: inline 或被 overflow: hidden 裁剪
• <td> 上写 <code>width: 20% 基本无效：在 table-layout: auto 下浏览器优先按内容撑开，在 fixed 下又只读第一行或 <col>

  用 table-layout: fixed + <col> 真正控制列宽

  table-layout: fixed 不是“自适应开关”，而是把列宽计算权交给你——但它只认 <table> 的 <code>width 和 <col>（或第一行 <th>）的 <code>width 声明，其他地方写的都忽略。

  • <table> 必须有明确 <code>width，如 width: 100% 或 width: 800px
  • <col> 必须放在 <table> 开始后、<code><thead> 前，单位只支持 <code>%、px、em（fr 无效）
  • 没写 <col> 的列，宽度由第一行对应单元格的 width 决定；全都没写，列宽会坍缩成最小内容宽
  • 避免混用 min-width/max-width，它们在 fixed 模式下常被跳过

  防内容撑破列宽的关键 CSS

  即使列宽固定，长文本（如 URL、base64）、图片或无空格字符串仍会强行撑开单元格，导致横向溢出或文字挤压。

  
  html-to-pptx-converter
  使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
  下载
  • 对 <td> 设 <code>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> 和 <code><td> 改成 <code>display: block，堆叠成卡片式列表
  • 隐藏冗余表头，用 <span class="label">姓名:</span> 前缀替代重复列名
  • 真要一维流式展示（比如聊天记录、日志列表），直接用 display: flex 或 display: grid 替代 <table>，控制力强得多 <p>最易被忽略的一点：所有“自适应”都依赖上下文——父容器是否撑开、是否清除浮动、是否被 <code>overflow: hidden 裁剪、是否在 flex/grid 容器里被隐式压缩。没理清这些，光调 table 自身属性，永远在修表面。