table 行的行间距

Question

我希望 table 中的行断开连接，看起来类似于下面附加的行。我使用 CSS border 属性尝试了下面的代码，但我想在每行之间创建垂直 space 和细边框并给出锐利的边框边缘。

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

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

table 行的行间距

Row spacing for table rows

css

border-spacing

bootstrap-4

ngx-datatable

angular