编辑 ngx-datatable 样式问题答案

【问题标题】：Editing ngx-datatable styling issues编辑 ngx-datatable 样式问题
【发布时间】：2018-04-16 21:00:24
【问题描述】：

我正在关注 ngx-datatable 的主题设置。

首先我 npm 安装了 ngx-datatable 10.4.0，因为它与 Angular 4 和早期版本的 rxjs 兼容。

我的问题在于表格的样式。

我的模板文件如下所示：

<div>
    <ngx-datatable
        [rows]="rows"
        [columns]="columns"
        [columnMode]="'standard'"
        class="material"
        fixed-header
        [headerHeight]="50"
        [scrollbarV]="true">
    </ngx-datatable>
</div>

在我的 scss 文件中：

@import '~@swimlane/ngx-datatable/release/index.css';
@import '~@swimlane/ngx-datatable/release/themes/material.css';
@import '~@swimlane/ngx-datatable/release/themes/bootstrap.css';
@import '~@swimlane/ngx-datatable/release/assets/icons.css';

我可以确认材料样式在一定程度上起作用：

我希望在我的标题下添加一个边框底部，但无济于事。

如果您查看演示：http://swimlane.github.io/ngx-datatable/#filter

示例表总是有一个边框底部。

如何配置表格以在标题下方插入底部边框？

我的 ngx-datatable 设置有问题吗？

【问题讨论】：

我也面临同样的问题。你用 ngx-datatable 提票了吗？

标签： angular ngx-datatable

【解决方案1】：

此组件的任何样式都应在 global styles.scss 文件中完成。

styles.scss：

/* You can add global styles to this file, and also import other style files */
@import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/bootstrap.scss';
@import '~@swimlane/ngx-datatable/themes/material.scss';
@import '~@swimlane/ngx-datatable/themes/dark.scss';
@import '~@swimlane/ngx-datatable/assets/icons.css';

/* Preferably put any custom styles for ngx-datatable into your own "_datatable.scss" file 
   and @import it into global styles, but this is a simple working example */

.ngx-datatable {
  border: 1px solid #dddddd;
  ...
}

如果您还没有使用全局样式文件，请确保它存在于src/styles.scss。确保它包含在 architect/build/options/styles 下的 angular.json 中：

...
"styles": [
  "src/styles.scss",
  ...
]

Angular CLI 应用程序应该默认内置所有这些。

文档没有提到这一点太糟糕了，但是组件上的视图封装会阻止样式渗透到任何嵌套组件中。这实际上是更可取的，这样当您构建一个组件供其他人安装并且您意外使用相同的类名时，您的样式不会受到抨击。

【讨论】：

【解决方案2】：

插入border-bottom 并将其设置为菜单中提供的不同选项。

参考以下代码：

> .content {
    //width: ~"calc(100% - 900px)";
    //width: 100%;
    border-top: none;
    border-bottom:
}

【讨论】：