html - Mat-Table 区域中的 CSS 问题

问题描述

我使用 CSS 来调整列的宽度。现在我遇到的问题是我的列超出了定义的垫表。你知道如何解决它吗？

<div class="content-wrapper mat-elevation-z8">
    <!-- Data Table -->
    <div class="table-wrapper">
      <mat-table [dataSource]="dataSource" [class.isMobile]="isMobile">
        ...
      </mat-table>
</div>
  </div>

.table-wrapper {
  position: relative;
  width: 100% !important;
  min-height: 100% !important;
  overflow: auto;
}

.mat-row#mat-row-mobile {
  min-height: 30px;
}

.mat-column-1, .mat-column-2, .mat-column-3, .mat-column-4, .mat-column-5, .mat-column-6, .mat-column-7, .mat-column-8, .mat-column-9, .mat-column-10, .mat-column-11, .mat-column-12 {
  flex: 0 0 10% !important;
  min-width: 110px !important;
}

.mat-column-note {
  flex: 0 0 12% !important;
  min-width: 170px !important;
}

.mat-column-assignment {
  flex: 0 0 17% !important;
  min-width: 230px !important;
}

标签： htmlcssangularangular-materialmat-table

我相信问题出在计算上。例如

.mat-column-1, .mat-column-2, .mat-column-3, ... , .mat-column-12 {
   flex: 0 0 10% !important; // this equals to 120% 
   min-width: 110px !important; // this equals to 1320px. Be carefull. Please ask yourself "What happens if my screen is narrower?" Then width in fixed units is a problem
}

一些关于 CSS LENGTHS 的阅读。CSS 长度

你可以试试限制

.mat-column-kag {
  flex: 0 0 auto !important;
  max-width: 90px !important;
  box-sizing: border-box;
}
.mat-column-name{
  flex: 0 0 auto !important;
  max-width: 200px !important;
  box-sizing: border-box;
}
.mat-column-accountNumber
.mat-column-1,
.mat-column-2,
.mat-column-3,
.mat-column-4,
.mat-column-5,
.mat-column-6,
.mat-column-7,
.mat-column-8,
.mat-column-9,
.mat-column-10,
.mat-column-11,
.mat-column-12,
{
     flex: 0 0 calc((100% - 290px) / 13) !important;
     box-sizing: border-box;
 }

注意：我还为所有自定义宽度列添加了 box-sizing，因为如果未设置此属性，则会考虑填充长度，这会增加额外的长度。

在此处阅读有关框大小的更多信息box-sizing:border-box

html - Mat-Table 区域中的 CSS 问题

问题描述

解决方案

推荐阅读