CSSはテーブル内の擬似要素を挿入し、親境界の左/右に移動します

Question

データテーブルライブラリ "ag-grid"（角度は2ですが問題ありません）を使用しています。行（デフォルトクラス.ag-row）に.ag-row-selectedクラスを追加してください。行の中には.ag-cellクラスのセルがたくさんあります。

今私が達成しようとしているのは、背景を塗りつぶすのではなく、左右の行を「ストライプ」でマークすることです。私は最初とテーブルの最後に空の列を挿入することでこれを実現してから行うことができます。

$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です：ovokuroコメントで示唆されているように https://plnkr.co/edit/ehKrzYNuZ64CYBOClbL6?p=preview

Answer 1

[OK]を、これに対処するための最良の方法は、境界線を使用しています。しかし、私はセル上ではなく、行にそれを使用することをお勧めします。なぜなら、セルを移動すると、行全体の左または右にとどまるのではなく、そのセルで境界が移動するからです。最後に、私の解決策は次のようになります。

/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; 
} 

最後の2つの部分は、AG-グリッドが自動的にいくつかのスペースを追加しますので、あなたが一番右の位置に列を移動するときに、ヘッダーと溢れから身体を防ぐために必要とされています行には境界属性があります。 ag-gridはいくつかのクラスをプログラムで追加して同じ属性を設定するので、!importantが必要です