如何使用angularjs的ngTable添加列分隔符

How to add column separators with angularjs ngTable

本文关键字：添加 分隔符 ngTable 何使用 angularjs      更新时间：2023-09-26

我在AngularJS应用中使用"ngTable"组件(在这里输入链接描述)来呈现表格数据。它比ngGrid使用起来简单一点，我不喜欢ngGrid配置你的表的方式(我特别不喜欢把表头字符串放在javascript中，而不是在HTML中)。

虽然ngTable工作得很好，但它的可配置性似乎有一些限制。例如，我只想在标题和单元格中添加列分隔符。ngTable在HTML中被引用的方式是，你不指定表头元素，只指定单元格。我想我可以在"td"元素上添加一个类来为单元格添加分隔符，但这不会影响标题。

有人知道怎么做吗?

你可以在CSS中这样做

table.ng-table thead th:not(:first-child) {
  border-left: 1px solid red;
}
table.ng-table thead th:not(:last-child) {
  border-right: 1px solid red;
}
table.ng-table tbody td:not(:first-child) {
  border-left: 1px solid blue;
}
table.ng-table tbody td:not(:last-child) {
  border-right: 1px solid blue;
}

示例:http://plnkr.co/edit/t77lzM1o6Xh2PBnhZqw6?p=preview

这种方法的唯一缺点是它不能在IE <9中工作。为了让它在IE <9上工作，那么当你定义<td>并在css中匹配它们时，你必须为每列添加类。

如果你只想为特定的列设置边框那么css就简单多了你可以给想要设置边框的列添加一个类然后在css中为td.col-style-name添加一个border-left或border-right

相关文章：