如何实现100%宽度HTML表格列可调整大小及文本截断悬停显示

以下是完整的实现代码，解决表格宽度自适应、列拖动调整、文本省略号及悬停显示完整内容的问题，同时保留粘性表头功能：

<div class="list-view-container">
  <table class="list-view-table">
    <thead>
      <tr>
        <th class="resizable-column">
          <span class="column-title">ID</span>
          <span class="resize-handle"></span>
        </th>
        <th class="resizable-column">
          <span class="column-title">用户名</span>
          <span class="resize-handle"></span>
        </th>
        <th class="resizable-column">
          <span class="column-title">超长描述文本示例</span>
          <span class="resize-handle"></span>
        </th>
        <th class="resizable-column">
          <span class="column-title">创建时间</span>
          <span class="resize-handle"></span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span class="cell-content">1001</span></td>
        <td><span class="cell-content">JohnDoe</span></td>
        <td><span class="cell-content" title="这是一段非常非常长的描述文本，用来测试省略号和悬停显示完整内容的功能">这是一段非常非常长的描述文本，用来测试省略号和悬停显示完整内容的功能</span></td>
        <td><span class="cell-content">2024-05-20 14:30</span></td>
      </tr>
      <tr>
        <td><span class="cell-content">1002</span></td>
        <td><span class="cell-content">JaneSmith</span></td>
        <td><span class="cell-content" title="另一段超长的测试文本，确保省略号和tooltip功能正常工作">另一段超长的测试文本，确保省略号和tooltip功能正常工作</span></td>
        <td><span class="cell-content">2024-05-21 09:15</span></td>
      </tr>
    </tbody>
  </table>
</div>

.list-view-container {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #eee;
}

.list-view-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 固定布局，强制列宽由表头控制 */
}

.list-view-table thead th {
  position: sticky;
  top: 0;
  background-color: #f5f5f5;
  border-bottom: 2px solid #ddd;
  padding: 8px 12px;
  text-align: left;
  position: relative;
  overflow: hidden; /* 使resize属性生效的必要条件 */
}

.resizable-column {
  resize: horizontal;
  min-width: 80px; /* 限制最小列宽，避免缩至不可读 */
}

.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
}

.resize-handle:hover {
  background-color: #ccc; /* 悬停时显示拖动手柄 */
}

.list-view-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  overflow: hidden;
}

.cell-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}

// 同步表头与单元格的宽度调整
document.querySelectorAll('.resizable-column').forEach(th => {
  let isResizing = false;
  
  th.querySelector('.resize-handle').addEventListener('mousedown', () => {
    isResizing = true;
  });
  
  document.addEventListener('mousemove', (e) => {
    if (!isResizing) return;
    
    const columnIndex = Array.from(th.parentElement.children).indexOf(th);
    const table = th.closest('.list-view-table');
    const tbodyCells = table.querySelectorAll(`tbody tr td:nth-child(${columnIndex + 1})`);
    
    tbodyCells.forEach(td => {
      td.style.width = `${th.offsetWidth}px`;
    });
  });
  
  document.addEventListener('mouseup', () => {
    isResizing = false;
  });
});

关键问题拆解解决 #

1. 表格占满容器宽度 #

• 外层容器设置width:100%+overflow-x:auto，确保超出容器的部分可横向滚动
• 表格启用table-layout:fixed，强制列宽由表头定义，避免内容撑开表格导致宽度溢出

2. 列拖动调整功能 #

• 给表头单元格设置resize:horizontal，同时必须设置overflow:hidden（resize仅对overflow非visible的元素生效）
• 添加可视化的resize-handle，提升用户交互感知
• 通过JS监听拖动事件，同步对应列的单元格宽度，解决纯CSS resize仅改变表头宽度的问题

3. 超长文本省略号 #

• 在单元格内嵌套cell-content容器，设置white-space:nowrap+overflow:hidden+text-overflow:ellipsis
• 容器设置display:block和width:100%，确保省略规则作用于整个单元格宽度

4. 悬停显示完整文本 #

• 直接给cell-content添加title属性，利用浏览器原生tooltip功能，轻量且兼容所有浏览器
• 若需要自定义样式tooltip，可通过CSS伪元素结合:hover实现，但原生title足够满足大部分需求

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