角度2材质水平滚动数据表边框问题

Question

我在我的应用程序中使用Angular Material Data表。我需要使用水平滚动表显示多个列。我正面临着表行边框的问题。它没有显示整行的宽度。请查看附图，以供参考。请帮我解决这个问题。

请查看代码链接参考

https://stackblitz.com/edit/angular-mdxik6?file=app%2Ftable-basic-example.html

先谢谢。

Answer 1

默认情况下，标题行和列行均显示为flex， 将其更改为显示inline-flex将解决上述问题

.mat-header-row, .mat-row {
    display: inline-flex;
}

Answer 2

在ipad和移动设备屏幕上使用显示网格

mat-table {
   display: -ms-grid ;
   display: grid;
}

Answer 3

材质使用flex布局，因此您可以将align-self: stretch;添加到CSS列。这应该拉伸自动调整大小的项目以适合表格。

修改

Stackblitz

删除标题和单元格宽度元素会有所帮助。您希望将行设置为100％宽度，然后设置所需的最小值。

.mat-row, .mat-header-row { min-width: 1123px; width:100%; }

Answer 4

您的样式属性相互作用。您为每列设置了min-width: 150px;，并且您有13列，总计为1950px。另外，您已经（显然）小于1950px的每一行设置width: 1123px;。此外，您在表本身上设置max-width: 1123px; - 与行相同的宽度 - 但是表格需要比行宽，以便显示滚动条。如果您解决了这些问题，边框将正确显示。尝试仅设置行宽并省略表格和列宽设置。

Answer 5

Guys this is will help you solving such issues

You have to start using :

width: max-content;

.mat-row,
.mat-header-row {
  min-width: 1123px;
  width: 100%;
  width: max-content;
}

.mat-table {
  overflow: scroll;
  max-height: 500px;
}

.mat-cell,
.mat-header-cell {
  min-width: 90px;
}
/*unnecessary to make table header fixed*/
.mat-header-row {
  top: 0;
  position: sticky;
  z-index: 1;
  background-color: inherit;
  text-align: center;
}

find browsers support : https://caniuse.com/#search=fit-content

Answer 6

您需要在mat-table {min-width}中加上mat-row左右填充（每次24px）来设置表格的预期值。

在您的示例中：

.mat-table {
  min-width: calc((13 * 150px) + 48px);
}

或

.mat-table {
  min-width: 1998px;
}

希望这有帮助!!!

Answer 7

这是旧帖子，可能会对其他人有所帮助。请参阅https://stackblitz.com/edit/angular-mdxik6-gnpzuh?embed=1&file=app/table-basic-example.css

只需将以下内容添加到your-comp-component.css或your-comp-component.scss

.mat-row, .mat-header-row {
min-width: 2800px;
width: 100%;
}

Answer 8

最好的解决方法是我克服了这个问题。

1. 使用CSS保留动态数据列

   columns = [
           {columnDef: 'select', width: 75},
           ...........
   ]
   

2. 如果实现显示/隐藏功能，请重新计算CSS的最小宽度

   recalculateCss() {
       let cellWidth = 0;
       for (let i = 0; i < this.selected.length; i++) {
           const cell = this.selected[i];
           const column = this.columns.filter((value, index) => value.columnDef === cell);
           cellWidth += column[0] ? column[0].width : 0;
       }
       this.minWidth = cellWidth;
   }
   

3. 在mat-h​​eader-row和mat-row中添加CSS

   [style.min-width.px]="minWidth"
   

Answer 9

尝试使用以下样式。当表格中有更多列时，它有助于正确呈现数据和边框。 （水平滚动问题已解决）

.mat-header-cell{
    background-color: inherit;
}