title: How to add background color for alternate columns in angular
body: <p>I have created a simple table in angular using angular material mat-table component.</p>
  
  <p>Using the style below I am able color the alternate rows.But the same is not applied for columns when i change the row to column in the below style</p>
  
  <pre><code> mat-row:nth-child(even){
            background-color:#f2f4f7;
                          }
  
   mat-row:nth-child(odd){
            background-color:none;
                         }
  </code></pre>
  
  <p>Can anybody tell me how can in add background color for alternate columns ..?</p>
  
  <h2>Below shown is my code</h2>
  
  <p><code>account.component.html</code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-toolbar color="primary" style="width:100%"&gt; WELCOME &lt;/mat-toolbar&gt;&lt;br/&gt;
  
  &lt;!-- Table starts here --&gt;
  
  
  &lt;div class="example-container mat-elevation-z8"&gt;
  
    &lt;mat-table #table [dataSource]="dataSource1"&gt;
  
      &lt;!-- Account No. Column --&gt;
      &lt;ng-container matColumnDef="acc_id"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Account ID. &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.acc_id}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
        &lt;!-- Account Description Column --&gt;
      &lt;ng-container matColumnDef="acc_desc"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Account Description &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.acc_desc}}&lt;/mat-cell&gt;
         &lt;/ng-container&gt;
  
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns1" &gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns1;"&gt; &lt;/mat-row&gt;
    &lt;/mat-table&gt;
  
  
    &lt;mat-paginator #paginator
                   [pageSize]="10"
                   [pageSizeOptions]="[5, 10, 20]"&gt;
    &lt;/mat-paginator&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>account.component.scss</code></p>
  
  <pre class="lang-scss prettyprint-override"><code>.example-container {
    display: flex;
    flex-direction: column;
    min-width: 300px;
    font-family: Verdana,Sans-Serif;
  }
  
  mat-table{
    text-align:center;
    font-size:12px;
    font-family: Verdana,Sans-Serif;
  }
  
  mat-cell{
    font-size:12px;
    font-family: Verdana,Sans-Serif;
    }
  
   mat-option{
    font-size:12px;
    font-family: Verdana,Sans-Serif;
    margin:-5px 0 -5px 0;
  }
   mat-row:nth-child(even){
            background-color:#f2f4f7;
            }
  
   mat-row:nth-child(odd){
            background-color:none;
            }
  
   mat-column:nth-child(even){
            background-color:#f2f4f7;
                        }
  
   mat-column:nth-child(odd){
            background-color:none;
                          }
  </code></pre>
  
  <p><code>account.component.ts</code></p>
  
  <pre class="lang-ts prettyprint-override"><code>import {Component, ViewChild, Inject, OnInit} from '@angular/core';
  import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import {MatPaginator, MatTableDataSource} from '@angular/material';
  
  @Component({
    selector: 'app-account',
    templateUrl: './account.component.html',
    styleUrls: ['./account.component.scss']
     })
  
  
  export class AccountComponent implements OnInit {
  
  acc_desc: any;
  
  constructor() { }
  
  
    /* Table Starts here
    ---------------------- */
  
   displayedColumns1 = ['acc_id', 'acc_desc'];
   dataSource1= new MatTableDataSource&lt;Element&gt;(ELEMENT_DATA);
  
  ngOnInit(){
     const data = [
        {
          "acc_id": 1001,
          "acc_desc": "Administration"
        },
  
        {
          "acc_id": 1002,
          "acc_desc": "Laboratory"
        },
  
        {
          "acc_id": 1003,
          "acc_desc": "Staff"
        },
  
        {
          "acc_id": 1004,
          "acc_desc": "Office-1"
        },
        {
          "acc_id": 1005,
          "acc_desc": "Office-2"
        },
        {
          "acc_id": 1006,
          "acc_desc": "Office-2"
        }
     ];
       this.acc_desc = data;
       this.dataSource1.data = (data as Element[]);
    }
  
    @ViewChild(MatPaginator) paginator: MatPaginator;
  
     ngAfterViewInit() {
      this.dataSource1.paginator = this.paginator;
    } }
  
    export interface Element {
     acc_id: any;
     acc_desc: any; 
    }
  
  const ELEMENT_DATA: Element[] = [];
  </code></pre>