mat-icon-button 中的空白区域答案

【问题标题】：Blank space in mat-icon-buttonmat-icon-button 中的空白区域
【发布时间】：2021-07-29 12:47:23
【问题描述】：

我创建了一个带有图标但没有文本的 mat-icon-button，我希望它只有图标的大小。但是，该按钮似乎具有图标的大小，并且右侧有一个不可见的空白区域，我认为它是用于文本的。

我试图找到使空白消失的解决方案，但似乎没有一个有效。我在 html 中的按钮代码：

<table id="tablePrevisions" class="table table-bordered table-striped">
<thead class="thead-dark">
  <tr>
    <th scope="col">Date</th>
    <th scope="col">Modèle</th>
    <th scope="col">Domaine</th>
    <th scope="col">Emprise</th>
    <th scope="col">Echéances</th>
    <th scope="col" class="validation-col">Validation</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let previsionMeteo of previsionsMeteo; let i = index">
    <td (click)="onRowClicked(previsionMeteo)">{{ previsionMeteo.reseau }}</td>
    <td (click)="onRowClicked(previsionMeteo)">{{ previsionMeteo.cod_modele }}</td>
    <td (click)="onRowClicked(previsionMeteo)">{{ previsionMeteo.cod_domaine }}</td>
    <td (click)="onRowClicked(previsionMeteo)">{{ previsionMeteo.emprise }}</td>
    <td (click)="onRowClicked(previsionMeteo)">{{ previsionMeteo.echeances_plage }}</td>
    <td>
        <button mat-icon-button (click)="showValidation(previsionMeteo)" [class]="classButtons[i]" [disabled]="classButtons[i]=='validation-not-exists'">
            <mat-icon>list_all</mat-icon>
        </button>
    </td>
  </tr>
</tbody>
</table>

还有我在 css 中的课程：

.validation-exists {
    color: blue;
    width: 50px !important;
    padding: 0 !important;
}
.validation-not-exists {
    color: gray;
    width: 50px !important;
    padding: 0 !important;
}

问题说明：

【问题讨论】：

这可能与使用表格作为按钮有关。它必须是一张桌子吗？你可以只使用一个列表，比如
我更新了 HTML 以添加整个表格，我们使用表格来显示数据行，每个数据可能有验证或没有验证，这就是按钮可以启用或禁用的原因。
感谢您显示代码。我现在来做个猜测：因为您使用的表格中每个的内容都比最后的按钮宽，表格将具有最宽文本元素的宽度，所以您最后一个带有按钮的 , 也得到这个宽度。让我想想办法……
我去掉了 Validation 列中将宽度更改为 50px 的类“validation-col”，现在该列的宽度与按钮的宽度大致相同。所以我认为您对宽度的看法是正确的，但我找不到正确设置它的方法。
让我对我关于“使用表格进行布局是一种不好的做法”的第一条评论发表评论：在这种情况下，使用表格是完美的。为标题添加有利于可访问性。我还没有看到完整的 HTML，这就是我提到它的原因。

【解决方案2】：

我会在这里试试这个：

<td class="validation-button-table-data">
    <button mat-icon-button (click)="showValidation(previsionMeteo)" [class]="classButtons[i]" [disabled]="classButtons[i]=='validation-not-exists'">
        <mat-icon>list_all</mat-icon>
    </button>
</td>

然后将您的 CSS 添加到 <td> 并使用测量值而不是按钮：

.validation-button-table-data {
    width: 50px !important;
    padding: 0 !important;
}

如果这样看起来更好，请告诉我。

更新：

请尝试将相同的 CSS 类 validation-button-table-data 添加到您的最后一个 <th> 中。像这样：

<th scope="col" class="validation-button-table-data">Validation</th>

【讨论】：

感谢您的回答。不幸的是结果是一样的，td 的宽度变小了，但是按钮保持不变，像第一篇文章中的图片一样超出了列。
我有相同的结果，td 和 th 都有这个类。我应该补充一点，该按钮可在右侧的表格外部单击。所以看起来按钮组件比td组件大，这也是我一开始尝试改变按钮宽度的原因。