Java Web 表格拖拽調整大小（三）：列寬同步拖拽、文字不被遮蓋

點擊表頭任意位置即可左右拖拽調整列寬，同列所有行寬度同步變化，最小寬度限制 10px，文字永不被表格線覆蓋，適合數據網格場景。

效果特性

• 表頭任意處按下即進入拖拽模式，無需專用手柄
• 同列所有 <td> 寬度聯動，保持對齊
• 最小寬度 10px 防止列消失
• 文字區與邊框分離，內容不被壓蓋

完整實現代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>表格列拖拽</TITLE>
<script language="javascript">
var colnum = 0, begin_x, begin_y, drag_flag = false;
document.onmousedown = mouseDragBegin;
document.onmousemove = mouseDrag;
document.onmouseup = mouseDragEnd;

function setDrag(col) { drag_flag = true; colnum = col; }

function mouseDragBegin() {
    if (drag_flag) { begin_x = event.x; begin_y = event.y; }
}

function mouseDrag() {
    if (!drag_flag || window.event.button != 1) return;
    var now_x = event.x, delta = now_x - begin_x;
    var targetCols;
    switch (colnum) {
        case 0: targetCols = ColRight1; break;
        case 1: targetCols = ColRight2; break;
        case 2: targetCols = ColRight3; break;
        case 3: targetCols = ColRight4; break;
        default: return;
    }
    var newW = targetCols[0].style.pixelWidth + delta;
    if (newW < 10) newW = 10;
    for (var i = 0; i < targetCols.length; i++)
        targetCols[i].style.pixelWidth = newW;
    begin_x = now_x;
}

function mouseDragEnd() { drag_flag = false; }
</script>
</HEAD><BODY>

<TABLE ID="tblTitle" BORDER=0 cellspacing=0 cellpadding=0
     STYLE="border-collapse:collapse;">
  <tr height=30>
    <td class="tdTitle"><DIV ID=ColRight1 style="width:100px;background:red" unselectable="on" onMouseDown="setDrag(0)">000</DIV></td>
    <td class="tdTitle"><DIV ID=ColRight2 style="width:100px;background:green" unselectable="on" onMouseDown="setDrag(1)">111</DIV></td>
    <td class="tdTitle"><DIV ID=ColRight3 style="width:120px;background:red" unselectable="on" onMouseDown="setDrag(2)">222</DIV></td>
    <td class="tdTitle"><DIV ID=ColRight4 style="width:50px;background:green" unselectable="on" onMouseDown="setDrag(3)">333</DIV></td>
  </tr>
  <tr height=30>
    <td class="tdTitle"><DIV ID=ColRight1 style="width:100px;background:red" unselectable="on" onMouseDown="setDrag(0)">000</DIV></td>
    <td class="tdTitle"><DIV ID=ColRight2 style="width:100px;background:green" unselectable="on" onMouseDown="setDrag(1)">111</DIV></td>
    <td class="tdTitle"><DIV ID=ColRight3 style="width:120px;background:red" unselectable="on" onMouseDown="setDrag(2)">222</DIV></td>
    <td class="tdTitle"><DIV ID=ColRight4 style="width:50px;background:green" unselectable="on" onMouseDown="setDrag(3)">333</DIV></td>
  </tr>
</TABLE>
</BODY></HTML>

設計要點

現代化重寫提示

• 改用 class 而非重複 ID，配合 querySelectorAll
• 事件綁定用 addEventListener，區分 mousedown/mousemove/mouseup
• 寬度設置用 element.style.width = 'px'
• 可引入 requestAnimationFrame 優化重繪