0

我在我的 AngularJS 应用程序中使用“ngTable”组件（在此处输入链接描述）来呈现表格数据。它使用起来比 ngGrid 简单一点，而且我不喜欢 ngGrid 如何配置您的表格（我特别不喜欢将表格标题字符串放在 javascript 中，而不是放在 HTML 中）。

尽管 ngTable 运行良好，但它的可配置性似乎存在一些限制。例如，我只想在标题和单元格中添加列分隔符。在 HTML 中引用 ngTable 的方式，您无需指定表头元素，只需指定单元格。我想我可以在“td”元素上放置一个类来为单元格添加分隔符，但这不会影响标题。

有人对如何做到这一点有一些想法吗？

4

1 回答 1

0

你可以在 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

于 2014-03-13T00:27:28.587 回答