好的，你可以
使用以下代码创建
一个具有可
调整列宽功能的网页表格：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可
调整列宽的表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
.
resizer {
width: 6px;
background-color: #ddd;
position: absolute;
top: 0;
right: -3px;
height: 100%;
cursor: col-
resize;
}
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th style="width: 150px;">列1<span class="
resizer"></span></th>
<th style="width: 200px;">列2<span class="
resizer"></span></th>
<th>列3<span class="
resizer"></span></th>
</tr>
</thead>
<tbody>
<!-- 表格内容 -->
</tbody>
</table>
<script>
var table = document.getElementById("myTable");
var
resizers = table.querySelectorAll(".
resizer");
var isResizing = false;
var current
Resizer;
for (var i = 0; i <
resizers.length; i++) {
var
resizer =
resizers[i];
resizer.addEventListener("mousedown", function (event) {
isResizing = true;
current
Resizer = event.target;
});
window.addEventListener("mousemove", function (event) {
if (!isResizing) return;
var col = current
Resizer.parentElement;
var nextCol = col.nextElementSibling;
var prevWidth = col.offsetWidth;
var diffX = event.pageX - col.offsetWidth;
col.style.width = event.pageX + "px";
if (nextCol) {
nextCol.style.width = (prevWidth - diffX) + "px";
}
});
window.addEventListener("mouseup", function () {
isResizing = false;
current
Resizer = undefined;
});
}
</script>
</body>
</html>
```
在这个示例代码中，我
使用了 JavaScript 来处理拖动
调整列宽的操作。当你在表头单元格的右侧拖动时，相应列的宽度会根据拖动的距离进行
调整。
每个表头单元格中都添加了
一个带有 `
resizer` 类的 `<span>` 元素，用于作为拖动
调整列宽的手柄。通过捕获鼠标事件，并根据拖动的距离
调整列宽，实现了可
调整列宽的功能。
希望这个示例能满足你的需求。如有其他问题，请随时提问。
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
