レコード一覧の列固定について

お世話になっております。

レコード一覧で、横にスクロールしても、

左から5列目までを固定したい…という悩みを持っています。

 

https://developer.cybozu.io/hc/ja/community/posts/115017537323-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E3%81%AE%E5%9B%BA%E5%AE%9A%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

 

の記事を見てやってはみましたが、ダメでした。

最新の方法を教えてください。

下記CSSを試してみてください。

 

.recordlist-row-gaia:nth-child(2n+1) > td {
background-color: #f5f5f5;
}
.recordlist-row-gaia>td,.recordlist-header-cell-gaia {
background-color: #fff;
}
.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: 50px !important; }
.recordlist-row-gaia>td:nth-child(3),.recordlist-header-cell-gaia:nth-child(3){ position: sticky; left: 100px; width: 50px !important; }
.recordlist-row-gaia>td:nth-child(4),.recordlist-header-cell-gaia:nth-child(4){ position: sticky; left: 150px; width: 50px !important; }
.recordlist-row-gaia>td:nth-child(5),.recordlist-header-cell-gaia:nth-child(5){ position: sticky; left: 200px; width: 50px !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; }