How to make an inner-bordered table in angular material - css

Question

I want to make a table with angular-material, like this:
<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>
And i want to be seen just inner borders of this structure. How can I do this?

Answer 1

In your case you need to define three row class as first-row, row and last-row for top and bottom border and three cell class as first-cell , cell and last-cell for left and right side border.
CSS file
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 File
<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>
Here is working example. http://codepen.io/next1/pen/PNxxyR