在 table 行上添加边框半径

Question

我正在使用数据网格来呈现一些信息。

我想为 table 中的所有行添加边框半径，但我没有得到它。

有谁知道如何将边框半径添加到 table 中的所有行？

有没有办法让文本与 "remove" 所在的列完全左对齐，但不删除索引？

谢谢

代码

<dx-data-grid class="tableTask" id="gridContainer" [dataSource]="Data" [remoteOperations]="false"
    [allowColumnReordering]="true" [showRowLines]="false" [showColumnLines]="false" [rowAlternationEnabled]="true"
    [showBorders]="false">   
    <dxo-group-panel [visible]="true"></dxo-group-panel>
    <dxo-grouping [autoExpandAll]="false"></dxo-grouping>
    <dxi-column dataField="name" [groupIndex]="0"></dxi-column>
    <dxi-column dataField="name" dataType="string"></dxi-column>
    <dxi-column dataField="name1" dataType="string"></dxi-column>
    <dxi-column dataField="name2" dataType="string"></dxi-column>
    <dxi-column dataField="name3" dataType="string" [width]="150"></dxi-column>
</dx-data-grid>

Answer 1

您需要将 border-radius 直接添加到 table 单元格（第一个和最后一个 child）：

 ::ng-deep .tableTask .dx-datagrid-rowsview .dx-data-row td:first-child {
   border-bottom-left-radius: 8px;
   border-top-left-radius: 8px;
 }

  ::ng-deep .tableTask .dx-datagrid-rowsview .dx-data-row td:last-child {
   border-bottom-right-radius: 8px;
   border-top-right-radius: 8px;
 }

在 table 行上添加边框半径

Add border radius on table row

css

typescript

devextreme

angular

devextreme-angular