IE11环境下表格表头固定功能失效求解，功能在Chrome运行正常

失效原因 #

你现在用的transform: translateY()实现固定表头的方案，在IE11里存在兼容性问题：IE11对表格<thead>内的<th>元素的变换属性支持不完善，渲染逻辑和Chrome差异很大，所以才会出现失效情况。另外你现有代码里每个数据行循环都套了一层<tbody>，属于不规范的表格写法，也会加剧IE11的渲染异常。

可直接落地的适配方案 #

方案1：最小改动适配（只改JS和加少量CSS，不用动结构） #

首先给外层容器和表头加基础样式：

.tableFixHead {
  overflow-y: auto;
  /* 这里设置你需要的表格滚动区域高度 */
  height: 500px;
}
.tableFixHead thead th {
  position: relative;
  /* 必须设置背景色，否则滚动时会透出下方的内容 */
  background-color: #ffffff;
}

然后把原来的jQuery代码替换成下面的，用top属性代替transform，IE11对relative定位的top属性支持完美：

$(document).ready(function () {
  var $th = $('.tableFixHead').find('thead th');
  $('.tableFixHead').on('scroll', function () {
    $th.css('top', this.scrollTop + 'px');
  });
});

记得先把你现有代码里的<tbody>挪到循环外面，一个表格只需要一个tbody：

<!-- 错误写法 -->
@foreach (var item in Model) {  
  <tbody>
    <tr>...</tr>
  </tbody>
}

<!-- 正确写法 -->
<tbody>
@foreach (var item in Model) {  
  <tr>...</tr>
}
</tbody>

方案2：高稳定适配（无滚动抖动，IE11兼容最好） #

如果方案1还有列对齐或者抖动问题，可以用拆分表头表体的方案，完全规避IE11的表格渲染问题：

1. 调整表格结构，把表头单独放在滚动容器外：

<!-- 独立表头 -->
<table style="margin: 0 auto; table-layout: fixed; width: 100%;" id="headerTable">
  <thead>
    <tr>   
      <th>STATUS</th>  
      <th>EMP #</th>  
      <th>TYPE</th>
      <!-- 其余表头列和原来一致 -->
    </tr>   
  </thead>
</table>
<!-- 滚动内容区 -->
<div class="tableFixHead" style="overflow-y: auto; height: 500px;">
  <table style="margin: 0 auto; table-layout: fixed; width: 100%;" id="bodyTable">
    <tbody>
      @foreach (var item in Model) {  
        <tr>  
          <!-- 内容列和原来一致 -->
        </tr>  
      }
    </tbody>
  </table>
</div>

2. 给每列设置统一宽度，保证表头和内容列对齐：

/* 示例：给前两列设置宽度，其余列按需设置即可 */
#headerTable th:nth-child(1), #bodyTable td:nth-child(1) {
  width: 80px;
}
#headerTable th:nth-child(2), #bodyTable td:nth-child(2) {
  width: 70px;
}

这个方案不需要监听滚动事件修改元素属性，运行最稳定，完全适配IE11，也不需要升级你现有的MVC4、jQuery1.7依赖。

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