Angular Div layout container border collapse - html

Question

I am generating a table using angular material's div layout containers. My question is simple, how do I collapse the div's borders? Please check out my jsfiddle of what I have done
Jsfiddle
HTML code below. Appreciate any guidance thanks.
<div ng-app="myApp" ng-controller="mainCtrl">
<script type="text/ng-template" id="/template">
<button ng-click="testFn()">Test</button>
<div layout="row">
<div flex ng-repeat="col in column"><span>HEADER{{$index}}</span>
<div layout="column">
<div flex style="border: 1px solid black;" ng-repeat="row in [1,2,3]">{{$index}}</div>
</div>
</div>
</div>
</script>
<form-table table-layout=tableLayout|filter:{table_id:1}></form-table>
</div>
My code as follows:

Answer 1

Here is a modified version of your jsFiddle:
http://jsfiddle.net/ccf0sphf/13/
The result is obtained not using border-collapse which requires displaying <DIV>s as a table but instead with a mix of CSS combinators (> child selector) and ng-class:
div.col {
border-top: solid 1px black;
}
div.col > div.box {
border-bottom: solid 1px black;
border-right: solid 1px black;
}
the class below is used in an ng-class to apply only to the first column:
div.col-first {
border-left: solid 1px black;
}
This trick is necessary because there is a <SPAN> element as first element in the column, otherwise we could use a first-child pseudo-element to obtain the same result.