Angular4 Material md-table 列宽 AutoSizing Like Normal Table

Posted

技术标签:

【中文标题】Angular4 Material md-table 列宽 AutoSizing Like Normal Table【英文标题】:Angular4 Material md-table Column Width AutoSizing Like Normal Table 【发布时间】:2018-01-12 17:56:45 【问题描述】:

我在 Angular 4 应用程序中使用 md 表,因为我将 Material 用于 UI 格式的其他部分。当我使用基本没有 CSS 的常规表格时,列会自动格式化以适应最宽的 td 元素。使用 md-table,所有列都设置为相同的宽度,除以表格的总宽度,除了单元格太宽,然后它扩展单元格并将该行中的其他单元格推到右侧。我的常规表:

<md-tab label="Data" >
  <md-card class="datacard">
    <md-card-content>
      <div>
        <table class="datatable">
        ....
        </table>
      </div>
    </md-card-content>
  </md-card>
</md-tab>

数据表css:

.datatable 
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 10px;
  width: 100%;
  overflow-y:scroll;

md 表:

 <md-tab label="Data" >
   <md-card class="datacard">
     <md-card-content>
       <div>
        <div class="datatableheader">
          <md-input-container floatPlaceholder="never" id="filtercontainer">
            <input mdInput #filter placeholder="Filter services" />
          </md-input-container>
        </div>

        <md-table id="datatable" #datatable [dataSource]="resultDataSource" mdSort>

          <ng-container cdkColumnDef="Index">
            <md-header-cell *cdkHeaderCellDef md-sort-header>Index</md-header-cell>
            <md-cell *cdkCellDef="let result">result,Index</md-cell>
          </ng-container>

          <ng-container cdkColumnDef="Service">
            <md-header-cell *cdkHeaderCellDef md-sort-header>Service</md-header-cell>
            <md-cell *cdkCellDef="let result">result.Service</md-cell>
          </ng-container>

          <ng-container cdkColumnDef="Region">
            <md-header-cell *cdkHeaderCellDef md-sort-header>Region</md-header-cell>
            <md-cell *cdkCellDef="let result">result.Region</md-cell>
          </ng-container>


        </md-table>

        <md-paginator #paginator
                      [length]="results.length"
                      [pageIndex]="0"
                      [pageSize]="25"
                      [pageSizeOptions]="[5, 10, 25, 100]">
        </md-paginator>

      </div>
    </md-card-content>
  </md-card>
</md-tab>

我通过设置.mat-row height: auto 帮助解决了文本溢出/重叠的一些问题,但我真正想要的是让表格与普通表格一样自动适应列。我试图弄乱flex 属性并将行和列的宽度重置为initial,但没有找到正确的css组合来恢复表格元素的原始格式样式。

【问题讨论】:

【参考方案1】:

目前有一个未解决的问题。见this workaround。

.mat-table 
    display: table;
    width: 100%;

    > .mat-header-row, > .mat-row 
        display: table-row;
        padding: 0;
        border: none;

        > .mat-header-cell, > .mat-cell 
            display: table-cell;
            height: 48px;
            vertical-align: middle;

            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        
    

https://plnkr.co/edit/fDX4dgL26Ri0EEmQhSsR?p=preview

【讨论】:

以上是关于Angular4 Material md-table 列宽 AutoSizing Like Normal Table的主要内容,如果未能解决你的问题,请参考以下文章

每一行和标题列的“编辑/删除”按钮是 md-table 组件中的“操作”

如何在 md-table 的顶部和底部添加水平滚动条?

如何阻止用户移动到下一步,直到使用 Angular Material Stepper(Angular 4)完成当前步骤

使用 Material 图标字体并将 Angular 组件的封装设置为原生

如何发送在 Angular Material Autocomplete 中选择的属性的父对象?

我可以在 Angular / Angular Material 中以编程方式移动 mat-h​​orizo​​ntal-stepper 的步骤吗