存在合并单元格的table，可实现拖动的方式重新排列每一列的位置，给个范例

以下是一个实现了合并单元格、可拖拽列的表格的范例代码：

HTML代码：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">小明</td>
      <td>20</td>
      <td>男</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>18</td>
      <td>女</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>22</td>
      <td>女</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

CSS代码：

#myTable {
  border-collapse: collapse;
  width: 100%;
}

#myTable th,
#myTable td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

#myTable th {
  background-color: #f2f2f2;
  cursor: move;
}

JS代码：

// 获取表格和表头
var table = document.getElementById("myTable");
var header = table.querySelector("thead tr");

// 为表头的每一列添加拖拽事件
for (var i = 0; i < header.children.length; i++) {
  header.children[i].addEventListener("mousedown", function (event) {
    // 记录当前列的位置和宽度
    var columnIndex = Array.prototype.indexOf.call(header.children, event.target);
    var columnWidth = parseInt(getComputedStyle(event.target).width);
    var startX = event.clientX;

    // 添加鼠标移动和松开事件
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("mouseup", onMouseUp);

    // 阻止默认的选中文本事件
    event.preventDefault();

    function onMouseMove(event) {
      // 计算鼠标移动的距离
      var deltaX = event.clientX - startX;

      // 更新列的宽度
      header.children[columnIndex].style.width = columnWidth + deltaX + "px";

      // 阻止默认的选中文本事件
      event.preventDefault();
    }

    function onMouseUp(event) {
      // 移除鼠标移动和松开事件
      document.removeEventListener("mousemove", onMouseMove);
      document.removeEventListener("mouseup", onMouseUp);

      // 阻止默认的选中文本事件
      event.preventDefault();
    }
  });
}

这个表格实现了合并单元格和拖拽列的功能。你可以尝试在浏览器中打开并试着拖动表头中的每一列。