js实现表头固定,并且表头宽度可调整

实现表头固定可以使用CSS的position: fixed属性，同时设置表格的顶部margin值等于表头的高度，使得表格内容从表头下方开始显示。表头宽度可调整可以使用JavaScript实现拖拽改变列宽。

以下是一个简单的实现示例：

HTML部分：

<table id="myTable">
  <thead>
    <tr>
      <th style="width: 100px;">列1</th>
      <th style="width: 200px;">列2</th>
      <th style="width: 150px;">列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1列1</td>
      <td>行1列2</td>
      <td>行1列3</td>
    </tr>
    <tr>
      <td>行2列1</td>
      <td>行2列2</td>
      <td>行2列3</td>
    </tr>
    <tr>
      <td>行3列1</td>
      <td>行3列2</td>
      <td>行3列3</td>
    </tr>
    <tr>
      <td>行4列1</td>
      <td>行4列2</td>
      <td>行4列3</td>
    </tr>
  </tbody>
</table>

CSS部分：

#myTable {
  border-collapse: collapse;
  margin-top: 50px; /* 表头高度 */
}

#myTable thead {
  position: fixed;
  top: 0;
  background-color: #fff;
}

#myTable th,
#myTable td {
  border: 1px solid #ccc;
  padding: 5px;
}

JavaScript部分：

const resizeHandler = function (e) {
  const th = this;
  const table = th.closest('table');
  const colIndex = Array.from(th.parentNode.children).indexOf(th); // 获取列索引
  const tableWidth = table.offsetWidth;
  const tableLeft = table.getBoundingClientRect().left;
  const thWidth = th.offsetWidth;
  const minWidth = 50; // 最小宽度

  let prevThWidth = thWidth; // 上一个th的宽度
  let nextThWidth = 0; // 下一个th的宽度

  // 获取上一个th的宽度
  if (colIndex > 0) {
    prevThWidth = th.parentNode.children[colIndex - 1].offsetWidth;
  }

  // 获取下一个th的宽度
  if (colIndex < th.parentNode.children.length - 1) {
    nextThWidth = th.parentNode.children[colIndex + 1].offsetWidth;
  }

  // 设置最大宽度
  const maxWidth = tableWidth - (tableLeft + th.offsetLeft) - nextThWidth - 1;

  const onMouseMove = function (e) {
    const offset = e.clientX - th.getBoundingClientRect().left;
    let width = prevThWidth + offset;

    // 判断是否超出最小宽度和最大宽度
    if (width < minWidth) {
      width = minWidth;
    } else if (width > maxWidth) {
      width = maxWidth;
    }

    // 设置列宽
    th.style.width = `${width}px`;
  };

  const onMouseUp = function () {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  };

  // 添加事件监听
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
};

// 添加th的拖拽事件
const ths = document.querySelectorAll('#myTable th');
ths.forEach((th) => {
  th.addEventListener('mousedown', resizeHandler);
});

解释一下JavaScript部分的代码：

1. resizeHandler函数：当鼠标按下时，计算表格的宽度、鼠标位置、列的宽度等信息，并添加mousemove和mouseup事件监听，实现列拖拽调整宽度的效果。
2. onMouseMove函数：当鼠标移动时，根据鼠标位置计算列宽，并设置列的宽度。
3. onMouseUp函数：当鼠标松开时，移除事件监听。
4. 遍历每个th元素，添加mousedown事件监听，触发resizeHandler函数。

这样就实现了表头固定和表头宽度可调整的效果。