html - Angular Material 2 : How to put a fab button on top of the md-table at the bottom right corner?

Question

我有一个 md-table 显示一些记录和下面的分页器。我想在 table 上显示一个 fab 按钮(目录将在它下面运行)。

我试过什么？我试过 <a md-mini-fab routerLink="." style=""><md-icon>check</md-icon></a>在<md-table #table [dataSource]="dataSource" mdSort> </md-table>里面标签 ，但看起来像 md-table 下的所有内容被废弃，然后表格行由 material2 表格组件呈现。

是否有一个干净的(不使用大量 CSS，而仅使用类)解决方案？如果不是，基于 CSS 的解决方案是什么？

Answer 1

下面的代码满足要求，但被称为直截了当的解决方案是相当肮脏的。

我在玩 position : fixed 、 margin 、 z-index 和 bottom 时所做的是，我在 md-table 正下方(在分页器级别)制作了一个 div。

<div style="z-index:5; position : fixed;display : flex; 
align-self : flex-end;bottom : 10%; margin-bottom : 68px;">

<a md-mini-fab routerLink="." style="margin-right : 14px;" (click) = 
"tShowAdu()"><md-icon>add</md-icon></a>
<a md-mini-fab routerLink="/main/create" style="margin-right : 14px;"><md-icon>add</md-icon></a>

</div>

注意:如果找到更好的解决方案，将更新答案或发布新答案。