在表格行上添加边框半径答案

【问题标题】：Add border radius on table row在表格行上添加边框半径
【发布时间】：2020-03-22 21:34:55
【问题描述】：

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

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

有谁知道如何为表格中的所有行添加边框半径？

有没有办法将文本完全对齐到左侧并“删除”那里的列，但不删除索引？

谢谢

代码

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

【问题讨论】：

标签： css angular typescript devextreme devextreme-angular

【解决方案1】：

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

 ::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;
 }

【讨论】：

你知道如何隐藏类 dx-command-expand dx-datagrid-group-space 以使文本完全向左对齐吗？
好吧，你可以将display: none添加到第一个子元素，并将左边框半径移动到另一个选择器-> td:nth-child(2)，但是你应该玩弄它以使其看起来不错，因为上行。