title: Fill a mat-table's cell with a color
body: <p>I have a fairly basic column in a <code>mat-table</code> as follows:</p>
  
  <pre><code>&lt;mat-table #table [dataSource]="dataSource" matSort&gt;
  
      &lt;ng-container matColumnDef="zone"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let item" [style.background-color]="'#' + item.zone.color"&gt;&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      ...
  
  &lt;/mat-table&gt;
  </code></pre>
  
  <p>I'd like to fill <code>zone</code> column cells with some colors varying from row to row (not the whole row, only cells of this specific column).</p>
  
  <p>All I could find so far is coloring the whole row.</p>
  
  <p>The cells of the <code>zone</code> column are rendered to the following HTML:</p>
  
  <pre><code>&lt;mat-cell class="mat-cell cdk-column-zone mat-column-zone" role="gridcell" style="background-color: rgb(255, 182, 193);" _ngcontent-c8=""&gt;&lt;/mat-cell&gt;
  </code></pre>
  
  <p>We can see that <code>background-color</code> style property has been correctly applied, but the problem is that cell's height is 0. because the cell doesn't have any content. I tried to put an <code>&amp;nbsp;</code> inside the cell, but it gets displayed as a thin bar with top and bottom margins:</p>
  
  <p><a href="https://i.stack.imgur.com/faVto.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/faVto.jpg" alt="enter image description here"></a></p>
  
  <p>And what I want is to color the whole cell including its margins.</p>
  
  <p>How can we color individual cells in <code>mat-table</code>?</p>