CODEWITHSUNDEEP
cssangularjsangular-material
Filosssof
Filosssof

Reputation: 1358

How to make an inner-bordered table in angular material

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? enter image description here

Upvotes: 0

Views: 912

Answers (1)

nextt1
nextt1

Reputation: 3988

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

Upvotes: 1

Related Questions