Question

我正在实现一个基本的表ui-grid，其中包含跨越页面宽度的6列，但我注意到列标题宽度与数据没有整齐对齐。查看计算出的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 { ..... 向左飘浮; }

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

4 个答案: