css - material 2 angular 4 table width 不适用里面垫卡

Question

我正在使用 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>

Answer 1

您可能想通过将 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/