要真正约束表格列宽，必须使用 table-layout: fixed + <col> + 容器宽度三者协同：外层容器设明确宽度，<table> 设 width: 100% 和 table-layout: fixed，<col> 放在 <thead> 前并用 px 或 % 指定基准宽度。
直接给 <table> 或外层容器加 min-width 不能真正约束列宽——表格列会优先撑开到内容最小宽度，这是 table-layout: auto 的固有行为。要让“最小宽度”在列级生效，必须切换布局模型并配合结构干预。
为什么 min-width 在 <td> 上基本无效
浏览器对表格单元格的最小宽度（intrinsic minimum width）由最长不可断行内容决定，比如一个无空格长字符串或内联链接。min-width: 50px 写在 <td> 上会被忽略，除非你同时：
• 强制关闭内容撑开能力（如用 white-space: nowrap + overflow: hidden）
• 切换为 table-layout: fixed
• 用 <col> 显式定义列宽基准，否则列宽仍 fallback 到首行内容宽度
真正生效的列级最小宽度设置法
关键不是靠 min-width，而是靠 table-layout: fixed + <col> + 容器宽度三者协同：
• 外层容器必须有明确宽度（如 width: 100% 或固定像素值）
• <table> 必须同时声明 width: 100% 和 table-layout: fixed
• <col> 必须放在 <table> 开始后、<thead> 前，且单位用 px 或 %（不能用 fr）
• 每个 <col> 可设 width，它就是该列的“基准宽度”，后续所有 <td> 都以此为起点计算，不再受内容长度影响
• 若某列需“最小但不固定”，可用 <col width="1%"> + white-space: nowrap + text-overflow: ellipsis 组合实现紧贴内容又可截断
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
拖拽缩列 + 省略号必须解耦内容与布局
原生表格拖拽时列宽卡在内容最小宽度，是因为渲染逻辑把内容尺寸和布局尺寸绑死了。要突破这个限制：
• 把 <td> 设为 position: relative
• 内部套一层 <div> 并设 position: absolute; top: 0; left: 0; right: 0; bottom: 0;
• 这个绝对定位的 <div> 再设 text-overflow: ellipsis; white-space: nowrap; overflow: hidden; line-height: 1.2;
• 同时确保父 <td> 有显式 height（如 height: 36px），否则 ellipsis 不触发
• 此时列可拖到任意窄（比如 50px），文本自动截断，且不破坏表格结构
立即学习“前端免费学习笔记（深入）”；
最易被忽略的一点：没有 <col> 的列，在 table-layout: fixed 下会坍缩成首行 <th> 的 width 值；如果 <th> 也没设，就退化回内容最小宽度——所以哪怕只写一个 <col>，也比全靠 min-width 可靠。
