3

在此处输入图像描述

上面的图片就像我想要的

但我使用了 ag-grid,所以我的输出如下图所示

在此处输入图像描述 我正在使用 ag-grid。我想要两行网格之间有更多的空间,这表明该行是分开的。

 .ag-body-container .ag-row {
        margin-top:15px;
        border: 1px solid $white-three;
        background-color: #d8d8d8;
        border-radius: 4px;
        font-size: 12px;
        color: #505050;

我为网格行给出了这个。但是所有行的边距为 15px。但问题是上一行被覆盖到下。所以基本上我需要用特定的空间分隔行。请尽快告诉我。谢谢

4

2 回答 2

5

我想出了不同的解决方案 - 不是基于边界。这样,您不仅可以拥有透明的间隙,而且可以毫无问题地拥有圆润的边缘。

这些行在表格正文行之间产生间隙(标题和第一个正文行之间没有空格):

rowHeight: 58,
rowStyle: {
  "max-height": "50px",
},

“rowHeight”应该是您想要在每行底部制作的行样式高度+边距。

然后,使页眉边距底部:

.ag-theme-material .ag-header{
    margin-bottom: 12px;
}

笔记!如果您使用的主题不是“.ag-theme-material”,请在上面的代码中替换它!

于 2021-09-01T09:19:44.137 回答
4

由于 ag-grid 使用绝对定位来放置行并提供高度,因此填充和边距只会移动行并将它们隐藏在彼此后面。相反,我建议为行提供更大的高度,以便为放置边框留出空间。

像这样的东西会起作用:

var gridOptions = {
    ...
    rowHeight: 45,
    rowStyle: {'border-bottom': 'white 20px solid'},
    ....
};

或者,如果您需要考虑行中的垂直居中:

var gridOptions = {
    ...
    rowHeight: 45,
    rowStyle: {
        'border-bottom': 'white 10px solid',
        'border-top': 'white 10px solid' 
    },
    ....
};

Plnkr 示例

于 2017-09-29T15:12:31.687 回答