Why header is bigger as height size as show in image?

Question

Why header is bigger as height size as show in image?

I am trying to make grid view in Ionic. I am able to make grid view but I am facing some css issue .

First my header height is too large as compared to image why? I need to reduce the height of the header or title of table.
I am able to to give margin-left: 5%. It's working but if is margin-right: 5% is not working. Why?
How to give different colour of alternate row?
How to give colour separate line as show in image. To separate the column they use line:

Here is my code

http://plnkr.co/edit/FqL7g2w5yLEREopY4B10?p=preview

.mrginrightleft {
   margin-left: 5%; 
   margin-right: 5%;
}
.brd {
  border: 1px solid grey;
}

css
ionic-framework
ionic

Answer 1

If you remove the width on your .row your margin-right works

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 5px;
  /* width: 100%; */

As for your alternate row color, @fsacer was correct to use nth:child(odd) / (even);, except your header row has the same classes. You could make it easier and add different class names to the "table rows" and exclude the header as so:

      <div class="row gray-20 mrginrightleft">
        <div class="col col-center " ng-repeat="d in data | filter:{checked: true}"><i class="button button-icon icon ion-arrow-down-b" ng-click="sortdata()"></i><strong>{{d.label}}</strong></div>
        <div class="col col-10 text-center ">
          <button class=" button-icon icon ion-gear-b" ng-click="openPopover($event)"></button>
        </div>
      </div>
      <!-- added class "table-row" -->
      <div class="row mrginrightleft table-row" ng-repeat="column in displayData | filter: query">
        <div class="col col-center brd" ng-repeat="field in column.columns" ng-show="data[$index].checked && data[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
        <div class="col col-10 text-center brd">
        </div>
      </div>

.scroll > .table-row:nth-child(odd) > div {
     background-color: red;
}

.scroll > .table-row:nth-child(even) > div {
     background-color: blue;
}

or make it harder: (didn't test below - might have to play w/ the (2n+2) part)

.scroll > div.row.mrginrightleft:nth-child(2n+2) > div {
     background-color: red;
}

.scroll > div.row.mrginrightleft:nth-child(even) > div {
     background-color: blue;
}