如何在角材料中制作内边桌

Question

我想用角质材料制作一张桌子，如下所示：

<div class="xo-container" layout="column"  layout-align="center center">
    <div layout="row">
        <div class="cell" flex="33">1</div>
        <div class="cell" flex="33">2</div>
        <div class="cell" flex>3</div>
    </div>

    <div layout="row">
        <div class="cell" flex="33">1</div>
        <div class="cell" flex="33">2</div>
        <div class="cell" flex>3</div>
    </div>

    <div layout="row">
        <div class="cell" flex="33">1</div>
        <div class="cell" flex="33">2</div>
        <div class="cell" flex>3</div>
    </div>
</div>

我想看到这个结构的内部边界。我怎样才能做到这一点？

Answer 1

在您的情况下，您需要将三个行类定义为first-row，将row和last-row定义为顶部和底部边框，将三个cell类定义为first-cell ，cell和last-cell左右边框。

CSS文件

div.first-row div{
 border-bottom: 1px solid black;
}

div.row div{
 border-top: 1px solid black;
 border-top: 1px solid black;
}

div.last-row div{
border-top: 1px solid black;
}

div.first-cell {
 border-right: 1px solid black;
}

div.cell {
 border-right: 1px solid black;
 border-left: 1px solid black;
}

div.last-cell {
 border-left: 1px solid black;
}

HTML文件

<div layout="column" flex style='background-color:red'>
 <span flex="10"></span>
<div layout="row" class="first-row">
    <div class="first-cell" flex="33">Content 1</div>
    <div class="cell" flex="33">Content 2</div>
    <div class="last-cell" flex>Content 3</div>
</div>

<div layout="row">
    <div class="first-cell" flex="33">Content 11</div>
    <div class="cell" flex="33">Content 22</div>
    <div class="last-cell" flex>Content 33</div>
</div>

<div layout="row" class="last-row">
    <div class="first-cell" flex="33">Content 111</div>
    <div class="cell" flex="33">Content 222</div>
    <div class="last-cell" flex>Content 333</div>
</div>  

这是一个有效的例子。 http://codepen.io/next1/pen/PNxxyR