I'm trying to stylize a mat-table and I'm wondering if what the UI designer specified is possible. What I'm trying to accomplish is something like this:

Desired outcome

In reality, I can't seem to get the border box to not take up the entire space of the mat-cell:

Actual outcome

I have the following html:

    <th  mat-header-cell *matHeaderCellDef mat-sort-header>Passed</th>
    <td mat-cell *matCellDef="let attempt" [ngClass]="{'box-green': attempt.passed, 'box-red': !attempt.passed}">
      {{ attempt.passed ? 'Passed' : 'Failed' }}
    </td>
  </ng-container>

With the following scss:

.box-red {
  max-width: 15px;
  max-height: 5px;
  padding: 2px;
  border: 2px solid red ;
  background-color: #f8d9dd;
  color: red;
  border-radius: 10px;
  text-align: center;
}

.box-green {
  max-width: 20px;
  max-height: 10px;
  padding: 4px;
  border: 2px solid green ;
  background-color: #d9f5d9;
  color: green;
  border-radius: 10px;
  text-align: center;
}

The values are different because I want to emphasize that the normal options that are suggested (modifying height, width, padding, max-width, max-height, etc etc) have not actually made a difference in the size of the box, it always fills the entire cell. Is there a way to modify this?

CodePudding user response：

Just need to add a span to your box element and then you can change its dimensions with margin and padding. See this example table code:

<table style={{ textAlign: 'center' }}>
    <tr>
        <th>Regulated</th>
        <th>Date</th>
        <th>Passed</th>
    </tr>
    <tr>
        <td style={{ verticalAlign: 'middle' }}>
            Test
        </td>
        <td style={{ verticalAlign: 'middle' }}>
            11/01/2020 10:12 AM
        </td>
        <td style={{ verticalAlign: 'middle' }}>
            <span style={{
                border: '2px solid red',
                backgroundColor: '#f8d9dd',
                color: 'red',
                borderRadius: '10px',
                margin: '15px',
                padding: '5px'
            }}>
                Failed
            </span>
        </td>
    </tr>
</table>

The import parts are setting text-align: center on the table itself, adding a class to the tds with vertical-align: middle, and then adding the span. Then once you have the span you can control its dimensions via padding and margin.