在表格行之间添加间距

Question

I developed a data grid but I'm having some problems with customizing it.

Is there a way to remove the header bottom border and add a space between each row in the table?

DEMO

code

<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

for increasing the space between the rows, u have to increase the padding here:

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

this seems like it would only increase the size of the line, like u noticed but it's also increases the space. Currently it looks like its not, because of the shadow which you set here:

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

Giving the td elemente padding, is maybe the only way to increase your spacing. You have to set the shadow somewhere else.

To remove the border at the top, try this:

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

Answer 3

You can use the ::ng-deep pseudo-class selector

::ng-deep manipulations are actually deprecated , BUT it stills working for now.

In Fact ::ng-deep is often necessary when you didn't write the component and don't have access to its source so feel free to use it for now.

Answer 4

You can use border-bottom: 4px solid #FFFFFF; at .dx-data-row to add space between the table rows