首页我需要设计一个能自由调整列宽的网页表格完整代码】

我需要设计一个能自由调整列宽的网页表格完整代码】

时间: 2024-04-16 12:28:32 浏览: 111

下面是一个完整的示例代码，用于设计一个能自由调整列宽的网页表格： ```html <!DOCTYPE html> <html> <head> <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>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr>  </tbody> </table> <script> window.addEventListener("DOMContentLoaded", function () { var table = document.getElementById("myTable"); var columns = table.querySelectorAll("th"); var isResizing = false; var startX, startWidth; for (var i = 0; i < columns.length; i++) { columns[i].addEventListener("mousedown", function (event) { isResizing = true; startX = event.pageX; startWidth = this.offsetWidth; }); columns[i].addEventListener("mousemove", function (event) { if (!isResizing) return; var width = startWidth + (event.pageX - startX); this.style.minWidth = width + "px"; }); columns[i].addEventListener("mouseup", function () { isResizing = false; }); } }); </script> </body> </html> ``` 将上述代码保存为一个 HTML 文件，然后在浏览器中打开该文件，你将看到一个带有自由调整列宽功能的网页表格。你可以通过拖动表头边缘来调整列宽，实现自由调整的效果。请注意，这只是一个基本示例，你可以根据需要对样式和布局进行进一步的修改和美化。

阅读全文