对于 Angularjs ui 网格删除右下滚动边框答案

【问题标题】：For Angular js ui grid remove right and bottom scrolling boarders对于 Angularjs ui 网格删除右下滚动边框
【发布时间】：2015-08-31 10:01:11
【问题描述】：

在 Angular js ui rid 中，如何删除垂直和水平滚动条？

默认情况下，对于每个列标题，我都会得到一个小胡萝卜图标，它显示升序排序、降序排序、隐藏列。我也想从我的列标题中删除它。

我想使用 .table-bordered，而不是默认为 ui 网格提供的 .table-striped。有没有什么地方可以将这些参数设置为ui grid？

【问题讨论】：

标签： angularjs angular-ui angular-ui-bootstrap angular-ui-grid

【解决方案1】：

    enableHorizontalScrollbar : 0,
    enableVerticalScrollbar : 0,
    enableSorting : false,
    enableColumnMenus : false;

【讨论】：

【解决方案2】：

@Asqan 很好地回答了您问题的第一部分。第二部分：

我想使用 .table-bordered，而不是 ui 网格默认提供的 .table-striped。有没有什么地方可以将这些参数设置为ui grid？

我在想你的意思是你想要我创建的 this plunker 的外观。

您可以通过两种通用方式之一解决这些 css 问题。

1) 自定义 ui-grid css

2) 保留原来的 ui-grid css 然后在你自己的 css 文件中覆盖它

我展示了解决“剥离”问题的第一个选项和实现所需边框的第二个选项。 我已经做了两个例子，所以你可以看到这两个选项 - 我建议选择和使用一致的方法。

ui-grid 设置您在 css 中引用的“.table-striped”外观。您可以在自己的 css 文件中覆盖它，也可以使用 customizer tool 并将 @rowcoloreven 和 @rowcolorodd 字段设置为白色 #ffffff 的十六进制代码。这将更新 ui-grid css 以包含以下内容：

.ui-grid-row:nth-child(odd) .ui-grid-cell {
  background-color: #ffffff;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
  background-color: #ffffff;
}

对于“.table-bordered”，请在 style.css 文件中具体查看这些添加的行

.ui-grid-cell {
    border-style: solid;
    border-bottom: 1px #ff0000;
}

【讨论】：