Question

我开发了一个数据网格，但是在自定义它时遇到了一些问题。

是否可以删除标题底部边框并在表格的每一行之间添加空格？

代码

<dx-data-grid style="margin-top:50px" class="table" [dataSource]="datas"
    [showColumnLines]="false" [showRowLines]="false" [columnAutoWidth]="true" [allowColumnResizing]="true">
    <dxo-header-filter [visible]="true"></dxo-header-filter>
    <dxi-column dataField="ID" dataType="text" caption="ID"></dxi-column>
    <dxi-column dataField="Name" dataType="text" caption="Name"></dxi-column>
</dx-data-grid>

Answer 1

要在行之间添加一些空间，请尝试更改此引擎中dx.light.css文件中的px数量

.dx-datagrid .dx-row > td {padding: 7px;}

Answer 2

要增加行之间的间距，必须在此处增加padding：

.table .dx-datagrid-rowsview .dx-row > td { 
   padding: 7px 0;
}

这似乎只会增加行的大小，就像您注意到的那样，但这也会增加空间。目前，由于您在此处设置的阴影，它看起来好像不是：

.table .dx-datagrid-rowsview .dx-row {
   ..
   box-shadow: 0px 3px 20px #BCBCCB47;
}

提供td元素填充可能是增加间距的唯一方法。您必须将阴影设置在其他位置。

要删除顶部的边框，请尝试以下操作：

.dx-datagrid-headers + .dx-datagrid-rowsview {
   border-top: 0;
}

Answer 3

您可以使用 ::ng-deep伪类选择器

::ng-deep操作实际上是deprecated，但是目前仍在工作。

实际上，::ng-deep在您没有编写组件并且无权访问其源代码时经常是必需的，因此请随时使用它。

Answer 4

您可以在.dx-data-row上使用border-bottom: 4px solid #FFFFFF;在表行之间添加空间

在表格行之间添加间距

4 个答案: