Angular Div布局容器边框折叠

时间:2016-01-03 07:28:03

标签: html css angularjs

我使用角度材质的div布局容器生成一个表。我的问题很简单,如何解开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>

我的代码如下:

1 个答案:

答案 0 :(得分:1)

以下是jsFiddle的修改版本:

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

获得的结果不是border-collapse,而是<DIV>s需要将ng-class显示为一个表,而是混合使用CSS组合器(&gt;子选择器)和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;
}

以下类在ng-class中用于仅应用于第一列:

<SPAN>

这个技巧是必要的,因为列中有第一个元素first-child元素,否则我们可以使用library(RcppBDT) dates <- seq(as.Date("2010-01-01"), as.Date("2015-12-31"), by="1 month") do.call(c, lapply(dates-1, getFirstDayOfWeekAfter, dow=Mon)) # [1] "2010-01-04" "2010-02-01" "2010-03-01" "2010-04-05" "2010-05-03"... 伪元素来获得相同的结果。