title: Angular material table footer - alignment issue
body: <p>Having an issues with the footer alignment in an angular material table. Seemingly inexplicable.</p>
  <p><a href="https://i.stack.imgur.com/qQXYS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qQXYS.png" alt="enter image description here" /></a></p>
  <p>As you can see from the screenshot, two of the footer columns flatly refuse to align correctly. I have currently forced them all to align left in the html but as you see, the 'edit' column footer and the 'mon' column footer remain out of whack.</p>
  <p>Column definitions are defined as:</p>
  <pre><code>  displayedColumns: string[] = [
      'edit', 'delete', 'project', 'site', 'location', 
      'shift', 'workpack', 'description', 'mon', 'tue', 
      'wed', 'thu', 'fri', 'sat', 'sun', 'total'
    ];
  
    dataSource = this.rows;
  </code></pre>
  <p>template:</p>
  <pre><code>&lt;!---- header -----&gt;
  &lt;div class=&quot;wrap&quot;&gt;
  
    &lt;table mat-table [dataSource]=&quot;rows&quot; class=&quot;mat-elevation-z8&quot;&gt;
  
      &lt;ng-container matColumnDef=&quot;edit&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Edit &lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; &lt;mat-icon&gt;edit&lt;/mat-icon&gt;&lt;/td&gt;
        &lt;th mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; - &lt;/th&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef=&quot;delete&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Delete &lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; &lt;mat-icon&gt;delete&lt;/mat-icon&gt;&lt;/td&gt;
        &lt;th mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; - &lt;/th&gt;
      &lt;/ng-container&gt;
    
      &lt;ng-container matColumnDef=&quot;project&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef &gt; Project &lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.project}} &lt;/td&gt;
        &lt;th mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; - &lt;/th&gt;
      &lt;/ng-container&gt;
    
      &lt;ng-container matColumnDef=&quot;site&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Site &lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.site}} &lt;/td&gt;
        &lt;th mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; - &lt;/th&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef=&quot;location&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Location &lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.location}} &lt;/td&gt;
        &lt;th mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; - &lt;/th&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef=&quot;shift&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Shift &lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.shift}} &lt;/td&gt;
        &lt;th mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; - &lt;/th&gt;
      &lt;/ng-container&gt;
    
      &lt;ng-container matColumnDef=&quot;workpack&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Workpack &lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.workpack}} &lt;/td&gt;
        &lt;th mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; - &lt;/th&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef=&quot;description&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Description &lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.description}} &lt;/td&gt;
        &lt;th mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; - &lt;/th&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef=&quot;mon&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;Mon&lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot; &gt; {{row.mon}} &lt;/td&gt;
        &lt;td mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; {{totals[6]}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef=&quot;tue&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;Tue&lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.tue}} &lt;/td&gt;
        &lt;td mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; {{ totals[5] }} &lt;/td&gt;
  
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef=&quot;wed&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;Wed&lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.wed}} &lt;/td&gt;
        &lt;td mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; {{ totals[4] }} &lt;/td&gt;
  
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef=&quot;thu&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;Thu&lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.thu}} &lt;/td&gt;
        &lt;td mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; {{ totals[3] }} &lt;/td&gt;
  
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef=&quot;fri&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;Frid&lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.fri}} &lt;/td&gt;
        &lt;td mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; {{ totals[2] }} &lt;/td&gt;
  
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef=&quot;sat&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;Sat&lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.sat}} &lt;/td&gt;
        &lt;td mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; {{ totals[1] }} &lt;/td&gt;
  
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef=&quot;sun&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;Sun&lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.sun}} &lt;/td&gt;
        &lt;td mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; {{ totals[0] }} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef=&quot;total&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;Total&lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt; {{row.total}} &lt;/td&gt;
        &lt;td mat-footer-cell *matFooterCellDef style=&quot;text-align: left&quot;&gt; {{ grandTotal }} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
      &lt;tr mat-footer-row *matFooterRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
  
    &lt;/table&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>and CSS</p>
  <pre><code>.wrap {
      margin: auto;
      margin-top: 30px;
      width: 90%;
  }
  
  .mat-raised-button{
    margin-right: 20px;
  }
  
  mat-form-field {
    margin-right: 12px
  }
  
  table {
    width: 100%;
  }
  </code></pre>
  <p>These columns remain misaligned regardless of what I change, including changing the displayed footer columns to purely be the days of the week with actual totals.</p>
  <p>Any assistance would be appreciated as I'm tearing my hair out on this one!</p>