flex: 1 不能直接套在 上，因为 受表格渲染模型约束，不是标准 flex item；浏览器会忽略该声明，列宽仍随内容撑开。真正起效的是对 同时设置 table-layout: fixed 和 width: 100%。

flex: 1 为什么不能直接套在 <td> 上 <p>因为 <code><table> 的子元素（<code><tr>）和孙元素（<code><td>）不是标准的 Flex item，它们受表格渲染模型约束。即使给 <code><td> 加 <code>flex: 1，浏览器会忽略——表格内部布局由 table-layout 控制，不是 Flexbox 管的。

常见错误现象：<td> 宽度依然随内容撑开，列宽不均，缩放时错位。 <ul><li>必须把表格当作一个整体 Flex item（即对 <code><table> 本身设 <code>width: 100%），而不是试图对单元格用 Flex 属性

真正起效的是 table-layout: fixed + width: 100% 组合，它让表格“交出控制权”，按容器宽度均分列

如果父容器是 Flexbox（如 <div class="navbar">），确保该父容器没设 <code>flex-shrink: 0 或固定 width，否则表格拿不到伸缩空间

table-layout: fixed 和 width: 100% 怎么配才生效

这两个属性必须同时存在且作用于 <table> 元素本身，缺一不可。 <p>典型失效场景：只加 <code>width: 100% 但没设 table-layout: fixed → 表格仍按内容自适应；只设 table-layout: fixed 但没给 width → 浏览器按默认算法（通常是 auto）计算总宽，列宽可能塌缩或溢出。

• table-layout: fixed 启用后，列宽分配逻辑变为：无显式列宽定义时，等分 table 的总宽度
• width: 100% 必须写在 <table> 上，不是 <code><tr> 或 <code><td> <li>若需微调某列（比如第一列稍宽），可用 <code><colgroup></colgroup> + <col width="20%">，但注意这会打破完全等宽，且 width 值在 fixed 模式下是硬性约束

文本换行不生效？检查这三个地方

启用 table-layout: fixed 后，文本本应自动换行，但常因以下原因失效：

• <td> 或其父级被设了 <code>white-space: nowrap（常见于重置样式表或全局 td { white-space: nowrap }）
• 长单词（如 URL、哈希值）未启用断行：需加 word-break: break-word 或 overflow-wrap: break-word
• box-sizing 未设为 border-box，导致 padding + border 溢出列宽，视觉上像“没换行”

推荐最小安全组合：td { white-space: normal; word-break: break-word; box-sizing: border-box; }


anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
下载

比表格更轻量的等宽方案：用 <div> 模拟行列表 <p>如果业务逻辑不强依赖 <code><table> 语义（比如只是导航栏、功能卡片组），直接用 Flexbox 布局 <code><div> 更可控、更少坑。 <p>示例结构：</p> <pre class="brush:php;toolbar:false;">&lt;nav class=&quot;nav-flex&quot;&gt;&lt;div&gt;Home&lt;/div&gt; &lt;div&gt;Family&lt;/div&gt; &lt;div&gt;Cape Town&lt;/div&gt; &lt;div&gt;Swim&lt;/div&gt; &lt;/nav&gt;</pre> <p>CSS：</p> <pre class="brush:php;toolbar:false;">.nav-flex { display: flex; } .nav-flex &gt; div { flex: 1; padding: 12px 0; } </pre> <p>优势：无表格模型干扰、支持任意嵌套、响应式更直观；缺点：丧失语义化和屏幕阅读器对表格结构的识别。是否选用，取决于你是否真需要表格语义。</p> <p>最易被忽略的一点：当表格嵌在 Flex 容器里时，<code><table> 默认是 <code>display: table，它本身是个“块级盒子”，但 Flex item 的尺寸计算会受其 min-width: auto 影响——务必显式设 min-width: 0 在 <table> 上，否则窄屏下可能溢出或破坏等宽。</table>