Угловая разметка контейнера для разметки контейнера

Question

Я создаю таблицу, используя контейнеры для разметки углового материала. Мой вопрос прост, как я могу свернуть границы div? Пожалуйста, проверьте мой jsfiddle того, что я сделал

Jsfiddle

HTML код ниже. Цените любое руководство.

<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> 

Мой код выглядит следующим образом:

Answer 1

Вот модифицированная версия вашего jsFiddle:

http://jsfiddle.net/ccf0sphf/13/

Результат получается не используя border-collapse, который требует отображения <DIV>s в виде таблицы, но вместо с комбинацией комбинаторов CSS (> дочерний селектор) и ng-class:

div.col { 
    border-top: solid 1px black; 
} 
div.col > div.box { 
    border-bottom: solid 1px black; 
    border-right: solid 1px black; 
} 

класс ниже, используется в нг-классе применяется только к первой колонке:

div.col-first { 
    border-left: solid 1px black; 
} 

Этот прием необходим, потому что есть <SPAN> элемента в качестве первого элемента в столбце, в противном случае мы могли бы использовать a first-child псевдоэлемент, чтобы получить тот же результат.