<!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; } table img { max-width: 150px; height: auto; } <!-- //图片大小调整 --> .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; } .popup img { max-width: 100%; max-height: 100%; cursor: zoom-out; } .sticky-header { position: sticky; top: 0; background-color: #f5f5f5; /* 可根据需要设置背景色 */ } <!-- //放大图片设置 --> </style> </head> <body> <div> <button onclick="addRow()">新增一行</button> <button onclick="addColumn()">添加一列</button> <button onclick="deleteRow()">删除行</button> <button onclick="deleteColumn()">删除列</button> <div> <div id="popup" class="popup" style="display: none;"> <img id="popupImg"> </div> <table id="myTable"> <thead> <tr> <th style="width: 20px;">列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <thead class="sticky-header"> 这样调整后列宽仍然没有变化
时间: 2024-02-16 22:22:24 浏览: 152
抱歉,我之前的回答可能有误导性。确实,使用 `width` 样式来调整表头单元格的宽度并不会影响表格列的宽度。
要实现自由调整表格列宽的功能,你可以使用 JavaScript 来处理拖动调整列宽的操作。下面是一个示例代码,可以在你的网页中实现该功能:
```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;
}
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th style="width: 20px;">列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<!-- 表格内容 -->
</tbody>
</table>
<script>
var table = document.getElementById("myTable");
var columns = table.querySelectorAll("th");
var isResizing = false;
var startX, startWidth;
for (var i = 0; i < columns.length; i++) {
var column = columns[i];
column.addEventListener("mousedown", function (event) {
isResizing = true;
startX = event.pageX;
startWidth = this.offsetWidth;
});
column.addEventListener("mousemove", function (event) {
if (!isResizing) return;
var width = startWidth + (event.pageX - startX);
this.style.width = width + "px";
});
column.addEventListener("mouseup", function () {
isResizing = false;
});
}
</script>
</body>
</html>
```
在这个示例代码中,我添加了一些 JavaScript 代码,用于处理拖动调整列宽的操作。当你在表头单元格上按下鼠标按键并移动时,表头单元格的宽度会根据鼠标移动的距离进行调整。
请注意,这只是一个基本的示例代码,你可以根据需要进行修改和美化。希望这次能够满足你的需求。如果还有其他问题,请随时提问。
阅读全文