css - 表格行的行间距

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左右边框，你在这里看到了吗？对我来说看起来像下面的图片，所以我不确定他们为什么没有出现 - 如果没有，你能添加一个屏幕截图吗？我确实添加了一些左右边距并从表格容器中删除了框阴影，以使每一行的左右边框更加明显。

总之，我添加了以下新 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;
    }
}