html table列宽可拉动,可以拖动改变table列宽的sample
时间: 2023-09-09 19:08:03 浏览: 110
以下是一个简单的HTML表格,其中列宽可拉动,可以拖动改变列宽的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>可拉动列宽的表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
cursor: col-resize;
}
</style>
<script>
let resizeHandle = null;
let startX = null;
let startWidth = null;
function initResize(e) {
resizeHandle = e.target;
startX = e.clientX;
startWidth = parseInt(document.defaultView.getComputedStyle(resizeHandle).width, 10);
document.documentElement.addEventListener('mousemove', doResize, false);
document.documentElement.addEventListener('mouseup', stopResize, false);
}
function doResize(e) {
if (resizeHandle) {
let newWidth = startWidth + e.clientX - startX;
resizeHandle.style.width = newWidth + 'px';
}
}
function stopResize(e) {
if (resizeHandle) {
document.documentElement.removeEventListener('mousemove', doResize, false);
document.documentElement.removeEventListener('mouseup', stopResize, false);
resizeHandle = null;
startX = null;
startWidth = null;
}
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th style="width: 20%;" onmousedown="initResize(event)">列1</th>
<th style="width: 40%;" onmousedown="initResize(event)">列2</th>
<th style="width: 40%;" onmousedown="initResize(event)">列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>
</tbody>
</table>
</body>
</html>
```
在这个示例中,我们使用了CSS的border-collapse属性,使表格边框合并,看起来更整洁。我们还为表头中的每个单元格设置了一个背景颜色,并为每个表头单元格添加了一个onmousedown事件,以便在用户按下鼠标按钮时初始化调整列宽度的功能。然后,我们使用JavaScript编写了initResize、doResize和stopResize函数,这些函数允许用户拖动表头单元格的边缘以调整列宽度。