Angular 5 材料表中的溢出 x-auto答案

【问题标题】：Overflow x-auto in Angular 5 material tableAngular 5 材料表中的溢出 x-auto
【发布时间】：2020-05-01 01:26:06
【问题描述】：

我需要制作响应式表格，即使它可以在移动视图中呈现而不会中断。为了使其正常工作，我使用了下面的标准 HTML 表格链接

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

查看示例：https://www.w3schools.com/howto/howto_css_table_responsive.asp

它工作得很好，但最近切换到没有用于响应式设计的 API 的 Angular 5 表。如何将 overflow-x auto 添加到角度表？示例角5表：

https://stackblitz.com/edit/angular-material-table-data-source-ibmgv2 提前致谢

【问题讨论】：

没有响应是什么意思？在您的示例中，表格将平滑地缩小到 0 宽度，而无需溢出-x。即使您添加overflow-x:auto，它也将始终无用，因为该表将一直下降到 0，而不会溢出其父容器。如果那没有响应，我不知道是什么:)
@JeremyThille 是的，我想让它响应而不缩小它。需要保持定义的宽度如 50px。如果总宽度较低，则显示 overflow-x auto。我怎样才能在 Angular 5 材料表中实现这一点？

标签： html css angular angular-material angular-material2

【解决方案1】：

根据您的演示，只需将以下 CSS 添加到您的 css 文件中。

.example-container.mat-elevation-z8 {    
  overflow-x: auto;
}
.example-container .mat-table.mat-table {
  min-width: 450px;
}

希望这会对你有所帮助。

【讨论】：

它就像一个魅力。非常感谢。没想到这么简单的解决方案！
感谢您的积极评价。
这可行，但确实会导致使用粘性标题行出现问题。

【解决方案2】：

.table-responsive {
display: block;
width: 100%;
overflow-x: auto;

.mat-table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    display: table;
    border-collapse: collapse;
    margin: 0px;
}

.mat-row,
.mat-header-row {
    display: table-row;
}

.mat-cell,
.mat-header-cell {
    word-wrap: initial;
    display: table-cell;
    padding: 0px 5px;
    line-break: unset;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
}
}

查看此链接，它将对您有所帮助。

信用来源 - https://github.com/angular/components/issues/8680#issuecomment-388358839

【讨论】：