max-width 对 table 无效是因 table-layout: auto 优先按内容撑列，需 table-layout: fixed + colgroup 定义列宽 + 外层容器设 max-width 才生效。

max-width 对 <table> 元素直接设置通常无效，这不是写法错误，而是表格默认的 <code>table-layout: auto 行为导致的——它优先按内容撑开列宽，max-width 只约束外框，不干预内部列分配。

为什么 max-width 写在 <table> 上没反应 <p>常见错误现象：<code><table style="max-width: 800px;"> 在大屏下仍铺满整个视口，或小屏下出现横向滚动条。根本原因是浏览器在 <code>table-layout: auto 模式下会先计算每列“所需最小宽度”，再把整张表缩放到 max-width 范围内（可能压缩文字、拉伸单元格），结果不可控且易破布局。

• 仅靠 max-width 无法阻止长文本（如无空格 URL）撑开单列
• <table> 的 <code>max-width 不传递给子元素，<col> 和单元格仍按内容自由伸展
• 若父容器没设宽度（比如裸 <div>），<code>max-width 的参照系丢失，退化为 auto

  真正生效的组合：固定布局 + 显式列宽 + 容器约束

  要让表格整体不超某个最大宽度，同时列宽可控，必须三者齐备：

  • 给 <table> 同时设置 <code>width: 100% 和 table-layout: fixed
  • 用 <colgroup></colgroup> + <col> 明确定义每列宽度（顺序不能错，必须紧贴 <table> 开始后、<code><thead> 前） <li>把 <code><table> 包在有 <code>max-width 和 margin: 0 auto 的块级容器里（如 <div class="table-wrapper">） <p>示例结构：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a> <p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;">&lt;div class=&quot;table-wrapper&quot; style=&quot;max-width: 960px; margin: 0 auto;&quot;&gt; &lt;table style=&quot;width: 100%; table-layout: fixed;&quot;&gt; &lt;colgroup&gt; &lt;col style=&quot;width: 120px&quot;&gt; &lt;col style=&quot;width: 25%&quot;&gt; &lt;col style=&quot;width: 1fr&quot;&gt; &lt;/colgroup&gt; &lt;thead&gt;&lt;tr&gt; &lt;th&gt;ID&lt;/th&gt; &lt;th&gt;名称&lt;/th&gt; &lt;th&gt;描述&lt;/th&gt; &lt;/tr&gt;&lt;/thead&gt; &lt;tbody&gt;&lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;测试&lt;/td&gt; &lt;td&gt;长文本无空格xxxxxxxxxxxxxxxxxxxxxxx&lt;/td&gt; &lt;/tr&gt;&lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt;</pre> <h3>内容溢出时，<code>max-width 还得配对文本控制

即使列宽锁死，长文本、图片或连续字符仍会破坏视觉表现。这时 max-width 本身不解决换行问题，需额外 CSS：

• 单行截断：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（加在 <td> 上） <li>自动换行：<code>word-break: break-word; 或 overflow-wrap: break-word;，并确保 white-space: normal;
• 图片失控：img { max-width: 100%; height: auto; }
• 边框/内边距影响总宽：box-sizing: border-box; 推荐加在 <table> 或 <code><td> 上 <p>最易被忽略的不是怎么写 <code>max-width，而是忘了 table-layout: fixed 必须和 <col> 同时存在，以及 <colgroup></colgroup> 放错位置（比如塞进 <thead> 里）——这三个点一错，整套控制就失效。</thead>