一覧画面の列固定をすると、スクロールした列の内容が透けて見える

kintone カスタマイズ
1

一覧画面の列固定を試みたところ、列固定自体はうまくいったのですが、固定した列の裏に、スクロールした列の内容が透けて見えてしまう事象が起きています。

現在、CSSで列固定、javascriptで行の色変更をしていますが、コードを修正することで解消することは可能でしょうか。

【CSS（列固定）】

.recordlist-row-gaia>td:nth-child(1),.recordlist-header-cell-gaia:nth-child(1){ position: sticky; left: 0px; width: 50px !important; }
.recordlist-row-gaia>td:nth-child(2),.recordlist-header-cell-gaia:nth-child(2){ position: sticky; left: 50px; width: 117px !important; }
.recordlist-row-gaia>td:nth-child(3),.recordlist-header-cell-gaia:nth-child(3){ position: sticky; left: 167px; width: 237px !important; }
.recordlist-row-gaia>td:nth-child(4),.recordlist-header-cell-gaia:nth-child(4){ position: sticky; left: 404px; width: 117px !important; }
.recordlist-row-gaia>td:nth-child(5),.recordlist-header-cell-gaia:nth-child(5){ position: sticky; left: 521px; width: 314px !important; }
.recordlist-row-gaia>td:nth-child(6),.recordlist-header-cell-gaia:nth-child(6){ position: sticky; left: 835px; width: 180px !important; }


.recordlist-header-cell-gaia:nth-child(1){ z-index:1; }
.recordlist-header-cell-gaia:nth-child(2){ z-index:1; }
.recordlist-header-cell-gaia:nth-child(3){ z-index:1; }
.recordlist-header-cell-gaia:nth-child(4){ z-index:1; }
.recordlist-header-cell-gaia:nth-child(5){ z-index:1; }
.recordlist-header-cell-gaia:nth-child(6){ z-index:1; }

【javascript（行の色変更）】

(function() {
 "use strict";

kintone.events.on('app.record.index.show', function(event) {
 var bgColor
 var elStatus = kintone.app.getFieldElements('完了状況');

 for (var i = 0; i < elStatus.length; i++) {
  var record = event.records[i];

  switch (record['完了状況']['value']) {
   case "完了":
    bgColor = '#ffd900';
    break;
   case "失注":
    bgColor = '#adadad';
    break;
   default:
    bgColor = '#fff8dc';
    break;
   }
  elStatus[i].parentNode.style.backgroundColor = bgColor;
  }
 });
})();

詳しい方、ご教授いただければ幸いです。

2

具体的には以下のようになります。

上が通常時で、下がスクロール後です。