角度ui网格列标题未与数据对齐

Question

我正在实现一个包含6列的基本表ui-grid，它跨越页面的宽度，但我注意到列标题宽度与数据没有整齐对齐。查看计算出的CSS值，标题与数据的宽度偏差<1像素（例如标题中的182.222229003906与数据中的182.986114501953）

在前几列中，差异并不明显，但在最右边的列中更明显。我已经删除了自定义CSS类来检查是否存在对ui-grid渲染的干扰，但得到了相同的结果。

然后我发现，即使在某些教程页面中，行为也存在。示例：ui-grid教程中的此页面：

http://ui-grid.info/docs/#/tutorial/321_singleFilter

gridOptions非常简单：

columnDefs: [
  { field: 'name' },
  { field: 'gender', cellFilter: 'mapGender' },
  { field: 'company' },
  { field: 'email' },
  { field: 'phone' },
  { field: 'age' },
  { field: 'mixedDate' }
]

我在教程中浏览了其他示例，发现并非所有网格都遇到此问题。 （例如，这个：http://ui-grid.info/docs/#/tutorial/401_AllFeatures整齐排列）是什么影响了这种行为以及如何避免它？

谢谢！

Answer 1

我有同样的问题。我使用下面的样式更改来解决问题

.ui-grid-header-cell {float: left;}

Answer 2

我最终在github上使用了chuge中的以下内容。

.ui-grid-header-cell-wrapper {
    display: block;
}

.ui-grid-header-cell-row {
    display: block;
}

.ui-grid-header-cell {
    display: block;
    float: left;
}

https://github.com/angular-ui/ui-grid/issues/3854

似乎仍然是一个问题，因为这个错位有很多问题。

Answer 3

我有这个问题，并且在几个小时后撕掉我的头发：它在IE11和Chrome v.51（Windows）中显示不正确

我在html表中的TD内部有一个网格 - 当我把它移到DIV中时，一切都正确呈现。

Answer 4

修复了更新ui-grid.css的原始代码：

修改类并在原始css代码后添加最后一行。

.ui-grid-top-panel {..... float：left; }