HTML+jquery 可調整欄寬的表格
表格可調整欄位，這是很常用到的功能，先看結果如下：
可調整欄寬的表格
我用了一個DIV包在TABLE之外，所以這個DIV的CSS也會影響TABLE寬度，
以下是程式碼：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可調整欄寬的表格</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.table-container {
position: relative;
border: 1px solid #ccc;
padding: 10px;
overflow: auto; /* 外層DIV X方向有捲軸 */
width: 500px; /* DIV寬度 */
height: 400px; /* DIV高度 */
}
table {
border-collapse: separate;/*separate;/*collapse;*/
border-spacing: 0.5px;
width: 820px;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
position: relative;
}
th {
background: #f2f2f2;
}
.resizer {
width: 5px;
cursor: col-resize;
position: absolute;
right: 0;
top: 0;
height: 100%;
z-index: 10; /* 確保在最上面 */
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th style="width:80px;">欄位 1<div class="resizer"></div></th>
<th style="width:80px;">欄位 2<div class="resizer"></div></th>
<th style="width:200px;">欄位 3<div class="resizer"></div></th>
<th style="width:200px;">欄位 4<div class="resizer"></div></th>
<th style="width:200px;">欄位 5<div class="resizer"></div></th>
</tr>
</thead>
<tbody>
<tr>
<td>資料 1-1</td>
<td>資料 1-2</td>
<td>資料 1-3</td>
<td>資料 1-4</td>
<td>資料 1-5</td>
</tr>
<tr>
<td>資料 2-1</td>
<td>資料 2-2</td>
<td>資料 2-3</td>
<td>資料 2-4</td>
<td>資料 2-5</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
// 自由調整 Table欄位大小
let isResizing = false;
let lastDownX;
let lastX;
let $th;
let $table;
$(".resizer").mousedown(function(e) {
isResizing = true;
lastX = e.pageX;
//console.log("lastX:"+lastX); // debug 用
$th = $(this).parent(); // 獲取當前的 th 元素
$table = $th.closest("table"); // 獲取對應的 table 元素
e.preventDefault(); // 防止選取文本
});
$(document).mousemove(function(e) {
if (isResizing) {
const diffX = e.pageX - lastX; // 計算移動的距離
const newWidth = Math.max($th.width() + diffX,20); // 更新寬度
const newTableWidth = $table.width() + diffX; // 獲取對應的 table 元素
// debug 用
//console.log("lastX:"+lastX+" e.pageX:"+e.pageX+" diffX:"+diffX + " $th.width():"+$th.width()+ " newWidth:"+newWidth);
$th.css('width', newWidth + 'px');
$table.css('width', newTableWidth + 'px');
lastX = e.pageX; // 更新滑鼠 X方向位置
}
});
$(document).mouseup(function() { // 滑鼠右鍵放開
isResizing = false;
});
});
</script>
</body>
</html>
重點在於 TABLE 要先設定好寬度，滑鼠拉動表格框線要一直計算移動距離，
即時修改TABLE和TH寬度。
寫的不是很好，但可以用就好。
分享至
成為作者繼續創作的動力吧！
© 2024 vocus All rights reserved.