feat(编辑器): 优化表格组件，增强选择范围逻辑，改进表格宽度处理

src/components/Editor/blocks/TableBlock.tsx

@@ -11,7 +11,8 @@ import { TableCell } from './TableCell';
 import { TableToolbar } from './TableToolbar';
 import { TableResizeHandle } from './TableResizeHandle';
 import { useTableResize } from '../../../hooks/useTableResize';
-import { getTableVisualCellPositions } from '../../../utils/blockOperations';
+import { getTableCellRangeForVisualBounds, getTableVisualCellPositions } from '../../../utils/blockOperations';
+import { tableWidthToPt } from '../../../utils/tableUtils';
 import './TableBlock.css';
 
 // ══════════════════════════════════════════════════════════════════════════════
@@ -32,6 +33,19 @@ interface VisualCellPosition {
 
 const getCellKey = (rowIndex: number, colIndex: number) => `${rowIndex}-${colIndex}`;
 
+function getVisualSelection(
+  anchor: VisualCellPosition | undefined,
+  target: VisualCellPosition | undefined,
+) {
+  if (!anchor || !target) return null;
+  return {
+    rowStart: Math.min(anchor.rowStart, target.rowStart),
+    rowEnd: Math.max(anchor.rowEnd, target.rowEnd),
+    colStart: Math.min(anchor.colStart, target.colStart),
+    colEnd: Math.max(anchor.colEnd, target.colEnd),
+  };
+}
+
 /**
  * TableBlock - 表格块(完整实现)
  */
@@ -113,6 +127,7 @@ export const TableBlock: React.FC<TableBlockProps> = ({
     colWidths: block.metadata.col_widths,
     rowHeights,
     tableWidth: block.metadata.table_width,
+    tableWidthPt: tableWidthToPt(block.metadata.table_width, block.metadata.table_width_unit),
     readOnly,
     onColumnResize: handleColumnResize,
     onRowResize: handleRowResize,
@@ -201,21 +216,12 @@ export const TableBlock: React.FC<TableBlockProps> = ({
 
     if (shiftKey && selectedCell) {
       // Shift+点击:选择范围
-      const startRow = Math.min(selectedCell.row, rowIndex);
-      const endRow = Math.max(selectedCell.row, rowIndex);
-      const startCol = Math.min(selectedCell.col, colIndex);
-      const endCol = Math.max(selectedCell.col, colIndex);
-      
-      setSelectedRange({ startRow, startCol, endRow, endCol });
       const anchorPosition = visualCellPositions.get(getCellKey(selectedCell.row, selectedCell.col));
       const targetPosition = visualCellPositions.get(getCellKey(rowIndex, colIndex));
-      if (anchorPosition && targetPosition) {
-        setSelectedVisualRange({
-          rowStart: Math.min(anchorPosition.rowStart, targetPosition.rowStart),
-          rowEnd: Math.max(anchorPosition.rowEnd, targetPosition.rowEnd),
-          colStart: Math.min(anchorPosition.colStart, targetPosition.colStart),
-          colEnd: Math.max(anchorPosition.colEnd, targetPosition.colEnd),
-        });
+      const visualRange = getVisualSelection(anchorPosition, targetPosition);
+      if (visualRange) {
+        setSelectedVisualRange(visualRange);
+        setSelectedRange(getTableCellRangeForVisualBounds(block, visualRange));
       }
     } else {
       // 普通点击:选择单个单元格
@@ -223,30 +229,22 @@ export const TableBlock: React.FC<TableBlockProps> = ({
       setSelectedRange(null);
       setSelectedVisualRange(null);
     }
-  }, [selectedCell, visualCellPositions]);
+  }, [block, selectedCell, visualCellPositions]);
 
   const updateSelectedRange = useCallback((rowIndex: number, colIndex: number) => {
     const anchor = selectionAnchorRef.current;
     if (!anchor) return;
 
-    const startRow = Math.min(anchor.row, rowIndex);
-    const endRow = Math.max(anchor.row, rowIndex);
-    const startCol = Math.min(anchor.col, colIndex);
-    const endCol = Math.max(anchor.col, colIndex);
     setSelectedCell({ row: rowIndex, col: colIndex });
-    setSelectedRange({ startRow, startCol, endRow, endCol });
 
     const anchorPosition = selectionAnchorVisualRef.current;
     const targetPosition = visualCellPositions.get(getCellKey(rowIndex, colIndex));
-    if (anchorPosition && targetPosition) {
-      setSelectedVisualRange({
-        rowStart: Math.min(anchorPosition.rowStart, targetPosition.rowStart),
-        rowEnd: Math.max(anchorPosition.rowEnd, targetPosition.rowEnd),
-        colStart: Math.min(anchorPosition.colStart, targetPosition.colStart),
-        colEnd: Math.max(anchorPosition.colEnd, targetPosition.colEnd),
-      });
+    const visualRange = getVisualSelection(anchorPosition ?? undefined, targetPosition);
+    if (visualRange) {
+      setSelectedVisualRange(visualRange);
+      setSelectedRange(getTableCellRangeForVisualBounds(block, visualRange));
     }
-  }, [visualCellPositions]);
+  }, [block, visualCellPositions]);
 
   const handleCellMouseDown = useCallback((
     rowIndex: number,
@@ -335,12 +333,13 @@ export const TableBlock: React.FC<TableBlockProps> = ({
   
   // 如果没有metadata.col_widths，从content.col_widths推算百分比
   const effectiveColWidths = useMemo(() => {
-    if (colWidths && colWidths.length > 0) return colWidths;
+    if (colWidths && colWidths.length === block.metadata.cols) return colWidths;
     if (block.content.col_widths) {
       const totalPt = block.content.col_widths.reduce((sum, width) => sum + width, 0);
-      return totalPt > 0
+      const widths = totalPt > 0
         ? block.content.col_widths.map((width) => (width / totalPt) * 100)
         : block.content.col_widths.map(() => 100 / block.content.col_widths!.length);
+      if (widths.length === block.metadata.cols) return widths;
     }
     const columnCount = Math.max(block.metadata.cols, 1);
     return Array(columnCount).fill(100 / columnCount);

src/components/Editor/blocks/TableToolbar.tsx

@@ -30,6 +30,7 @@ import {
   splitCell,
   getTableSelectionBounds,
   getTableCellRangeForVisualBounds,
+  getTableVisualCellPositions,
 } from '../../../utils/blockOperations';
 import './TableToolbar.css';
 
@@ -115,6 +116,11 @@ export const TableToolbar: React.FC<TableToolbarProps> = ({
   const selectedCellData = hasValidSelectedCell
     ? block.content.rows[selectedCell.row]?.cells[selectedCell.col]
     : undefined;
+  const selectedVisualPosition = getTableVisualCellPositions(block).get(
+    `${selectedCell.row}-${selectedCell.col}`,
+  );
+  const operationRow = selectedVisualPosition?.rowStart ?? selectedCell.row;
+  const operationCol = selectedVisualPosition?.colStart ?? selectedCell.col;
   const canEditTableStructure = hasValidSelectedCell;
   const isMergedCell = hasValidSelectedCell
     && ((selectedCellData?.rowspan ?? 1) > 1 || (selectedCellData?.colspan ?? 1) > 1);
@@ -123,7 +129,7 @@ export const TableToolbar: React.FC<TableToolbarProps> = ({
   const handleInsertRow = useCallback(() => {
     if (!canEditTableStructure) return;
     try {
-      const newBlock = insertTableRow(block, selectedCell.row);
+      const newBlock = insertTableRow(block, operationRow);
       updateBlock(block.id, {
         content: newBlock.content,
         metadata: newBlock.metadata,
@@ -132,13 +138,13 @@ export const TableToolbar: React.FC<TableToolbarProps> = ({
     } catch (error: unknown) {
       message.error(getOperationError(error, '插入行失败'));
     }
-  }, [block, canEditTableStructure, selectedCell.row, updateBlock]);
+  }, [block, canEditTableStructure, operationRow, updateBlock]);
 
   // 在上方插入行
   const handleInsertRowBefore = useCallback(() => {
     if (!canEditTableStructure) return;
     try {
-      const newBlock = insertTableRowBefore(block, selectedCell.row);
+      const newBlock = insertTableRowBefore(block, operationRow);
       updateBlock(block.id, {
         content: newBlock.content,
         metadata: newBlock.metadata,
@@ -147,13 +153,13 @@ export const TableToolbar: React.FC<TableToolbarProps> = ({
     } catch (error: unknown) {
       message.error(getOperationError(error, '插入行失败'));
     }
-  }, [block, canEditTableStructure, selectedCell.row, updateBlock]);
+  }, [block, canEditTableStructure, operationRow, updateBlock]);
 
   // 插入列
   const handleInsertColumn = useCallback(() => {
     if (!canEditTableStructure) return;
     try {
-      const newBlock = insertTableColumn(block, selectedCell.col);
+      const newBlock = insertTableColumn(block, operationCol);
       updateBlock(block.id, {
         content: newBlock.content,
         metadata: newBlock.metadata,
@@ -162,13 +168,13 @@ export const TableToolbar: React.FC<TableToolbarProps> = ({
     } catch (error: unknown) {
       message.error(getOperationError(error, '插入列失败'));
     }
-  }, [block, canEditTableStructure, selectedCell.col, updateBlock]);
+  }, [block, canEditTableStructure, operationCol, updateBlock]);
 
   // 在左侧插入列
   const handleInsertColumnBefore = useCallback(() => {
     if (!canEditTableStructure) return;
     try {
-      const newBlock = insertTableColumnBefore(block, selectedCell.col);
+      const newBlock = insertTableColumnBefore(block, operationCol);
       updateBlock(block.id, {
         content: newBlock.content,
         metadata: newBlock.metadata,
@@ -177,13 +183,13 @@ export const TableToolbar: React.FC<TableToolbarProps> = ({
     } catch (error: unknown) {
       message.error(getOperationError(error, '插入列失败'));
     }
-  }, [block, canEditTableStructure, selectedCell.col, updateBlock]);
+  }, [block, canEditTableStructure, operationCol, updateBlock]);
 
   // 删除行
   const handleDeleteRow = useCallback(() => {
     if (!canEditTableStructure) return;
     try {
-      const newBlock = deleteTableRow(block, selectedCell.row);
+      const newBlock = deleteTableRow(block, operationRow);
       updateBlock(block.id, {
         content: newBlock.content,
         metadata: newBlock.metadata,
@@ -193,13 +199,13 @@ export const TableToolbar: React.FC<TableToolbarProps> = ({
     } catch (error: unknown) {
       message.error(getOperationError(error, '删除行失败'));
     }
-  }, [block, canEditTableStructure, selectedCell.row, updateBlock, onClose]);
+  }, [block, canEditTableStructure, operationRow, updateBlock, onClose]);
 
   // 删除列
   const handleDeleteColumn = useCallback(() => {
     if (!canEditTableStructure) return;
     try {
-      const newBlock = deleteTableColumn(block, selectedCell.col);
+      const newBlock = deleteTableColumn(block, operationCol);
       updateBlock(block.id, {
         content: newBlock.content,
         metadata: newBlock.metadata,
@@ -209,7 +215,7 @@ export const TableToolbar: React.FC<TableToolbarProps> = ({
     } catch (error: unknown) {
       message.error(getOperationError(error, '删除列失败'));
     }
-  }, [block, canEditTableStructure, selectedCell.col, updateBlock, onClose]);
+  }, [block, canEditTableStructure, operationCol, updateBlock, onClose]);
 
   // 合并单元格
   const handleMergeCells = useCallback(() => {
@@ -260,7 +266,10 @@ export const TableToolbar: React.FC<TableToolbarProps> = ({
     <div className="table-toolbar">
       <Space size="small">
         {/* 表格宽度控制 */}
-        <TableWidthControl block={block} />
+        <TableWidthControl
+          key={`${block.id}-${block.metadata.table_width}-${block.metadata.table_width_unit}`}
+          block={block}
+        />
         
         <Divider type="vertical" style={{ margin: '0 4px' }} />
 

src/components/Editor/blocks/TableWidthControl.tsx

@@ -11,6 +11,7 @@ import { InputNumber, Select, Space, Button } from 'antd';
 import { ColumnWidthOutlined } from '@ant-design/icons';
 import type { TableBlock } from '../../../types/editor';
 import { useEditorStore } from '../../../stores/editorStore';
+import { normalizePercents, percentToPtWidths, ptToPercentWidths, tableWidthToPt } from '../../../utils/tableUtils';
 
 // ══════════════════════════════════════════════════════════════════════════════
 // Component Props
@@ -44,16 +45,14 @@ export const TableWidthControl: React.FC<TableWidthControlProps> = ({ block }) =
   // 应用宽度变更
   const applyWidthChange = useCallback(() => {
     const safeWidth = Number.isFinite(width) && width > 0 ? width : 100;
-    const sourceColWidths = block.metadata.col_widths.length > 0
+    const sourceColWidths = block.metadata.col_widths.length === block.metadata.cols
       ? block.metadata.col_widths
-      : Array(Math.max(block.metadata.cols, 1)).fill(100 / Math.max(block.metadata.cols, 1));
-    const totalPercent = sourceColWidths.reduce(
-      (sum, value) => sum + (Number.isFinite(value) && value > 0 ? value : 0),
-      0,
+      : ptToPercentWidths(block.content.col_widths || []).slice(0, block.metadata.cols);
+    const normalizedColWidths = normalizePercents(
+      sourceColWidths.length === block.metadata.cols
+        ? sourceColWidths
+        : Array(Math.max(block.metadata.cols, 1)).fill(100 / Math.max(block.metadata.cols, 1)),
     );
-    const normalizedColWidths = totalPercent > 0
-      ? sourceColWidths.map((value) => (Number.isFinite(value) && value > 0 ? value : 0) * 100 / totalPercent)
-      : Array(sourceColWidths.length).fill(100 / sourceColWidths.length);
 
     // 更新metadata
     const newMetadata = {
@@ -63,24 +62,10 @@ export const TableWidthControl: React.FC<TableWidthControlProps> = ({ block }) =
       col_widths: normalizedColWidths,
     };
     
-    // 重新计算content.col_widths（pt单位）
-    // 根据新的表格宽度和百分比col_widths计算pt值
-    const pageWidthPt = 478; // A4默认宽度（减去边距）
-    
-    let tableActualWidthPt: number;
-    if (unit === 'percent') {
-      tableActualWidthPt = pageWidthPt * (safeWidth / 100);
-    } else if (unit === 'cm') {
-      tableActualWidthPt = safeWidth * 28.35; // 1cm = 28.35pt
-    } else if (unit === 'inch') {
-      tableActualWidthPt = safeWidth * 72; // 1inch = 72pt
-    } else {
-      tableActualWidthPt = pageWidthPt * (width / 100);
-    }
-    
-    // 根据metadata.col_widths（百分比）重新计算content.col_widths（pt）
-    const newColWidthsPt = normalizedColWidths.map(
-      (percent) => tableActualWidthPt * percent / 100
+    const newColWidthsPt = percentToPtWidths(
+      normalizedColWidths,
+      100,
+      tableWidthToPt(safeWidth, unit),
     );
     
     updateBlock(block.id, {

src/hooks/useTableResize.ts

@@ -5,7 +5,7 @@
  * 参考Notion、飞书等主流编辑器的最佳实践
  */
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import type { RefObject } from 'react';
 import { 
   getResizeBoundaries, 
@@ -55,6 +55,8 @@ export interface UseTableResizeOptions {
   rowHeights: number[];
   /** 表格总宽度百分比 */
   tableWidth: number;
+  /** 表格实际宽度（磅） */
+  tableWidthPt?: number;
   /** 是否只读 */
   readOnly?: boolean;
   /** 列宽变更回调 */
@@ -96,7 +98,7 @@ export function useTableResize(options: UseTableResizeOptions): UseTableResizeRe
     tableRef,
     colWidths,
     rowHeights,
-    tableWidth,
+    tableWidthPt,
     readOnly = false,
     onColumnResize,
     onRowResize,
@@ -112,6 +114,19 @@ export function useTableResize(options: UseTableResizeOptions): UseTableResizeRe
     boundary: null,
   });
   const [resizeLinePosition, setResizeLinePosition] = useState<number | null>(null);
+  const previousBodyCursorRef = useRef<string | null>(null);
+  const previousBodyUserSelectRef = useRef<string | null>(null);
+
+  const restoreBodyStyles = useCallback(() => {
+    if (previousBodyCursorRef.current !== null) {
+      document.body.style.cursor = previousBodyCursorRef.current;
+      previousBodyCursorRef.current = null;
+    }
+    if (previousBodyUserSelectRef.current !== null) {
+      document.body.style.userSelect = previousBodyUserSelectRef.current;
+      previousBodyUserSelectRef.current = null;
+    }
+  }, []);
 
   // ────────────────────────────────────────────────────────────────────────────
   // Hover Detection
@@ -193,10 +208,14 @@ export function useTableResize(options: UseTableResizeOptions): UseTableResizeRe
       if (!table) return;
 
       const boundary = hoverState.boundary;
-      const originalSize =
-        boundary.type === 'column'
-          ? colWidths[boundary.index]
-          : rowHeights[boundary.index];
+      const columnCount = table.querySelectorAll('col').length;
+      const safeColWidths = colWidths.length === columnCount
+        ? colWidths
+        : Array(Math.max(columnCount, 1)).fill(100 / Math.max(columnCount, 1));
+      const originalSize = boundary.type === 'column'
+        ? safeColWidths[boundary.index]
+        : rowHeights[boundary.index];
+      if (!Number.isFinite(originalSize)) return;
 
       setResizeState({
         isResizing: true,
@@ -213,7 +232,8 @@ export function useTableResize(options: UseTableResizeOptions): UseTableResizeRe
       // 更新拖拽线初始位置
       setResizeLinePosition(boundary.position);
 
-      // 添加全局样式
+      previousBodyCursorRef.current = document.body.style.cursor;
+      previousBodyUserSelectRef.current = document.body.style.userSelect;
       document.body.style.cursor = boundary.type === 'column' ? 'col-resize' : 'row-resize';
       document.body.style.userSelect = 'none';
     },
@@ -245,7 +265,12 @@ export function useTableResize(options: UseTableResizeOptions): UseTableResizeRe
       if (!resizeState?.isResizing) return;
 
       const table = tableRef.current;
-      if (!table) return;
+      if (!table) {
+        setResizeState(null);
+        setResizeLinePosition(null);
+        restoreBodyStyles();
+        return;
+      }
 
       // 计算最终偏移量
       const finalOffset =
@@ -261,13 +286,15 @@ export function useTableResize(options: UseTableResizeOptions): UseTableResizeRe
         if (tableWidthPx <= 0) {
           setResizeState(null);
           setResizeLinePosition(null);
-          document.body.style.cursor = '';
-          document.body.style.userSelect = '';
+          restoreBodyStyles();
           return;
         }
         const deltaPercent = (finalOffset / tableWidthPx) * 100;
 
-        const newColWidths = [...colWidths];
+        const columnCount = table.querySelectorAll('col').length;
+        const newColWidths = colWidths.length === columnCount
+          ? [...colWidths]
+          : Array(Math.max(columnCount, 1)).fill(100 / Math.max(columnCount, 1));
         let newWidth = resizeState.originalSize + deltaPercent;
 
         // 调整相邻列以保持总宽度不变
@@ -294,7 +321,7 @@ export function useTableResize(options: UseTableResizeOptions): UseTableResizeRe
         const normalizedWidths = normalizePercents(newColWidths);
 
         // 计算pt单位的列宽
-        const colWidthsPt = percentToPtWidths(normalizedWidths, tableWidth);
+        const colWidthsPt = percentToPtWidths(normalizedWidths, 100, tableWidthPt);
 
         // 触发回调
         onColumnResize?.(normalizedWidths, colWidthsPt);
@@ -316,7 +343,7 @@ export function useTableResize(options: UseTableResizeOptions): UseTableResizeRe
       document.body.style.cursor = '';
       document.body.style.userSelect = '';
     },
-    [resizeState, tableRef, colWidths, tableWidth, onColumnResize, onRowResize]
+    [resizeState, tableRef, colWidths, tableWidthPt, onColumnResize, onRowResize, restoreBodyStyles]
   );
 
   // ────────────────────────────────────────────────────────────────────────────
@@ -344,28 +371,22 @@ export function useTableResize(options: UseTableResizeOptions): UseTableResizeRe
    */
   useEffect(() => {
     if (resizeState?.isResizing) {
-      // 开始拖拽时添加mousedown监听
-      const table = tableRef.current;
-      if (table && hoverState.boundary) {
-        table.addEventListener('mousedown', handleResizeStart);
-      }
-
       window.addEventListener('mousemove', handleResizeMove);
       window.addEventListener('mouseup', handleResizeEnd);
 
       return () => {
-        if (table) {
-          table.removeEventListener('mousedown', handleResizeStart);
-        }
         window.removeEventListener('mousemove', handleResizeMove);
         window.removeEventListener('mouseup', handleResizeEnd);
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
+        restoreBodyStyles();
       };
     }
 
     return undefined;
-  }, [resizeState, tableRef, hoverState, handleResizeStart, handleResizeMove, handleResizeEnd]);
+  }, [resizeState, handleResizeMove, handleResizeEnd, restoreBodyStyles]);
+
+  useEffect(() => () => {
+    restoreBodyStyles();
+  }, [restoreBodyStyles]);
 
   /**
    * Hover状态变化时绑定mousedown
@@ -402,7 +423,7 @@ export function useTableResize(options: UseTableResizeOptions): UseTableResizeRe
           const newWidth = resizeState.originalSize + deltaPercent;
           
           // 计算pt值
-          const widthPt = Math.round((tableWidth / 100) * newWidth * 478 / 100 * 10) / 10;
+          const widthPt = Math.round((tableWidthPt || 478) * newWidth / 100 * 10) / 10;
           return `宽度: ${widthPt}pt`;
         } else {
           const offset = resizeState.currentPos.y - resizeState.startPos.y;

src/utils/tableUtils.ts

@@ -6,6 +6,23 @@
 
 import type { TableBlock, TableContent } from '../types/editor';
 
+export const DEFAULT_PAGE_WIDTH_PT = 478;
+
+export function tableWidthToPt(
+  width: number,
+  unit: TableBlock['metadata']['table_width_unit'] = 'percent',
+  pageWidthPt: number = DEFAULT_PAGE_WIDTH_PT,
+): number {
+  const safeWidth = Number.isFinite(width) && width > 0 ? width : 100;
+  const safePageWidth = Number.isFinite(pageWidthPt) && pageWidthPt > 0
+    ? pageWidthPt
+    : DEFAULT_PAGE_WIDTH_PT;
+
+  if (unit === 'cm') return safeWidth * 28.35;
+  if (unit === 'inch') return safeWidth * 72;
+  return safePageWidth * safeWidth / 100;
+}
+
 /**
  * 计算列宽百分比转pt
  * 
@@ -17,13 +34,13 @@ import type { TableBlock, TableContent } from '../types/editor';
 export function percentToPtWidths(
   percentWidths: number[],
   tableWidthPercent: number = 100,
-  pageWidthPt: number = 478 // A4纸宽度595pt - 左右边距各71pt ≈ 453pt
+  pageWidthPt: number = DEFAULT_PAGE_WIDTH_PT // A4纸宽度595pt - 左右边距各71pt ≈ 453pt
 ): number[] {
   const safePageWidthPt = Number.isFinite(pageWidthPt) && pageWidthPt > 0 ? pageWidthPt : 478;
   const safeTableWidthPercent = Number.isFinite(tableWidthPercent) && tableWidthPercent > 0
     ? tableWidthPercent
     : 100;
-  const tableActualWidthPt = safePageWidthPt * (safeTableWidthPercent / 100);
+  const tableActualWidthPt = tableWidthToPt(safeTableWidthPercent, 'percent', safePageWidthPt);
   const validWidths = percentWidths.map((percent) => Number.isFinite(percent) && percent > 0 ? percent : 0);
   const totalPercent = validWidths.reduce((sum, percent) => sum + percent, 0);
   const fallbackPercent = validWidths.length > 0 ? 100 / validWidths.length : 0;
@@ -200,21 +217,21 @@ export function getResizeBoundaries(table: HTMLTableElement): ResizeBoundary[] {
   const boundaries: ResizeBoundary[] = [];
   const MIN_CELL_SIZE = 40; // 最小单元格尺寸(px)
   
-  // 获取列边界
-  const firstRow = table.rows[0];
-  if (firstRow) {
+  // 使用 colgroup 获取逻辑列，避免首行包含 rowspan/colspan 时丢失边界。
+  const columns = Array.from(table.querySelectorAll('col'));
+  if (columns.length > 1) {
+    const tableRect = table.getBoundingClientRect();
     let cumulativeX = 0;
-    for (let i = 0; i < firstRow.cells.length - 1; i++) {
-      const cell = firstRow.cells[i];
-      const cellWidth = cell.offsetWidth;
+    for (let i = 0; i < columns.length - 1; i += 1) {
+      const columnRect = columns[i].getBoundingClientRect();
+      const cellWidth = columnRect.width || (tableRect.width / columns.length);
       cumulativeX += cellWidth;
-      
       boundaries.push({
         type: 'column',
         index: i,
         position: cumulativeX,
         minPosition: cumulativeX - cellWidth + MIN_CELL_SIZE,
-        maxPosition: cumulativeX + firstRow.cells[i + 1].offsetWidth - MIN_CELL_SIZE,
+        maxPosition: cumulativeX + (columns[i + 1].getBoundingClientRect().width || cellWidth) - MIN_CELL_SIZE,
       });
     }
   }