How to add column separators with angularjs ngTable

Question

I'm using the "ngTable" component (enter link description here) in my AngularJS app to present tabular data. It's a little simpler to use than ngGrid, and I don't like how ngGrid configures your table (I especially don't like putting the table header strings in javascript, instead of in the HTML).

Although ngTable works well enough, there appear to be some limitations in its configurability. For instance, I'd like to just add column separators to the header and cells. The way ngTable is referenced in HTML, you don't specify the table header elements, just the cells. I suppose I could put a class on the "td" elements to add separators to the cells, but that wouldn't affect the header.

Anyone got some ideas of how to do this?

Answer 1

You can just do that in 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;
}

Example here: http://plnkr.co/edit/t77lzM1o6Xh2PBnhZqw6?p=preview

The only downside to this approach is that it won't work in IE <9. To get it to work on IE <9 then you would have to add classes to each column when you define the <td> and match them in css.

If you only want a border for a specific column then the css is actually easier as you can just add a class to the column you want the border on and then in your css just add a border-left or border-right for that td.col-style-name