使用NgTableParams在IE中表格行与表头对齐异常问题求助

我之前处理过类似的IE下NgTable表头错位问题，分享几个实用的解决思路：

1. 强制IE使用最新渲染引擎 #

IE的兼容性模式经常是样式错乱的元凶，先确保页面头部添加了以下meta标签，强制IE用最新的文档模式渲染：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

这个标签要放在<head>的最前面，避免被其他元素影响生效。

2. 修复表格的CSS布局问题 #

你用到了自定义的table-scroll类，IE对表格布局的处理和Chrome有差异，试试添加以下CSS规则：

.table-scroll {
  table-layout: fixed; /* 固定表格布局，让列宽度统一计算 */
  width: 100%;
}

.table-scroll th, .table-scroll td {
  box-sizing: border-box; /* 确保padding和border不占用额外宽度 */
  /* 如果是多列，可以给每列设置固定宽度，比如 width: 200px; */
}

table-layout: fixed会让表格根据表头的宽度来计算列宽，避免IE下动态生成的表头和表格主体宽度不一致的问题。

3. 确保NgTable初始化时机正确 #

有时候IE下DOM渲染速度较慢，NgTable可能在表格还没完全渲染时就计算了宽度，导致错位。可以尝试在数据加载完成后手动触发表格重绘：

// 在你的BaseController中，数据加载完成后调用
$scope.tableParams.reload();
// 或者确保scope更新
$scope.$apply();

修改后的示例代码 #

结合上面的调整，你的HTML代码可以改成这样：

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    .table-scroll {
      table-layout: fixed;
      width: 100%;
    }
    .table-scroll th, .table-scroll td {
      box-sizing: border-box;
    }
  </style>
</head>
<div ng-controller="BaseController">
  <div class="col-xs-5 container-paragraph">
    <table ng-table="tableParams" class="table table-striped table-scroll" show-filter="true">
      <tr ng-repeat="user in $data">
        <td title="'Name'" filter="{ firstname: 'text'}" sortable="'firstname'">
          {{user.firstname}}
        </td>
      </tr>
    </table>
  </div>
  <div class="col-xs-7 container-paragraph">
    <table ng-table="tableParams" class="table table-striped table-scroll" show-filter="true">
      <tr ng-repeat="user in $data">
        <td title="'Name'" filter="{ firstname: 'text'}" sortable="'firstname'">
          {{user.firstname}}
        </td>
      </tr>
    </table>
  </div>
</div>

如果以上方法还是没解决问题，可以检查是否有其他自定义CSS和NgTable默认样式冲突，或者尝试升级NgTable到最新版本——旧版本的NgTable确实存在一些IE兼容性bug。

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