如何通过设置TH宽度实现TD可缩小至内容宽度以下？

一、原生Table的修复方案 #

核心是把表格的布局模式改成fixed，这样列宽不再由内容自动撑开，完全遵循你设置的宽度值，配合文本容器的省略样式就能实现需求。

修改后的完整代码 #

CSS

#my-table-container {}

#my-table {
  margin: 0;
  padding: 0;
  text-align: left;
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
  /* 关键：开启固定布局，列宽不再受内容限制 */
  table-layout: fixed;
  width: 100%; /* fixed布局必须设置明确宽度，这里占满容器 */
}

#my-table thead {
  border-top: 2px solid rgb(140 140 140);
  border-left: 2px solid rgb(140 140 140);
}

#my-table th, #my-table td {
  position: relative;
  margin: 0;
  padding: 4px 8px; /* 加内边距提升可读性 */
  width: auto; /* 初始自动分配，拖动后会被行内样式覆盖 */
  border-right: 2px solid rgb(140 140 140);
  border-bottom: 2px solid rgb(140 140 140);
}

#my-table th:first-child {
  width: 150px;
}

#my-table th .resize-bar {
  position: absolute;
  right: 0;
  top: 0;
  width: 4px; /* 加宽拖动区域，更容易操作 */
  height: 100%;
  background-color: transparent;
  cursor: col-resize;
}
#my-table th .resize-bar:hover {
  background-color: black; /* hover时显示拖动条，不影响正常视觉 */
}

#my-table tbody td div.cell-container,
#my-table thead th div.cell-container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; /* 确保文本容器填满单元格，触发省略效果 */
}

JavaScript

activateTableResize();

function activateTableResize() {
  let table, tableContainer, resizeable, currentResizeBar, currentTh, tableRect;
  document.addEventListener("mousedown", (event) => {
    if (event.target.closest('.resize-bar')) {
      resizeable = true;
      currentResizeBar = event.target;
      currentTh = event.target.closest('th');
      table = document.getElementById('my-table');
      tableContainer = document.getElementById('my-table-container');
      tableRect = tableContainer.getBoundingClientRect();
      document.body.style.cursor = "col-resize";
      document.body.style.userSelect = "none";
    }
  });

  document.addEventListener("mousemove", (event) => {
    if (resizeable) {
      const minWidth = 30; // 设置最小列宽，避免拖得太窄
      let distanceMoved = event.clientX - currentTh.getBoundingClientRect().left;
      // 限制宽度范围：不小于最小宽度，不超出容器右侧
      const newWidth = Math.max(minWidth, Math.min(distanceMoved, tableRect.width - currentTh.offsetLeft - 10));
      currentTh.style.width = `${newWidth}px`;
      // 同步设置对应tbody列的宽度，避免表头和内容列宽不一致
      const colIndex = Array.from(currentTh.parentElement.children).indexOf(currentTh);
      table.querySelectorAll(`tbody tr td:nth-child(${colIndex + 1})`).forEach(td => {
        td.style.width = `${newWidth}px`;
      });
    }
  });

  document.addEventListener("mouseup", () => {
    document.body.style.cursor = "default";
    document.body.style.userSelect = "default";
    resizeable = false;
  });
}

HTML（仅修正原代码中闭合标签错误）

<div id="my-table-container">
  <table id="my-table">
    <thead>
      <tr>
        <th scope="col">
          <div class="cell-container">Name<span class="resize-bar"></span></div>
        </th>
        <th scope="col">
          <div class="cell-container">Type<span class="resize-bar"></span></div>
        </th>
        <th scope="col">
          <div class="cell-container">Size<span class="resize-bar"></span></div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="cell-container">James Smith</div>
        </td>
        <td>
          <div class="cell-container">20</div>
        </td>
        <td>
          <div class="cell-container">jsmith@example.com</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="cell-container">Jane Doe</div>
        </td>
        <td>
          <div class="cell-container">19</div>
        </td>
        <td>
          <div class="cell-container">jdoe@example.com</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

关键改动说明 #

1. table-layout: fixed：强制表格使用固定布局，列宽完全由你设置的宽度值决定，不再被内容撑开。
2. 同步表头与内容列宽：拖动表头时，自动设置对应tbody单元格的宽度，避免出现表头和内容列宽不一致的情况。
3. 优化拖动交互：拖动条默认透明，hover时显示，既不影响正常视觉，又提升了操作便捷性。
4. 限制最小列宽：避免拖动时列宽过窄导致内容完全不可见。

二、是否需要改用CSS Grid？ #

• 原生Table优势：语义化更强，对屏幕阅读器友好，自带表格默认行为（如边框合并、单元格对齐），开发成本低，适合纯数据展示场景。
• CSS Grid优势：布局灵活性极高，能实现复杂的表格样式（如自由跨行跨列），但需要手动模拟表格的语义和交互逻辑（如表头固定、列宽同步），开发成本更高。

如果只是需要可调整列宽+内容省略的基础需求，原生Table配合table-layout: fixed完全能满足，无需切换到CSS Grid。

内容的提问来源于stack exchange，提问作者pileup