我正在使用 Material 2 Angular 4。我有一张垫卡和一张 table 。 mat-card 的宽度设置为 700px。并使用 overflow-x:auto 将其中的表格设置为 650px。
但是，该表不遵守该规定并给我带来了问题。这是它的编码方式:
<mat-card style="width:700px;background-color: #F8F8F8; box-shadow : 1px 2px 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px 2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !important">
<mat-card-title >
Import
</mat-card-title>
<mat-card-content>
<div fxLayout="column" fxLayoutAlign="start start">
<div fxLayout="row" *ngIf="csvRecords.length > 0">
<div fxLayout="column">
<table class="fa-table-list-page" style="width:650px;overflow-x: auto;">
<tr class="fa-table-header">
<td class="fa-table-data-col">From Location</td>
<td class="fa-table-data-col">To Location</td>
<td class="fa-table-data-col">Product Type</td>
<td class="fa-table-data-col">TechnicalRevenue</td>
<td class="fa-table-data-col">Revenue(/yr)</td>
<td class="fa-table-data-col">Volume (/yr)</td>
<td class="fa-table-data-col">Volume Uom</td>
<td class="fa-table-data-col">Chargeable Weight (kgs/yr)</td>
<td class="fa-table-data-col">Shipmts (/yr)</td>
<td class="fa-table-data-col">Existing %</td>
<td class="fa-table-data-col">Awarded %</td>
<td class="fa-table-data-col">Service</td>
<td class="fa-table-data-col">Density</td>
<td class="fa-table-data-col">Density Copy Help</td>
<td class="fa-table-data-col">Responsible</td>
<td class="fa-table-data-col">Sales Branch</td>
<td class="fa-table-data-col">Service Name</td>
<td class="fa-table-data-col">Position of target warehouse revenue / yr</td>
<td class="fa-table-data-col">Position of target transportation revenue / yr</td>
<td class="fa-table-data-col">Product Split</td>
</tr>
<tbody>
<tr *ngFor="let rev of csvRecords" class="fa-table-data-row">
<td class="fa-table-data-col">{{rev[0]}}</td>
<td class="fa-table-data-col">{{rev[1]}}</td>
<td class="fa-table-data-col">{{rev[2]}}</td>
<td class="fa-table-data-col">{{rev[3]}}</td>
<td class="fa-table-data-col" >{{rev[4]}}</td>
<td class="fa-table-data-col" >{{rev[5]}}</td>
<td class="fa-table-data-col" >{{rev[6]}}</td>
<td class="fa-table-data-col" >{{rev[7]}}</td>
<td class="fa-table-data-col" >{{rev[8]}}</td>
<td class="fa-table-data-col" >{{rev[9]}}</td>
<td class="fa-table-data-col" >{{rev[10]}}</td>
<td class="fa-table-data-col" >{{rev[11]}}</td>
<td class="fa-table-data-col" >{{rev[12]}}</td>
<td class="fa-table-data-col" >{{rev[13]}}</td>
<td class="fa-table-data-col" >{{rev[14]}}</td>
<td class="fa-table-data-col" >{{rev[15]}}</td>
<td class="fa-table-data-col" >{{rev[16]}}</td>
<td class="fa-table-data-col" >{{rev[17]}}</td>
<td class="fa-table-data-col" >{{rev[18]}}</td>
<td class="fa-table-data-col" >{{rev[19]}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
最佳答案
您可能想通过将 table-layout: fixed; 添加到您的内联样式来尝试将表格布局设置为 fix。否则单元格将始终根据其内容调整大小并且永远不会溢出。
同时尝试在包装的 div 元素而不是 table 元素上设置宽度和 overflow-x。
<div style="max-width: 650px; overflow-x: auto; white-space: nowrap;">
<table>
...
</table>
</div>
表格水平滚动，可以引用这个例子，http://jsfiddle.net/5WsEt/
关于css - material 2 angular 4 table width 不适用里面垫卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47604093/