添加表格行之间的间距

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

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

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

Answer 2

为了增加行之间的空间，u必须在此处增加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操作实际上被强烈反对，但目前仍在运行。

事实上，当您没有编写组件并且无法访问其源代码时，::ng-deep通常是必要的，所以现在可以随意使用它。

Answer 4

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