I developed a data grid. I intend that the rows on that grid are separate, so I used border-collapse: separate.
My problem is that using this I can't add a border to the line.
Is there a way to add border to the row and keep the table rows separate?
<dx-data-grid style="margin-top:50px" class="tableTask" [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>
css
::ng-deep .tableTask .dx-datagrid-headers {
letter-spacing: 0;
color: #4D4F5C !important;
font-weight: bold !important;
font-size: 13px !important;
background-color:#EDF3F9;
-ms-touch-action: pinch-zoom;
touch-action: pinch-zoom;
border-radius: 8px 8px 0px 0px;
height: 60px;
line-height: 18px;
border-bottom: none !important;
}
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
opacity: 1;
}
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row {
line-height: 50px;
height: 60px;
}
::ng-deep .tableTask .dx-datagrid-headers + .dx-datagrid-rowsview {
border-top: 0 !important;
}
::ng-deep .tableTask .dx-datagrid-content .dx-datagrid-table {
border-collapse: separate !important;
border-spacing: 0px 16px !important;
}
::ng-deep .tableTask .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
border-bottom: none;
}
If you want keep using border-collapse: separate
.
You can simply add border to each td of each row :
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td {
border-bottom: 1px solid red;
}
Add the code above at the end of your CSS .
And if you want to add a full border to your row you can use this :
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td{
border-bottom: 1px solid red;
border-top: 1px solid red;
}
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td:first-child {
border-left: 1px solid red !important;
}
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td:last-child {
border-right: 1px solid red;
}
I have added !important
to border-left because there's already some CSS.
It's difficult as you can't add border to the tr
of a table.
You could try to use pseudolement :after
to render a line for the table row but now the problem is:
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
So you could try the "hack" to add transform: scale(1);
to your rows to make it work. Like this:
table {border-collapse:separate;border-spacing: 10px;} td {} tr {position:relative;transform: scale(1);} tr:after { content:''; display:block; width:100%; height:1px; background-color:#000; position:absolute; bottom:0; left:0; }
<table> <tr> <td>dasdasd</td> <td>dasda</td> <td>asdasda</td> </tr> <tr> <td>dasdasd</td> <td>dasda</td> <td>asdasda</td> </tr> <tr> <td>dasdasd</td> <td>dasda</td> <td>asdasda</td> </tr> </table>
However, I will never recomend the use of css hacks on any web.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.