增加表行之间的间距

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

为了增加行之间的空间，您必须在这里增加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通常是必需的，所以现在可以随意使用它。