textarea的resize: none失效是因为默认overflow: visible，需设overflow: auto/hidden；表格缩放非原生行为，table-layout: fixed才能使td的max-width生效。

textarea 的拉伸行为和 table 的缩放是两套完全独立的机制，混在一起问容易走偏——表格本身不能被“拉伸”，只有 textarea 支持用户拖拽调整尺寸；而表格的“缩放”本质是 CSS 变换或宽高重设，不涉及原生交互手柄。

为什么给 textarea 写 resize: none 还能拖

不是代码没写对，而是浏览器直接无视了这个声明。根本原因是：resize 属性只在 overflow 为 auto、hidden 或 scroll 时才生效；而 textarea 默认 overflow: visible，此时无论你写多少遍 resize: none 都白搭。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 必须显式加 overflow: auto（hidden 也行，但会截断溢出内容）
• 第三方 UI 库（如 Ant Design）常把真实 textarea 包在 div 里，类名类似 .el-textarea__inner，直接写 textarea { resize: none; } 不匹配
• Bootstrap 4+ 默认带 !important，你的规则权重不够，得用更具体的选择器或内联样式
• 验证是否生效：打开开发者工具 → 「Computed」面板 → 搜 resize，看最终值是不是 none

table-layout: fixed 是限制表格撑开的前提

想让表格里的文本不撑破列宽，光给 td 加 max-width 没用。因为默认 table-layout: auto 下，浏览器先扫描所有行的内容决定列宽，max-width 根本不参与计算。

• 必须设置 table { table-layout: fixed; width: 100%; }（width 不能省，否则表宽由内容最小宽度决定）
• <col> 必须紧贴 <table> 开始后、<code><thead> 前，顺序错就全失效 <li>列宽靠 <code><col style="width: 200px"> 定义，别依赖 th/td 上的 width 属性
• td 的 max-width 此时才起作用，但需配合文本控制：比如 overflow-wrap: break-word 或 text-overflow: ellipsis + white-space: nowrap + display: block

用 transform: scale() 缩小整个表格要小心

它只是视觉缩放，不影响文档流布局，看起来小了，但实际占位还是原来大小，可能造成点击错位、父容器高度计算异常、打印样式错乱等问题。

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

• 如果真要用，建议包裹一层 div 并设 overflow: hidden，再对内部 table 做 scale(0.8)
• 更稳妥的做法是改 font-size、padding 和 width 百分比，或用媒体查询在小屏下转为堆叠结构
• transform 在 Safari 和旧版 Edge 中对 table 渲染支持不稳定，尤其配合 border-collapse 时容易出现边框断裂

真正难的不是写哪一行 CSS，而是搞清「谁在控制宽度」：是 table-layout、col、td 的 width，还是父容器的 max-width？漏掉任意一环，max-width 就形同虚设。