代码之家 › 专栏 › 技术社区 › Vugar Abdullayev

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

angular-material2 angular-material angular css html

Vugar Abdullayev · 技术社区 · 7 年前

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

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

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

它工作得很好,但最近切换到Angular 5 table,它没有用于响应性设计的API。如何将add overflow-x自动添加到角度表?示例角度5表:

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

2 回复 | 直到 7 年前

kravisingh 7 年前

根据您的演示,只需添加以下内容 CSS 到您的css文件。

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

希望这对你有帮助。

Roshan Vishwakarma 4 年前

.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

推荐文章

user19531657 · 如何将标题和按钮对齐在同一行?

2 年前

Marcus Edensky · 角度6材质:材质选项卡链接由下划线栏选择

6 年前

Carl.G · 如何将Angular 6 Material sidenav设置为从屏幕右侧从右向左打开

6 年前

spottedmahn · 覆盖只读/禁用样式/CSS

6 年前

bereket gebredingle · 具有列值的物料表数据源筛选器

6 年前

Rahul Munjal · 无法绑定到“dataSource”,因为它不是“table”的已知属性

6 年前

Billy G · “角度材质”对话框:如何在父零部件中更改注入的数据时更新这些数据?

6 年前

Kaushik Nath · 导入MatTabChangeEvent时出错

6 年前

The Fox · “角度材质”对话框:复选框始终返回false

6 年前

Chinaedu Onwukwe · 在鼠标上方展开“材质扩展”面板

6 年前