在角度5材料表中溢出x-auto

Question

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

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

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

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

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

Answer 1

根据您的演示，只需在css文件中添加以下CSS即可。

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

希望这能对你有所帮助。

Answer 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