富文本编辑器表格跨列合并后样式错乱怎么办？

W″一硕提问于 2026-01-28 22:08:28 阅读 42

交互

我在用Quill做表格编辑功能时，合并单元格后相邻列的宽度会错乱。比如用下面这段代码合并两列后，右边的单元格会挤到左边：


function mergeCells(start, end) {
  const table = this.quill.getSelection().table;
  table.mergeCells(start.row, start.column, end.row - start.row + 1, 'col');
  this.quill.format('tableHeader', true);
}

已经尝试过手动设置colspan和width样式，但合并后其他单元格宽度还是自动塌陷。用Chrome开发者工具看DOM结构没问题，就是渲染显示不对，卡了两天了完全没头绪…

我来解答赞 6 收藏

反馈

1 条解答

诸葛俊浩 Lv1

这个问题我也遇到过，Quill的表格模块确实有点坑。直接改样式没用是因为合并单元格后，浏览器默认会重新计算布局。

你可以试试在合并操作完成后，强制刷新一下表格的布局。给你的代码加一段修正逻辑：

function mergeCells(start, end) {

  const table = this.quill.getSelection().table;

  table.mergeCells(start.row, start.column, end.row - start.row + 1, 'col');

  

  // 强制刷新布局

  setTimeout(() => {

    const tableElement = document.querySelector('.ql-table');

    Array.from(tableElement.querySelectorAll('td')).forEach(cell => {

      cell.style.minWidth = ${cell.offsetWidth}px;

    });

  }, 0);



  this.quill.format('tableHeader', true);

}

这里的 setTimeout 是为了让样式更新延迟到DOM渲染完成之后。虽然不太优雅，但确实能解决问题。

另外提醒一下，Quill的表格功能本身支持有限，如果需求复杂可能要考虑换更专业的富文本编辑器。希望能帮到你！

2026-01-30 02:03