angularjs - how to reduce the height of header in tabel view or grid view? -

i trying make simple demo of grid view .in have header of title (having gray background) need reduce height of title or headers of table have gray background .can add alternate color of rows ? please see given image .it header or tittle small compared plunker .secondly there alternate color in row .can add in 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 code![enter image description here][1]

updated plunker

how style striped rows

there 2 ways this. 1 pure css using :nth-child(even) or (odd) pseudo classes. can add class row , use style how want, such as:

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

but did differently teach ng-repeat. yes, it's loop, has bunch of special properties exposes you. 2 in particular $odd , $even. might expect, $odd returns true if odd iteration , $even true when index number.

so, can use these ng-class part of expression. here, i'm adding class of odd-row:

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

then make styles, added following rule. applied background-color .col children background contained within borders applied on .col elements.

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

edit: actually, correct, ng-style third-way, doesn't apply class, applies inline styles. therefore, need pass object styles, example (simplified):

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