resize属性无法用于table及其子元素实现列宽或行高拖拽调整，浏览器完全不支持；所谓可拉伸效果均由javascript手动实现，包括监听鼠标事件、动态调整width及同步相邻列宽等。

resize 属性不能直接用于 <table> 或其子元素（如 <code><th>、<code><td>）来实现列宽或行高拖拽调整。<p>这是硬限制：浏览器根本不支持对表格结构元素启用 <code>resize，无论你怎么写 resize: both、overflow: auto 或改 display，都无效。你看到的“表格列可拉伸”，全是 JavaScript 手动实现的，不是 CSS resize 的功劳。

---

<table> 上直接加 <code>resize 为什么没反应

• <table> 默认是 <code>display: table，不满足 resize 要求的「能产生滚动框的块级上下文」
• 即使强行设成 display: block，表格内部盒模型会被破坏（塌陷、边框错位、colspan/rowspan 失效）
• 浏览器对 table 元素的 resize 支持为 none，静默忽略，不报错也不渲染手柄

常见误操作：

• 给 <table> 写 <code>style="resize: both; overflow: auto" → 手柄不出现
• 给 <th> 加 <code>resize: horizontal → 完全无效，CSS 被忽略

  ---

  真正能用 resize 的表格相关方案（有限但可用）

  只有两种场景下 resize 可间接参与：

  • 整个表格容器可缩放：把 <table> 包在 <code><div> 里，对该 <code><div> 启用 <code>resize
  • 单个单元格模拟可调区域：仅适用于独立、内容溢出的 <td>（比如含长文本或代码块），且必须满足所有生效条件<p>可行组合示例：</p> <pre class="brush:html;toolbar:false;">&lt;div style=&quot; resize: both; overflow: auto; min-width: 300px; min-height: 100px; border: 1px solid #ccc; &quot;&gt; &lt;table style=&quot;width: 100%; table-layout: fixed;&quot;&gt;&lt;tr&gt;&lt;td&gt;内容过长会触发滚动，此时右下角出现拖拽手柄&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;/div&gt;</pre> <p>注意点：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li> <code>table-layout: fixed 能防止内容撑开导致布局抖动
  • 必须设 min-width 和 min-height，否则 Safari 下手柄不显示
  • 拖的是外层 <div>，不是表格本身；表格会随容器缩放，但列宽比例可能失衡<hr> <h3>表格列宽拖拽必须用 JS 实现（不是 <code>resize）

所有“拖标题边线调列宽”的效果，底层都是监听 mousedown + mousemove，计算鼠标位移并动态改 th.style.width 或 col.style.width。

关键细节：

• 拖拽手柄通常是插入一个绝对定位的 <div class="resize-handle"> 在 <code><th> 右侧边缘<li>必须阻止默认行为：<code>e.preventDefault()，否则会触发文本选中或页面拖拽
• 调整宽度时要同步更新相邻列宽，保持表格总宽不变（否则会换行或溢出）
• 推荐用 requestAnimationFrame 更新尺寸，避免 layout thrashing

简单示意（仅逻辑）：

handle.addEventListener('mousedown', e => {
  e.preventDefault();
  const th = handle.closest('th');
  const rect = th.getBoundingClientRect();
  const startWidth = th.offsetWidth;
  const startX = e.clientX;

  const onMove = moveE => {
    const dx = moveE.clientX - startX;
    const newWidth = Math.max(50, startWidth + dx);
    th.style.width = newWidth + 'px';
  };

  const clean = () => {
    document.removeEventListener('mousemove', onMove);
    document.removeEventListener('mouseup', clean);
  };

  document.addEventListener('mousemove', onMove);
  document.addEventListener('mouseup', clean);
});

---

真正要让表格列宽可拖，别碰 resize。它在这里就是个摆设。JS 实现虽多几行，但可控、可存档、可约束最小/最大宽度，而且所有浏览器表现一致。反而省去排查 Safari 少设 min-width、Chrome 忘写 overflow 这类隐形坑的时间。