Angular 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.如何将overflow-x auto添加到角表？样本角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;
}

希望这会帮助你.