在表格行之间添加间距答案

【问题标题】：Add Spacing between table rows在表格行之间添加间距
【发布时间】：2020-06-10 11:36:36
【问题描述】：

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

有没有办法去掉表头下边框，在表格的每一行之间加一个空格？

代码

<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>

【问题讨论】：

标签： html css angular typescript datagrid

【解决方案1】：

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

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

【讨论】：

感谢您的回复。这会增加线条的大小而不是它们之间的间距

【解决方案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 elemente 填充，可能是增加间距的唯一方法。您必须在其他地方设置阴影。

要删除顶部的边框，试试这个：

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

【讨论】：

感谢您的回复。它无法正常工作或边框顶部消失:(我打算让它们“分离”的线条。我测试了这个 :: ng-deep .table .dx-datagrid-content .dx-datagrid-table {border-collapse : unset!important; border-spacing: 0px 16px!important; } 我得到了我想要的但我不知道使用 unset 是否正确

【解决方案3】：

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

::ng-deep 操作实际上是 deprecated，但是它现在仍然有效。

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

【讨论】：

【解决方案4】：

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

【讨论】：