IE11中粘性表头宽度异常：嵌套表格布局position:fixed错位

嘿，这个问题我太熟了！很多人在用独立table做粘性表头时都会踩这个坑——position:fixed的元素会彻底脱离文档流，它的宽度计算基准是整个视口，而不是你以为的父容器，所以width:inherit根本起不到作用。下面给你几个实战验证过的解决方案，按靠谱程度排序：

1. JavaScript动态同步列宽（最精准，适配动态布局） #

这是我最推荐的方案，因为你的布局是动态生成的，JS可以实时匹配父表格和表头的列宽：

• 第一步：监听页面加载、窗口resize，以及父表格数据更新的事件
• 第二步：获取父表格每一列的实际宽度（用offsetWidth能拿到包含内边距的真实宽度）
• 第三步：把这些宽度一一赋值给粘性表头的对应列

示例代码：

function syncStickyHeaderWidths() {
  // 获取父表格的所有列（取第一行的列即可）
  const parentCols = document.querySelector('.parent-table tr').querySelectorAll('td, th');
  // 获取粘性表头的所有列
  const stickyCols = document.querySelector('.sticky-header-table tr').querySelectorAll('th');
  
  // 一一同步宽度
  parentCols.forEach((col, index) => {
    if (stickyCols[index]) {
      stickyCols[index].style.width = `${col.offsetWidth}px`;
    }
  });
}

// 初始化执行
window.addEventListener('load', syncStickyHeaderWidths);
// 窗口大小变化时同步
window.addEventListener('resize', syncStickyHeaderWidths);
// 如果父表格是动态渲染的，记得在渲染完成后调用这个函数

2. 用position:sticky替代fixed（更简洁，布局允许的话首选） #

如果你的粘性表头不需要脱离父表格的滚动范围，只是滚动时固定在顶部，完全可以不用fixed，直接用sticky：

• 给表头的th元素加以下CSS：

.sticky-header-table th {
  position: sticky;
  top: 0;
  background-color: #ffffff; /* 必须加背景色，防止被下面的内容穿透 */
  z-index: 10; /* 确保表头在最上层 */
}

• 注意事项：父容器不能设置overflow:hidden，否则sticky会失效；同时给父表格和表头表格都设置width:100%，并开启table-layout:fixed来固定列宽比例，避免错位：

.parent-table, .sticky-header-table {
  width: 100%;
  table-layout: fixed;
}

3. 给Fixed表头套约束容器（适合静态布局） #

如果必须用fixed定位，可以给表头套一个和父容器同宽的wrapper，再让表头占满wrapper的宽度：

/* 约束容器：继承父容器的宽度 */
.sticky-header-wrapper {
  position: relative;
  width: inherit;
  max-width: inherit;
}

/* 表头表格：固定在顶部，宽度占满wrapper */
.sticky-header-table {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #ffffff;
}

不过这个方法在动态布局下容易失效，因为wrapper的宽度不会自动随父容器变化，所以还是优先前两种方案。

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