html 表格拖动表头调整宽度

在 HTML 表格中，可以通过 JavaScript 代码实现拖动表头调整列宽的效果。下面是一个简单的示例代码：

HTML 代码：

<table id="myTable">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

JavaScript 代码：

var table = document.getElementById('myTable');
var ths = table.getElementsByTagName('th');
var start = 0;
var current = 0;
var column = null;

for (var i = 0; i < ths.length; i++) {
  ths[i].addEventListener('mousedown', function(event) {
    start = event.clientX;
    column = event.target.parentElement.children;
    for (var j = 0; j < column.length; j++) {
      if (column[j] == event.target) {
        current = j;
        break;
      }
    }
  });

  ths[i].addEventListener('mousemove', function(event) {
    if (start) {
      var diff = event.clientX - start;
      column[current].style.width = column[current].offsetWidth + diff + 'px';
      start = event.clientX;
    }
  });

  ths[i].addEventListener('mouseup', function(event) {
    start = 0;
  });
}

这段 JavaScript 代码实现了鼠标按下、移动、松开三个事件的监听，并在表头上添加了相应的事件处理函数。当鼠标按下表头时，记录当前鼠标位置和所在列的编号；当鼠标移动时，计算鼠标移动距离，调整所在列的宽度；当鼠标松开时，清空起始位置记录。