表行的行间距

Posted 2021-04-04

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

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

这是Stackblitz演示页面

答案

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

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