Question

我正在使用材料2角4.我有一张垫卡和一张桌子。垫卡的宽度设置为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;添加到内联样式来尝试设置要修复的表格布局。否则，单元格将始终按其内容调整大小并且永不溢出。

还尝试在包装div元素而不是table元素上设置宽度和overflow-x。

<div style="max-width: 650px; overflow-x: auto; white-space: nowrap;">
<table>
  ...
</table>
</div>

对于桌面上的水平滚动，可以参考此示例http://jsfiddle.net/5WsEt/

材料2角4桌宽不适用于垫卡

1 个答案: