今回は、BlooｍMakerのリッチテーブルを利用した列固定の方法についてご紹介します。

１．CSS編集画面にて、以下の内容を設定します。

/*列固定(ヘッダ-1項目目)*/
.columnToFreeze table > thead > tr > th:nth-child(1) {
  position: sticky!important;
  left: 0;
  background-color: lightgray;
  z-index: 2;
}
/*列固定(ヘッダ-1項目目)*/
.columnToFreeze::before table > thead > tr > th:nth-child(1) {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-left: solid 1px lightgrey;
  border-right: solid 1px lightgrey;
}
/*列固定(データ部-1項目目)*/
.columnToFreeze table > tbody > tr > td:nth-child(1) {
  position: sticky!important;
  left: 0;
  background-color: white;
  z-index: 2;
}
/*列固定(データ部-1項目目)*/
.columnToFreeze::before table > tbody > tr > td:nth-child(1) {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-left: solid 1px lightgrey;
  border-right: solid 1px lightgrey;
}

★ポイントとなるのは、以下の２点。

　１つ目はスタイルシートを反映する箇所の指定

　　・スクラッチ開発と異なり、BloomMakerのリッチテーブルは１つの部品として形成されています。

　　　なので、テーブルのセル（※スクラッチ開発でいうところのTHタグやTDタグの部分）に直接CSSクラスを設定することができません。

　　　そのため、CSS編集ではスタイルシートを反映させたい箇所を指定する必要があります。

　　　◆イメージ図

　２つ目はCSSのpositionプロパティとなります。

　・CSSのpositionプロパティでは以下の内容に合わせて、設定が必要になります。

２. CSSクラスの設定

　リッチテーブルのプロパティ設定にある「CSSクラス」に上記１で設定したスタイルシートの内容を設定します。

上記の設定で、リッチテーブル上で指定列の固定ができるようになります。

とはいえ、2024Autumn以降のバージョンでは、リッチテーブルに列固定のプロパティ(columnsToFreeze)が追加されているため、

2024Autumn以前のバージョンで列固定を利用したい場合の参考にしていただければ幸いです。(^^)/