角材料表尺寸/滚动 [英] Angular Material table Sizing/Scroll

问题描述

我有一个包含许多列的Angular Material表.它比屏幕宽.当我滚动时，表格行延伸超出表格容器的边缘.

I have an Angular Material table with many columns. It is wider than the screen. When I scroll, the table rows extend past the edge of the table container.

请参阅此StackBlitz项目. https://stackblitz.com/edit/angular-r6xdgk 使用底部的滚动条，您会将会看到奇怪的格式.

See this StackBlitz project. https://stackblitz.com/edit/angular-r6xdgk Use the scrollbar at the bottom and you will see the strange formatting.

在此先感谢您的帮助！

推荐答案

添加

.example-container {
  overflow-x: scroll;
}

到app.component.css修复顶部栏. 底部将需要类似的样式.您不能使用width:100％，因为它在技术上不在表格之内.因此它不能自动拾取宽度.

To the app.component.css to fix the top bar. The bottom will need a similar styling. You can't use width:100% because it is technically outside the table. So it can not pick up the width automatically.

这篇关于角材料表尺寸/滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！