WordPress表格插件：粘性表头引发列宽异常的解决诉求

方案一：用position: sticky替代fixed（推荐） #

sticky定位不会让表头脱离表格文档流，能自动和表格列宽保持一致，无需额外调整：

表格专属CSS代码： #

/* 确保表格宽度适配容器，避免列宽错乱 */
#your-table-id {
  width: 100%;
  border-collapse: collapse; /* 可选，合并边框优化布局 */
}

/* 设置表头粘性定位 */
#your-table-id thead th {
  position: sticky;
  top: 0;
  background-color: #fff; /* 加背景色防止下方内容穿透 */
  z-index: 10; /* 确保表头处于上层 */
}

将#your-table-id替换为你的表格实际ID。

方案二：保留position: fixed，用JS同步列宽 #

如果必须使用fixed定位，需要通过JS同步表头与表格主体的列宽：

全局JS代码： #

function syncTableColumnWidths() {
  const table = document.getElementById('your-table-id');
  if (!table) return;

  const tbodyCells = table.querySelectorAll('tbody tr:first-child td');
  const headerCells = table.querySelectorAll('thead th');

  tbodyCells.forEach((cell, index) => {
    const width = cell.offsetWidth;
    if (headerCells[index]) {
      headerCells[index].style.width = `${width}px`;
    }
  });
}

// 页面加载完成后同步列宽
window.addEventListener('load', syncTableColumnWidths);
// 窗口大小改变时重新同步
window.addEventListener('resize', syncTableColumnWidths);

替换#your-table-id为目标表格ID。

补充CSS调整： #

给表格主体设置上边距，避免表头覆盖内容：

#your-table-id tbody {
  margin-top: /* 表头行的实际高度，比如50px */;
}

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