how to reduce the height of header in tabel view o

Question

I am trying to make simple demo of grid view .In which I have header of title (having gray background) actually I need to reduce the height of title or headers of table which have gray background .can we add alternate color of rows ? please see the given image .It header or tittle is too small as compared to my plunker .Secondly there is alternate color in row .can we add that in my plunker . http://plnkr.co/edit/7bSnk0fU0NBOF1GIwHSK?p=preview

.search.list-inset, .search.list-inset .item:first-child {
  border-radius: 50px;
}
.search .item-input .icon {
  font-size: 200%;
}
.gray-20 {
  background-color: #eee;
}
@media (min-width: 600px) {
 .search {
   width: 50%; 
   margin-left:auto; 
   margin-right: auto;
 }
}
.mrginrightleft{
   margin-left:5%; 
   margin-right:15%;
}
.brd{
  border: 1px solid grey;
}

here is my code![enter image description here][1]

Answer 1

Updated Plunker

How to style striped rows

There are two ways to do this. One is pure CSS using the :nth-child(even) or (odd) pseudo classes. You can add a class to your row and just use style it how you want, such as:

my-class:nth-child(even) .col {
  background-color: blue;
}

But I did it differently to teach you something about ng-repeat. Yes, it's for a loop, but it has a bunch of special properties that it exposes for you. Two in particular are $odd and $even. As you might expect, $odd returns true if it is an odd iteration and $even is true when the index is an even number.

So, you can use these with ng-class as part of your expression. Here, I'm adding a class of odd-row:

<div class="row" ng-repeat="column in displayData | orderBy: sortval:reverse | filter: query" ng-class="{'odd-row':$odd}">

Then to make the styles, I added the following rule. I applied the background-color to the .col children so that the background would be contained within the borders that are applied on the .col elements.

.odd-row .col {
  background-color: #eee;
}

EDIT: Actually, you are correct, ng-style would be a third-way, but it doesn't apply a class, it applies inline styles. Therefore, you need to pass it an object with you styles, so for example (simplified):

ng-style="{'color': 'red'}"