使用JavaScript写一个可以左右丝滑拖动列宽表格带上样式

好的，下面是一个简单的可左右拖动列宽的表格代码示例，同时也带上了一些基本的样式：

HTML：

<table id="myTable">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Col 1</td>
      <td>Row 1, Col 2</td>
      <td>Row 1, Col 3</td>
    </tr>
    <tr>
      <td>Row 2, Col 1</td>
      <td>Row 2, Col 2</td>
      <td>Row 2, Col 3</td>
    </tr>
    <tr>
      <td>Row 3, Col 1</td>
      <td>Row 3, Col 2</td>
      <td>Row 3, Col 3</td>
    </tr>
  </tbody>
</table>

CSS：

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: left;
}

thead {
  background-color: #f2f2f2;
}

th {
  background-color: #e6e6e6;
}

td {
  border-bottom: 1px solid #ddd;
}

/* 定义可拖动的列 */
.col-resize {
  width: 8px;
  cursor: col-resize;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 定义拖动列时的样式 */
.col-resize:hover {
  background-color: #f4f4f4;
}

JavaScript：

// 获取表格元素
var table = document.getElementById("myTable");
// 获取表头元素
var headers = table.getElementsByTagName("th");

// 循环遍历所有表头
for (var i = 0; i < headers.length; i++) {
  // 定义变量，用于存储当前列的宽度
  var currentWidth;
  // 创建一个 div 元素，用于拖动改变列宽
  var div = document.createElement("div");
  // 给 div 元素添加自定义类名
  div.className = "col-resize";
  // 给 div 元素添加事件监听器，用于处理拖动事件
  div.addEventListener("mousedown", function(event) {
    // 阻止默认事件
    event.preventDefault();
    // 将当前列的宽度存储到变量中
    currentWidth = this.parentNode.offsetWidth;
    // 将当前列的索引存储到变量中
    var columnIndex = Array.prototype.indexOf.call(this.parentNode.parentNode.children, this.parentNode);
    // 将鼠标按下事件添加到 document 上，用于处理拖动过程中的事件
    document.addEventListener("mousemove", mousemove);
    // 将鼠标抬起事件添加到 document 上，用于处理拖动结束后的事件
    document.addEventListener("mouseup", mouseup);
    // 定义一个鼠标移动事件处理函数
    function mousemove(event) {
      // 计算拖动距离
      var diff = event.pageX - currentWidth;
      // 设置当前列的宽度为拖动距离
      headers[columnIndex].style.width = diff + "px";
    }
    // 定义一个鼠标抬起事件处理函数
    function mouseup(event) {
      // 将鼠标移动事件从 document 上移除
      document.removeEventListener("mousemove", mousemove);
      // 将鼠标抬起事件从 document 上移除
      document.removeEventListener("mouseup", mouseup);
    }
  });
  // 将 div 元素添加到当前表头元素的子元素列表中
  headers[i].appendChild(div);
}

这段代码使用了原生 JavaScript 实现了可左右拖动列宽的表格，并使用 CSS 添加了一些基本的样式。当鼠标按下拖动列宽的时候，通过添加事件监听器处理鼠标移动和抬起事件，并计算出拖动距离来改变列的宽度。