3

ここに画像の説明を入力

上の画像は私が欲しいようなものです

しかし、私はag-gridを使用したので、出力は下の画像のようになります

ここに画像の説明を入力 私はag-gridを使用しています。行が区切られていることを示す、グリッドの 2 つの行の間のスペースがもっと必要です。

 .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 に答える