如何将我的 mat-table CSS 列宽设置为只占用与数据一样多的空间？答案

【问题标题】：How do I set my mat-table CSS column width to only take up as much space as the data?如何将我的 mat-table CSS 列宽设置为只占用与数据一样多的空间？
【发布时间】：2021-04-29 18:07:21
【问题描述】：

我有一个 Angular 9 mat-table，如下所示

<mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="category">
      <mat-header-cell *matHeaderCellDef> category </mat-header-cell>
      <mat-cell *matCellDef="let item">{{ item.category.path }}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="title">
      <mat-header-cell *matHeaderCellDef> item </mat-header-cell>
      <mat-cell *matCellDef="let item"><a href='{{ item.path }}'>{{ item.title }}</a></mat-cell>
    </ng-container>

    <ng-container matColumnDef="price">
      <mat-header-cell *matHeaderCellDef> price </mat-header-cell>
      <mat-cell *matCellDef="let item">{{ item.created_on }}</mat-cell>
    </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

对于为每列设置固定宽度的各种列，我有以下样式

.mat-column-title {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 50% !important;
  width: 50% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

如何构建我的 CSS 以使该列只占用与数据占用一样多的宽度？也就是说，我不想为每一列指定一个固定的像素或百分比。不确定这是否可能。

【问题讨论】：

我不确定这在纯 CSS 中是否可行 :( 我会做什么如果我真的想创建一个具有动态列宽的表格，我想我会计算每列中的字符数，取每列的最大值，然后使用 'ch' 单位根据最大字符设置每列的宽度
如果解决方案不是纯基于 CSS 的，那也没关系。在普通的 HTML 中，我知道这绝对是可能的，我只是不知道如何构建我的 mat-table，所以它会生成那种 HTML。
进行封装：在你的 ts 文件中的 ViewEncapsulation.None @component.然后使用 css 它将按您的预期工作
这里是 stackblitz 示例：stackblitz.com/edit/angular-ivy-cfuxer?file=src/app/…

标签： css angular angular9 mat-table column-width

【解决方案1】：

默认情况下，CSS 表格只会占用与表格中的数据一样多的空间。如果您将表格的宽度设置为auto 而不是100%，表格将只占用它需要的空间。

例如，这是他们对 Mat Table 的基本闪电战，但桌子上没有 width: 100%。

https://stackblitz.com/edit/angular-zf9gev?file=src/app/table-basic-example.css

table {
  border-collapse: collapse;
}

td {
  border-top: 1px solid grey;
}

th {
  text-align: left;
}

<div>100% width</div>

<table style="width: 100%;">
  <thead>
    <tr>
      <th>No.</th>
      <th>Name</th>
      <th>Weight</th>
      <th>Symbol</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Hydrogen</td>
      <td>1.0079</td>
      <td>H</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Helium</td>
      <td>4.0026</td>
      <td>He</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Lithium</td>
      <td>6.941</td>
      <td>Li</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Beryllium</td>
      <td>9.0122</td>
      <td>Be</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Boron</td>
      <td>10.811</td>
      <td>B</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Carbon</td>
      <td>12.0107</td>
      <td>C</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Nitrogen</td>
      <td>14.0067</td>
      <td>N</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Oxygen</td>
      <td>15.9994</td>
      <td>O</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Fluorine</td>
      <td>18.9984</td>
      <td>F</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Neon</td>
      <td>20.1797</td>
      <td>Ne</td>
    </tr>
  </tbody>
</table>

<div>Auto Width</div>

<table>
  <thead>
    <tr>
      <th>No.</th>
      <th>Name</th>
      <th>Weight</th>
      <th>Symbol</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Hydrogen</td>
      <td>1.0079</td>
      <td>H</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Helium</td>
      <td>4.0026</td>
      <td>He</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Lithium</td>
      <td>6.941</td>
      <td>Li</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Beryllium</td>
      <td>9.0122</td>
      <td>Be</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Boron</td>
      <td>10.811</td>
      <td>B</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Carbon</td>
      <td>12.0107</td>
      <td>C</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Nitrogen</td>
      <td>14.0067</td>
      <td>N</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Oxygen</td>
      <td>15.9994</td>
      <td>O</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Fluorine</td>
      <td>18.9984</td>
      <td>F</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Neon</td>
      <td>20.1797</td>
      <td>Ne</td>
    </tr>
  </tbody>
</table>

如果您希望拥有完整页表的外观，但保留其数据大小的列，您有几个选择。其中两个是：使表格的最后一列占据剩余的宽度，或者添加一个额外的列来代替。

table {
  border-collapse: collapse;
}

td {
  border-top: 1px solid grey;
}

th {
  text-align: left;
}

<div>Make the last column use the rest of the width to make it full sized</div>
<table style="width: 100%">
  <colgroup>
    <col>
    <col>
    <col>
    <col style="width:100%;">
  </colgroup>
  <thead>
    <tr>
      <th>No.</th>
      <th>Name</th>
      <th>Weight</th>
      <th>Symbol</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Hydrogen</td>
      <td>1.0079</td>
      <td>H</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Helium</td>
      <td>4.0026</td>
      <td>He</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Lithium</td>
      <td>6.941</td>
      <td>Li</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Beryllium</td>
      <td>9.0122</td>
      <td>Be</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Boron</td>
      <td>10.811</td>
      <td>B</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Carbon</td>
      <td>12.0107</td>
      <td>C</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Nitrogen</td>
      <td>14.0067</td>
      <td>N</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Oxygen</td>
      <td>15.9994</td>
      <td>O</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Fluorine</td>
      <td>18.9984</td>
      <td>F</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Neon</td>
      <td>20.1797</td>
      <td>Ne</td>
    </tr>
  </tbody>
</table>

<div>Add an extra empty 100% width column to make it full sized</div>

<table style="width: 100%">
  <colgroup>
    <col>
    <col>
    <col>
    <col>
    <col style="width:100%;">
  </colgroup>
  <thead>
    <tr>
      <th>No.</th>
      <th>Name</th>
      <th>Weight</th>
      <th>Symbol</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Hydrogen</td>
      <td>1.0079</td>
      <td>H</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Helium</td>
      <td>4.0026</td>
      <td>He</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>Lithium</td>
      <td>6.941</td>
      <td>Li</td>
      <td></td>
    </tr>
    <tr>
      <td>4</td>
      <td>Beryllium</td>
      <td>9.0122</td>
      <td>Be</td>
      <td></td>
    </tr>
    <tr>
      <td>5</td>
      <td>Boron</td>
      <td>10.811</td>
      <td>B</td>
      <td></td>
    </tr>
    <tr>
      <td>6</td>
      <td>Carbon</td>
      <td>12.0107</td>
      <td>C</td>
      <td></td>
    </tr>
    <tr>
      <td>7</td>
      <td>Nitrogen</td>
      <td>14.0067</td>
      <td>N</td>
      <td></td>
    </tr>
    <tr>
      <td>8</td>
      <td>Oxygen</td>
      <td>15.9994</td>
      <td>O</td>
      <td></td>
    </tr>
    <tr>
      <td>9</td>
      <td>Fluorine</td>
      <td>18.9984</td>
      <td>F</td>
      <td></td>
    </tr>
    <tr>
      <td>10</td>
      <td>Neon</td>
      <td>20.1797</td>
      <td>Ne</td>
      <td></td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

如下更改您的材料表。

app.component.html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="position">
        <th class="w-75" mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
        <th class="w-100" mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
        <th class="w-100" mat-header-cell *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
        <th class="w-75" mat-header-cell *matHeaderCellDef> Symbol </th>
        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

在您的表格中使用th & td 并使用我使用的自定义类。

<th class="w-75" mat-header-cell *matHeaderCellDef> Symbol </th>

app.component.css

.w-75 {
  width: 75px;
}

.w-100 {
  width: 100px;
}

这里是 stackblitz 示例：

https://stackblitz.com/edit/angular-stysn7?file=src/app/app.component.html

【讨论】：