表行的行间距

Question

我希望表中的行具有断开连接的外观，类似于下面附带的内容。我使用CSS border属性尝试了下面的代码，但我想在每行之间使用细边框创建垂直空间，并给出清晰的边框边缘。

.datatable-body-row {
    border: 4px double $light-gray-600;
    border-top: none;
}

这是Stackblitz演示页面

Answer 1

从.datatable-body-row删除CSS并将以下CSS应用于.datatable-row-center应该可以实现您想要的样式：

.datatable-row-center {
    border-style:solid;
    border-width: 1px;
    border-color:#ccc;
    margin-top:1px;
    margin-bottom:1px;
}

.datatable-row-wrapper:hover .datatable-row-center {
    border-color: rgb(104, 152, 241);
}

可以根据希望在每行之间留出多少缝隙来调整顶部和底部边距，但是，如果可能的话，我建议它们相等。

RE，所选内容为深蓝色边框，奇怪的是，它来自父单元格的背景颜色，而不是实际边框。以下应将其删除：

.ngx-datatable.material.single-selection .datatable-body-row.active,
.ngx-datatable.material.single-selection .datatable-body-row.active:hover
    {
        background: none;
    }

RE左右边界，您看到它们here吗？看起来像下面的图片，所以我不确定为什么它们没有显示-如果不能，您是否可以添加屏幕抓图？我确实添加了一些左边距和右边距，并从表格容器中删除了框阴影，以使每行的左右边框更加明显。

总共，我添加了以下新CSS：

.ngx-datatable.material.single-selection .datatable-body-row.active,
.ngx-datatable.material.single-selection .datatable-body-row.active:hover
    {
        background: none;
    }

.data-container {
    margin-left: 24px;
    margin-right: 24px;
}

.data-container {
    .ngx-datatable.scroll-vertical {
        height: calc(100vh - 10px);
        width: $collection-list-table-width;
        box-shadow:none;
    }
}