表行的行间距

问题描述 投票:0回答:1

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

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

这是Stackblitz演示页面

enter image description here

css angular bootstrap-4 ngx-datatable border-spacing
1个回答
2
投票

从.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;
    }
}

enter image description here

热门问题
推荐问题
最新问题