table-layout: fixed 是唯一能强制约束 td 宽度的布局模式，需配合显式 table 宽度、col 或首行单元格 width 设置，且需用 div 包裹内容并设 box-sizing: border-box 等细节才能可靠生效。

table-layout: fixed 是唯一能强制约束 td 宽度的布局模式

直接给 td 设 width 或 min-width 在默认 table-layout: auto 下几乎必然失效——浏览器优先保障内容可读性，宽度只是“建议”。真正起效的强制限制，只在 table-layout: fixed 模式下成立。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

该模式下，列宽由第一行的 th/td 的 width 属性、或 <col> 元素决定，后续所有行的单元格都严格按此分配空间，内容超长也不会撑开列宽。

• table 必须同时设置显式 width（如 100% 或 800px），否则 fixed 失去计算基准
• 第一行的 td 或 th 上的 width 属性才被识别；后续行写 width 会被忽略
• 若用 <col>，必须放在 <table> 开始后、<code><thead> 前，顺序错一位即全部失效 <li>避免混用单位：同一组 <code><col> 中不要既有 width="200" 又有 width="30%"，比例会意外崩坏

colgroup + col 是最稳定可靠的列宽控制方案

相比依赖首行 td 的 width 属性，<colgroup></colgroup> + <col> 更语义清晰、更少受 DOM 顺序和内容干扰，且兼容性覆盖 IE9+。

<col> 支持 width 值为像素、百分比或无单位数字（权重），但不支持 min-width/max-width。要实现“最小 120px，最多占 30%”，需组合使用：

立即学习“前端免费学习笔记（深入）”；

• table { table-layout: fixed; width: 100%; }
• <col style="width: 30%">
• 对应列的 td 加 min-width: 120px

注意：<col> 百分比总和超过 100% 会触发横向滚动条，务必校验实际渲染结果。

td 内嵌 div 才是应对超长文本的兜底方案

当无法改表格布局（比如第三方组件、遗留系统），又必须限制单元格内文本/输入框宽度时，td 内套一层 div 是最直接有效的 hack。

原因在于：div 是标准块级元素，其 width、overflow、white-space 等属性完全遵循 CSS 盒模型，不受表格自动布局机制干扰。

• 给 div 设 width: 100px + overflow: hidden + text-overflow: ellipsis，可安全截断超长文本
• 若内部是 <input type="text">，设 width: 100% 后，div 的宽度就成了它的参照系
• 避免在 td 上用 !important 强顶宽度——它可能压住其他必要样式，且无法解决内容撑开本质问题

border-collapse 和 box-sizing 会影响最终视觉宽度

即使列宽逻辑生效，td 实际显示宽度还受两个隐藏因素影响：

• border-collapse: collapse 会让相邻边框合并，此时单侧 border-width 可能被另一侧覆盖——必须确保 border-style: solid 显式声明，否则 border-width 无效
• padding 和 border 默认加在 width 外，导致内容区被压缩；加 box-sizing: border-box 才能让 width 包含内边距和边框
• 若父容器是 display: flex 或 overflow-x: auto，可能截断表格或干扰 width: 100% 计算，建议外层加 min-width 容忍最小尺寸

复杂点不在怎么写，而在哪一层做限制——table-layout: fixed 控制列分配，col 定义基准，td 的 min-width 是底线，div 是隔离层，缺一不可。