max-width 对 table 无效是因 table-layout: auto 优先按内容撑列，需 table-layout: fixed + colgroup 定义列宽 + 外层容器设 max-width 才生效。
max-width 对 <table> 元素直接设置通常无效，这不是写法错误，而是表格默认的 table-layout: auto 行为导致的——它优先按内容撑开列宽，max-width 只约束外框，不干预内部列分配。
为什么 max-width 写在 <table> 上没反应
常见错误现象：<table style="max-width: 800px;"> 在大屏下仍铺满整个视口，或小屏下出现横向滚动条。根本原因是浏览器在 table-layout: auto 模式下会先计算每列“所需最小宽度”，再把整张表缩放到 max-width 范围内（可能压缩文字、拉伸单元格），结果不可控且易破布局。
- 仅靠
max-width无法阻止长文本（如无空格 URL）撑开单列 -
<table>的max-width不传递给子元素，<col>和单元格仍按内容自由伸展 - 若父容器没设宽度（比如裸
<div>），max-width的参照系丢失，退化为auto
真正生效的组合：固定布局 + 显式列宽 + 容器约束
要让表格整体不超某个最大宽度，同时列宽可控，必须三者齐备：
- 给
<table>同时设置width: 100%和table-layout: fixed - 用
<colgroup>+<col>明确定义每列宽度（顺序不能错，必须紧贴<table>开始后、<thead>前） - 把
<table>包在有max-width和margin: 0 auto的块级容器里（如<div class="table-wrapper">）
示例结构：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
<div class="table-wrapper" style="max-width: 960px; margin: 0 auto;">
<table style="width: 100%; table-layout: fixed;">
<colgroup>
<col style="width: 120px">
<col style="width: 25%">
<col style="width: 1fr">
</colgroup>
<thead><tr><th>ID</th><th>名称</th><th>描述</th></tr></thead>
<tbody><tr><td>1</td><td>测试</td><td>长文本无空格xxxxxxxxxxxxxxxxxxxxxxx</td></tr></tbody>
</table>
</div>
内容溢出时，max-width 还得配对文本控制
即使列宽锁死，长文本、图片或连续字符仍会破坏视觉表现。这时 max-width 本身不解决换行问题，需额外 CSS：
- 单行截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（加在<td>上） - 自动换行：
word-break: break-word;或overflow-wrap: break-word;，并确保white-space: normal; - 图片失控：
img { max-width: 100%; height: auto; } - 边框/内边距影响总宽：
box-sizing: border-box;推荐加在<table>或<td>上
最易被忽略的不是怎么写 max-width，而是忘了 table-layout: fixed 必须和 <col> 同时存在，以及 <colgroup> 放错位置（比如塞进 <thead> 里）——这三个点一错，整套控制就失效。
