如何解决如何将我的 mat-table CSS 列宽设置为仅占用与数据一样多的空间？
<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 表格只会占用与表格中的数据一样多的空间。如果您将表格的宽度设置为 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>按如下方式更改您的材料表。
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的例子：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
