Sass 将材质表列动态宽度设置为内容

经过大量的修补，我终于有了一个像样的设置为我的材料表。它有分页，有排序，有我需要的所有好东西。但是，它看起来不太合适，因为我的几个列是一位数的值，它们的宽度与我希望更大的列的宽度相同（如过度包装的描述）

由于缺乏SCS（以及css）方面的经验，我不知道如何解决这个问题。我尝试用我能想到的所有方法修补flex属性，但它似乎没有改变表上的任何东西

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

---

是否有一种方法可以将样式应用于整个表格和标题，从而获得所需的外观

假设您指的是角度材质表，此表可能会有所帮助：

---

列宽度和标题使用以下样式

         columns={[
              {
                title: 'Create Date',
                field: 'create_date',
                cellStyle: {
                 whiteSpace: 'nowrap'
                },
               ...
               ]}
            options={{
              headerStyle: {
                backgroundColor: '#DEF3FA',
                color: 'Black',
                 whiteSpace: 'nowrap'
              },

---

我成功地将其用于Angular10

首先，用div将您的表括起来，如下所示：

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

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

.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;
}