title: material 2 angular 4 table width does not apply inside mat-card
body: <p>I am using material 2 angular 4. I have a mat-card and a table inside it. the mat-card has a width set to 700px. and for table inside it to 650px with overflow-x:auto. </p>
  
  <p>However, the table does not obey that and creating a problem for me. this is how it is coded:</p>
  
  <pre><code>&lt;mat-card  style="width:700px;background-color: #F8F8F8; box-shadow : 1px 2px 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px 2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)  !important"&gt;
  &lt;mat-card-title &gt;
    Import
  &lt;/mat-card-title&gt;
  &lt;mat-card-content&gt;
  &lt;div fxLayout="column"   fxLayoutAlign="start start"&gt;
  
   &lt;div fxLayout="row" *ngIf="csvRecords.length &gt; 0"&gt;
     &lt;div fxLayout="column"&gt;
            &lt;table class="fa-table-list-page" style="width:650px;overflow-x: auto;"&gt;
                        &lt;tr class="fa-table-header"&gt;
                                &lt;td class="fa-table-data-col"&gt;From Location&lt;/td&gt;
                                &lt;td class="fa-table-data-col"&gt;To Location&lt;/td&gt;
                                &lt;td class="fa-table-data-col"&gt;Product Type&lt;/td&gt;
                                &lt;td class="fa-table-data-col"&gt;TechnicalRevenue&lt;/td&gt;
                                &lt;td class="fa-table-data-col"&gt;Revenue(/yr)&lt;/td&gt;
                                 &lt;td class="fa-table-data-col"&gt;Volume (/yr)&lt;/td&gt;
                                 &lt;td class="fa-table-data-col"&gt;Volume Uom&lt;/td&gt;
                                 &lt;td class="fa-table-data-col"&gt;Chargeable Weight (kgs/yr)&lt;/td&gt;
                                  &lt;td class="fa-table-data-col"&gt;Shipmts (/yr)&lt;/td&gt;
                                  &lt;td class="fa-table-data-col"&gt;Existing %&lt;/td&gt;
                                  &lt;td class="fa-table-data-col"&gt;Awarded %&lt;/td&gt;
                                  &lt;td class="fa-table-data-col"&gt;Service&lt;/td&gt;
                                  &lt;td class="fa-table-data-col"&gt;Density&lt;/td&gt;
                                  &lt;td class="fa-table-data-col"&gt;Density Copy Help&lt;/td&gt;
                                  &lt;td class="fa-table-data-col"&gt;Responsible&lt;/td&gt;
                                  &lt;td class="fa-table-data-col"&gt;Sales Branch&lt;/td&gt;
                                  &lt;td class="fa-table-data-col"&gt;Service Name&lt;/td&gt;
                                  &lt;td class="fa-table-data-col"&gt;Position of target warehouse revenue / yr&lt;/td&gt;
                                  &lt;td class="fa-table-data-col"&gt;Position of target transportation revenue / yr&lt;/td&gt;
                                  &lt;td class="fa-table-data-col"&gt;Product Split&lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tbody&gt;
                            &lt;tr *ngFor="let rev of csvRecords" class="fa-table-data-row"&gt;
                                 &lt;td  class="fa-table-data-col"&gt;{{rev[0]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col"&gt;{{rev[1]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col"&gt;{{rev[2]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col"&gt;{{rev[3]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[4]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[5]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[6]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[7]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[8]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[9]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[10]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[11]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[12]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[13]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[14]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[15]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[16]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[17]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[18]}}&lt;/td&gt;
                                 &lt;td  class="fa-table-data-col" &gt;{{rev[19]}}&lt;/td&gt;
                            &lt;/tr&gt;
                        &lt;/tbody&gt;
              &lt;/table&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/mat-card-content&gt;
  &lt;/mat-card&gt;
  </code></pre>