Java Web 表格拖拽調整大小（二）：紅色分隔條拖拽、文字保護機制對比

每列表頭右側顯示 2px 紅色分隔條，拖拽分隔條調整列寬。展示兩種文字保護策略：font 內聯元素（文字不被覆蓋）vs 直接置於 td（文字會被邊框壓蓋），直觀對比佈局差異。

效果特性

• 紅色豎條（cursor:e-resize）作為唯一拖拽手柄
• 拖拽時該列與表格整體寬度同步變化
• 方案 A：文字包在 <font class="resizeDivClass">，相對定位，拖拽後文字隨單元格擴展不被遮蓋
• 方案 B：文字直接寫在 <td>，邊框覆蓋導致文字部分隱藏

核心 CSS + JavaScript

<style>
.resizeDivClass {
    position: relative;
    background-color: red;
    width: 2px;
    z-index: 1;
    left: expression(this.parentElement.offsetWidth - 1);  /* IE 動態定位到右邊緣 */
    cursor: e-resize;
}
</style>

<script language="javascript">
function MouseDownToResize(obj) {
    obj.mouseDownX = event.clientX;
    obj.pareneTdW = obj.parentElement.offsetWidth;
    obj.pareneTableW = theObjTable.offsetWidth;
    obj.setCapture();
}
function MouseMoveToResize(obj) {
    if (!obj.mouseDownX) return;
    var newW = obj.pareneTdW + event.clientX - obj.mouseDownX;
    if (newW > 0) {
        obj.parentElement.style.width = newW;
        theObjTable.style.width = obj.pareneTableW + event.clientX - obj.mouseDownX;
    }
}
function MouseUpToResize(obj) {
    obj.releaseCapture();
    obj.mouseDownX = 0;
}
</script>

HTML 結構對比

<table id="theObjTable" STYLE="table-layout:fixed">
  <tr bgcolor=cccccc>
    <td valign=top>
      <font class="resizeDivClass"
           onmousedown="MouseDownToResize(this);"
           onmousemove="MouseMoveToResize(this);"
           onmouseup="MouseUpToResize(this);"></font>
      aaa  <!-- 方案A：文字在font外，不被覆蓋 -->
    </td>
    <td valign=top>
      <font class="resizeDivClass" ...></font>
      ddd  <!-- 方案B：文字在td內，會被邊框壓蓋 -->
    </td>
    <td valign=top><font class="resizeDivClass" ...></font> ddd </td>
  </tr>
  <tr>
    <td>快樂不是因為擁有的多，而是計較的少。</td>
    <td>bbbb</td><td>dddd</td>
  </tr>
</table>

關鍵差異分析

現代化改造要點

• 用 <div class="resize-handle"> 替代 <font>，語義更清晰
• CSS left: calc(100% - 2px) 替代 expression
• 事件用 addEventListener，setPointerCapture 替代 setCapture
• table-layout: fixed 保持列佈局穩定