角度材料

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-cell、cellとlast-cellなど3つのcellクラスのfirst-row、rowとlast-rowとして3行クラスを定義する必要があります。

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