使材料表列动态宽度到内容答案

【问题标题】：Making Material Table columns dynamic width to content使材料表列动态宽度到内容
【发布时间】：2021-02-22 23:59:08
【问题描述】：

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

在 scss（以及 css 方面）缺乏经验，我不知道如何解决这个问题。我尝试以几乎所有我能想到的方式修改 flex 属性，但它似乎并没有改变桌面上的任何东西。

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

有没有一种方法可以将样式应用于整个表格和标题，从而获得我想要的外观？

【问题讨论】：

标签： sass angular-material2 angular5

【解决方案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;
}

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

对列宽和标题使用下面的样式

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

【讨论】：