在 Angular mat-cell 中指定边框的大小

Question

我正在尝试对 mat-table 进行样式化，我想知道 UI 设计师指定的内容是否可行。我想要完成的是这样的：

Desired outcome

实际上，我似乎无法让边框框不占用 mat-cell 的整个空间：

Actual outcome

我有以下html：

    <th class="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>

使用以下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;
}

这些值是不同的，因为我想强调建议的正常选项（修改高度、宽度、填充、最大宽度、最大高度等）实际上并没有对框的大小产生影响，它总是填满整个单元格。有办法修改吗？

Answer 1

只需将span 添加到您的盒子元素，然后您可以使用margin 和padding 更改其尺寸。看这个示例表代码：

<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>

导入部分在table 本身上设置text-align: center，使用vertical-align: middle 向tds 添加一个类，然后添加span。然后，一旦你有了span，你就可以通过padding 和margin 控制它的尺寸。