CSS在表格中插入伪元素并将其移动到父/母边界的左侧/右侧

我正在使用数据表库“ag-grid”（使用Angular 2，但没关系），它标记为选中行（默认类.ag-row）通过放置一个.ag-row-selected类。在一排内部是一堆带有.ag-cell级别的单元。CSS在表格中插入伪元素并将其移动到父/母边界的左侧/右侧

现在我正在努力完成的是不通过对背景进行着色来做出选择，而是通过用“条纹”在左侧和右侧标记行。我可以通过插入开头的空列和表的末尾做到这一点，然后做：

$selection-padding-width: 6px; 
ag-grid-angular { 
    height: 100%; 
    // making room for selection-padding-stripe: 
    width: calc(100% - 2 * #{$selection-padding-width}); 
} 
/deep/ .ag-row-selected:before { 
    height: 25px; 
    width: $selection-padding-width; 
    content: ' '; 
    display: inline-block; 
    background-color: $cyan; 
    transform: translateX(-1px); 
}

，你可以在这里看到的结果：

然而，当我移动的蓝色条纹从最左边的单元格的位置到左侧的空白区域，它会消失，因为该空白区域超出容器边界（请参阅width: calc(100% - 2 * #{$selection-padding-width});）。我想知道是否有任何方法可以使选择填充（蓝色条纹）出现在容器上方，例如，当您将transform: translateX(-6px)应用于容器时，可以看到选择填充（蓝色条纹）。

如果你想在行动中看到AG-格，这里是一个plunkr： https://plnkr.co/edit/ehKrzYNuZ64CYBOClbL6?p=preview

来源

2017-08-28 Phil

您想在选定行的开始和结束处显示蓝色条纹？你可以只针对每行的第一个和最后一个div并给他们一个边界？ – sol

这种方法的问题是当我移动列的位置时，条纹也会移动。所以我必须调用重绘方法，导致整个网格闪烁一会儿 – Phil

但是我可能会尝试在整行添加边框....我会告诉你，如果我遇到任何问题 – Phil

确定为ovokuro在评论建议，对付它的最好方法是使用一个边界。但我建议在行上而不是在单元格上使用它，因为当您移动单元格时，边界也会随该单元格移动，而不是停留在整行的左侧或右侧。最后，我的解决方案看起来是这样的：

/deep/ .ag-header-row { 
    background-color: $table-header-color; 
    border-left: $selection-padding-width solid $table-header-color; 
    border-right: $selection-padding-width solid $table-header-color; 
} 

/deep/ .ag-row-even:not(.ag-row-selected) { 
    border-left: $selection-padding-width solid $even-row-color; 
    border-right: $selection-padding-width solid $even-row-color; 
} 

/deep/ .ag-row-odd:not(.ag-row-selected) { 
    border-left: $selection-padding-width solid $odd-row-color; 
    border-right: $selection-padding-width solid $odd-row-color; 
} 

/deep/ .ag-row-selected { 
    border-left: $selection-padding-width solid $cyan; 
    border-right: $selection-padding-width solid $cyan; 
} 

/deep/ .ag-row-even, .ag-row-even.ag-row-selected { 
    background-color: $even-row-color!important; 
} 

/deep/ .ag-row-odd, .ag-row-odd.ag-row-selected { 
    background-color: $odd-row-colort!important; 
} 

/deep/ .ag-header-container { 
    left: 0!important; 
} 

/deep/ .ag-body-viewport { 
    overflow-x: hidden!important; 
}

需要的最后两个部分，以防止头部和溢出的身体，因为AG-电网自动添加一些间距，当你移动列到最右边的位置并且行上有一个border-attribute。需要!important，因为ag-grid会以编程方式添加一些类，以设置相同的属性

来源

2017-08-28 20:53:49 Phil

CSS在表格中插入伪元素并将其移动到父/母边界的左侧/右侧

回答

相关问题