角度 ui-grid 列标题未与数据对齐答案

【问题标题】：angular ui-grid column header is not aligned with data角度 ui-grid 列标题未与数据对齐
【发布时间】：2015-08-26 11:19:36
【问题描述】：

我正在实现一个基本的表格 ui-grid，其中包含 6 列跨越页面的宽度，但我注意到列标题宽度与数据没有整齐对齐。查看计算出的 CSS 值，标题与数据的宽度相差

在前几列中，差异并不明显，但在最右边的列中变得更加明显。我已经删除了自定义 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 都整齐地对齐）什么会影响这种行为以及如何避免这种行为？

谢谢！

【问题讨论】：

我在 IE 和 Firefox 的单个过滤器教程页面上看到了您提到的问题，但在 Chrome 中没有。因此，不幸的是（或幸运的是，取决于您的情况），它看起来像是特定于浏览器的。我注意到有效的列具有固定宽度。我想知道是否值得先尝试一下 - 尝试一个、部分或所有具有特定宽度的列？
感谢您的观察 - 固定宽度的列没有这个问题。我现在就这么做。
我通常使用百分比来指定宽度，这样也可以。（我们的用户必须使用 Chrome，所以我不确定这是否可行，因为我不需要使用其他浏览器......）

标签： angularjs angular-ui-grid

【解决方案1】：

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

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

【讨论】：

这解决了谢谢，但我希望我不必这样做#codesmell

【解决方案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

似乎仍然是一个问题，因为这种错位存在许多问题。

【讨论】：

【解决方案3】：

我遇到了这个问题，我的头发被扯了几个小时：它在 IE11 和 Chrome v.51 (Windows) 中显示不正确

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

【讨论】：

【解决方案4】：

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

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

.ui-grid-top-panel { ...... 向左飘浮; }

【讨论】：