如何重新对齐Tabulator表格错位的单元格

之前为了实现下拉菜单显示在行外，添加了以下CSS：

#example-table {
  overflow: visible !important;
}

#example-table .tabulator-cell {
  overflow: visible !important;
}

#example-table .tabulator-tableholder {
  overflow: visible !important;
}

但添加后表格最后一个单元格出现错位，无法与其他单元格保持同一行。

问题原因 #

Tabulator默认给表格容器tabulator-tableholder和内部表格tabulator-table设置了table-layout: fixed来保证列宽稳定，当强行把overflow改为visible后，单元格的布局计算逻辑被打乱，尤其是最后一列因为设置了固定宽度，更容易出现偏移错位。

修复方案 #

保留实现下拉菜单行外显示的核心CSS，同时补充布局规则，强制行内单元格对齐：

1. 给表格容器添加相对定位，避免溢出内容干扰整体布局
2. 强制表格行保持默认的表格行布局，确保单元格垂直对齐
3. 清理重复的CSS规则，避免样式冲突

修改后的完整CSS代码：

/* 核心：让下拉菜单可以显示在行外 */
#example-table {
  overflow: visible !important;
}

#example-table .tabulator-cell {
  overflow: visible !important;
}

#example-table .tabulator-tableholder {
  overflow: visible !important;
  position: relative; /* 新增：固定容器定位，避免溢出内容乱跑 */
}

/* 表格行与单元格布局修复 */
#example-table .tabulator-table {
  table-layout: fixed !important; /* 保留固定布局，保证列宽稳定 */
}

#example-table .tabulator-row {
  display: table-row !important; /* 强制行布局，确保单元格对齐 */
  border: 0 !important;
}

/* 原有自定义样式保留 */
#example-table .tabulator-row>div {
  border-top: 1px solid rgb(238, 236, 236) !important;
  border-bottom: 1px solid rgb(238, 236, 236) !important;
}

#example-table .tabulator-row>div:first-child {
  border-left: 1px solid rgb(238, 236, 236) !important;
}

#example-table .tabulator-row .tabulator-cell:last-of-type{
  border-right: 1px solid rgb(238, 236, 236) !important;
}

#example-table .tabulator-row-even {
  background-color: #FFF !important
}

#example-table .tabulator-row.tabulator-selectable:hover {
  background-color: rgba(248, 249, 250, 1) !important;
}

#example-table .tabulator-table>.tabulator-row:last-of-type>.tabulator-cell:first-of-type {
  border-bottom-left-radius: 8px !important;
}

#example-table .tabulator-table>.tabulator-row:last-of-type>.tabulator-cell:last-of-type {
  border-bottom-right-radius: 8px !important;
}

#example-table .tabulator-table>.tabulator-row:first-of-type>.tabulator-cell:first-of-type {
  border-top-left-radius: 8px !important;
}

#example-table .tabulator-table>.tabulator-row:first-of-type>.tabulator-cell:last-of-type {
  border-top-right-radius: 8px !important;
}

#example-table .tabulator-col-resize-handle {
  display: none !important
}

#example-table .tabulator-cell {
  vertical-align: baseline !important
}

#example-table .tabulator,
#example-table .tabulator-col {
  background-color: rgba(248, 249, 250, 1) !important;
}

#example-table .tabulator .tabulator-header {
  border: 0!important;
}

额外说明 #

• 给所有样式加上#example-table前缀，避免影响页面上其他Tabulator表格
• 移除了重复的overflow: visible规则，减少代码冗余
• 保留table-layout: fixed能确保列宽不会因为内容变化而打乱整体布局，同时配合display: table-row强制单元格保持在行内对齐

内容的提问来源于stack exchange，提问作者executable