角材料表尺寸/滚动 [英] 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屋！