Question

经过大量的修补后，我终于为我的材料表设置了不错的设置。它已经分页了，它得到了排序，它得到了我需要的所有好东西。然而，它看起来很像，因为我的几列是单位数值，并且它们的宽度与我希望更大的列相同（如过度包装的描述）。

缺乏scss经验（以及css），我对如何解决这个问题感到茫然。我试图在我能想出的每一种方式中修改flex属性，并且它似乎没有改变桌面上的东西。

这个问题更加复杂，因为我无法轻易使用“黑客”这个问题。基于列标识符生成类的材料表，因为列是动态生成的。我也可以传递宽度信息，但这似乎是一个无法维护的黑客。

有没有办法将样式应用到整个表格和标题，以获得理想的外观？

Answer 1

我在 Angular10 中成功地使用了它。

首先，用一个 div 包裹你的表格，就像这样：

<div class='table-responsive'>
   <mat-table>
      ....
   </mat-table>
</div>

然后添加这个CSS

.table-responsive {
 display: block;
 width: 100%;
 overflow-x: auto;
}

.mat-table {
 width: 100%;
 max-width: 100%;
 margin-bottom: 1rem;
 display: table;
 border-collapse: collapse;
 margin: 0px;
}

.mat-row,
.mat-header-row {
 display: table-row;
}

.mat-cell,
.mat-header-cell {
 word-wrap: initial;
 display: table-cell;
 padding: 0px 5px;
 line-break: unset;
 width: auto;
 white-space: nowrap;
 overflow: hidden;
 vertical-align: middle;
}

这将根据内容调整单元格的大小，并使您的表格可水平滚动！

Answer 2

假设您的意思是角度材料表，这个可能会有所帮助： md-table - How to update the column width

使材质表列动态宽度为内容

2 个答案: