Ionic Grid Striped Rows re: Stack Overflow Question

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Tabs Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">

  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MyController">
  
  <ion-view>
    <ion-content class="padding">
    
      <div class="row header-row">
        <div class="col col-center brd gray-20" ng-repeat="d in data | filter:{checked: true}"><sort-header label="{{d.label}}" index="{{d.index}}" sort-exp="setSort(idx, reverse)"></sort-header></div>
        <div class="col col-10 text-center brd gray-20">
          <button class="button-icon icon ion-gear-b" ng-click="openPopover($event)"></button>
        </div>
      </div>
      <div class="row" ng-repeat="column in displayData | orderBy: sortval:reverse | filter: query" ng-class="{'odd-row':$odd}">
        <div class="col col-center brd collapse-sm" 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 collapse-sm"></div>
      </div>
    </ion-content>
  </ion-view>

<script id="my-column-name.html" type="text/ng-template">
  <ion-popover-view>
      <ion-header-bar>
          <h1 class="title">Show Columns</h1>
      </ion-header-bar>
      <ion-content>
          <ul class="list" ng-repeat="item in data">
              <li class="item item-checkbox">
                  <label class="checkbox">
                      <input type="checkbox" ng-model="item.checked">
                  </label>
                  {{item.label}}
              </li>
          </ul>
      </ion-content>
  </ion-popover-view>
</script>

<script id="sort-header.html" type="text/ng-template">
  <button class="button button-clear button-dark" ng-click="sortstring({idx:idx, reverse:reverse});">
    <i class="icon" ng-class="{'ion-arrow-down-b': reverse, 'ion-arrow-up-b': !reverse}"></i>  <strong>{{label}}</strong>
  </button>
</script>
  
</body>

</html>

angular.module('ionicApp', ['ionic'])
.controller('MyController', function($scope, $filter, $ionicPopover) {
  $scope.data=[ {
    "label" : "Inject",
    "fieldNameOrPath" : "Name"
  }, {
    "label" : "Last Name",
    "fieldNameOrPath" : "r.Name"
  }, {
    "label" : "Type",
    "fieldNameOrPath" : "c"
  }, {
    "label" : "SO #",
    "fieldNameOrPath" : "c.2"
  }];
  
  $scope.displayData=[{
    "columns" : [{
      "value" : "callse",
      "fieldNameOrPath" : "Name"
    }, {
      "value" : "Royal Dutch Shell",
      "fieldNameOrPath" : "r.Name"
    }, {
      "value" : "a",
      "fieldNameOrPath" : "c"
    }
    ]
  },{
    "columns" : [ {
      "value" : "xgtyu",
      "fieldNameOrPath" : "Name"
    }, {
      "value" : "Test royal data",
      "fieldNameOrPath" : "r.Name"
    }, {
      "value" : "b",
      "fieldNameOrPath" : "c"
    }
    ]
  },{
    "columns" : [ {
      "value" : "p",
      "fieldNameOrPath" : "Name"
    }, {
      "value" : "a royal data",
      "fieldNameOrPath" : "r.Name"
    }, {
      "value" : "c",
      "fieldNameOrPath" : "c"
    }
    ]
  }
  ];
  
  $ionicPopover.fromTemplateUrl('my-column-name.html', {
      scope: $scope
  }).then(function(popover) {
      $scope.popover = popover;
  });

  $scope.sortdata = function () {
    return 'value';
  };

  $scope.openPopover = function($event) {
      $scope.popover.show($event);
  };

  $scope.closePopover = function() {
      $scope.popover.hide();
  };
  
  $scope.setSort = function(idx, reverse){
    $scope.sortval = 'columns['+idx+'].value';
    $scope.reverse = reverse;
  };

  //Initialize the first two columns to display
  (function() {
    var data = $scope.data;
    var datalength = data.length;
    var i;
    for (i=0; i<datalength; i++) {
      if (i<2) {
        data[i].checked = true;
      }
      data[i].index = i;
    }
  })();

})
.directive('sortHeader', function($timeout) {
  return {
    restrict: 'E',
    scope: {
      'label': '@',
      'sortstring': '&sortExp',
      'idx': '@index'
    },
    templateUrl: 'sort-header.html',
    link: function(scope, element, attrs) {
      scope.reverse = false;
      element.on('click', function(){
        $timeout(function(){
          scope.reverse = !scope.reverse;
        });
      });
    }
  };
});

/* Styles go here */
.row {
  white-space: nowrap;
}
.col {
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #f5fff5;
}
.search.list-inset, .search.list-inset .item:first-child {
  border-radius: 50px;
}
.search .item-input .icon {
  font-size: 200%;
}
.gray-20 {
  background-color: #ddd;
}
.odd-row .col {
  background-color: #eee;
}
.button {
  padding: 0;
  min-width: 0;
  min-height: 0;
  border-width: 0;
  border-style: none;
  vertical-align: top;
  font-size: 16px;
  line-height: 20px;
}
.button .icon:before, .button.icon:before, .button.icon-left:before, .button.icon-right:before {
  display: inline-block;
  padding: 0 0 1px 0;
  vertical-align: inherit;
  font-size: 16px;
  line-height: 20px;
  pointer-events: none;
}
.button-icon .icon:before, .button-icon.icon:before {
  font-size: 16px;
}
.padding{
   padding-left:15% !important; 
   padding-right:15% !important;
}
.brd{
  margin: -1px -1px 0 0;
  border: 1px solid grey;
}
@media (min-width: 600px) {
 .search {
   width: 50%; 
   margin-left:auto; 
   margin-right: auto;
 }
}

Answer for stackoverflow [question](http://stackoverflow.com/questions/30647801/how-to-reduce-the-height-of-header-in-tabel-view-or-grid-view/30651159#30651159)