如何在不设置table width:100%时用CSS实现表格列可调整大小

完全可以做到，核心思路是让表格根据列宽自动撑开，用容器的横向滚动处理溢出，同时通过原生JS实现列宽拖拽调整，调整时仅修改目标列宽度，不影响其他列。

实现步骤与代码示例 #

1. HTML结构

把表格放在带横向滚动的容器中，表格不设置width:100%，让它根据列内容和手动调整的宽度自适应总宽度，同时给每列表头添加拖拽手柄：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>
          <span class="col-title">用户ID</span>
          <span class="resizer"></span>
        </th>
        <th>
          <span class="col-title">用户名</span>
          <span class="resizer"></span>
        </th>
        <th>
          <span class="col-title">邮箱地址</span>
          <span class="resizer"></span>
        </th>
        <th>
          <span class="col-title">注册时间</span>
          <span class="resizer"></span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>U001</td>
        <td>JohnDoe</td>
        <td>john.doe@example.com</td>
        <td>2023-01-15 14:30</td>
      </tr>
      <tr>
        <td>U002</td>
        <td>JaneSmith</td>
        <td>jane.smith@example.org</td>
        <td>2023-02-20 09:15</td>
      </tr>
    </tbody>
  </table>
</div>

2. CSS样式

配置容器滚动、表格基础样式，以及拖拽手柄的视觉效果：

.table-container {
  overflow-x: auto;
  max-width: 100%; /* 容器占满父级宽度，超出部分横向滚动 */
}

table {
  border-collapse: collapse;
  /* 不设置width:100%，表格宽度由列宽总和决定 */
}

th, td {
  border: 1px solid #e0e0e0;
  padding: 10px;
  white-space: nowrap; /* 禁止文本换行，避免列宽自动变化 */
}

.resizer {
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background-color: #ccc;
  cursor: col-resize;
}

th {
  position: relative; /* 让拖拽手柄可以绝对定位在表头右侧 */
  background-color: #f5f5f5;
}

3. JavaScript拖拽逻辑

监听鼠标事件，计算宽度变化并同步设置表头和对应单元格的宽度：

const resizers = document.querySelectorAll('.resizer');

resizers.forEach(resizer => {
  resizer.addEventListener('mousedown', (e) => {
    e.preventDefault();
    const header = resizer.parentElement;
    const table = header.closest('table');
    const startX = e.pageX;
    const initialWidth = header.offsetWidth;
    const columnIndex = Array.from(header.parentElement.children).indexOf(header);

    const handleMouseMove = (e) => {
      const widthDelta = e.pageX - startX;
      const newWidth = initialWidth + widthDelta;
      // 设置表头宽度
      header.style.width = `${newWidth}px`;
      // 同步对应单元格的宽度，保持列对齐
      const cells = table.querySelectorAll(`tbody tr td:nth-child(${columnIndex + 1})`);
      cells.forEach(cell => cell.style.width = `${newWidth}px`);
    };

    const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  });
});

关键细节说明 #

• 表格不设width:100%，总宽度等于所有列宽度之和，当总宽度超过容器宽度时，容器自动触发横向滚动。
• 调整列宽时直接修改目标列的宽度，其他列宽度保持不变，不会被挤压。
• white-space:nowrap确保单元格内文本不会自动换行，避免列宽被文本撑开导致的意外变化。

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