Kviewer（新バージョン）のCSSについて

kintone カスタマイズ
4

続きです

tableColumn.css

/* 
  新リストビューのカラム設定

  1. リストビューのカラムによってwidthの値を変える
  2. ヘッダーを中央寄せにする
*/

/*
  フィールドコードが文字列__1行_のカラム幅を設定
*/
th[data-field-code='文字列__1行_'],
td[data-field-code='文字列__1行_'] {
  width: 50px;
}

/*
  1列目～3列目までの見出しを中央寄せにする
*/
table th:nth-child(1)[data-field-code='文字列__1行_'] .flex,
table th:nth-child(2)[data-field-code='日付'] .flex,
table th:nth-child(3)[data-field-code='日時'] .flex {
  /* `flex`クラスの中央寄せ */
  justify-content: center;
  display: flex;
  align-items: center;
}

注意点
CSS内のコメントで概ね理解していただけるかと思いますが、いくつか注意点がございます。

  1. 長いコードとなっているため、スマートな方法がありましたら自分もお教えいただきたいです。
  2. ヘッダーを固定するにあたり、ヘッダーコンテンツのコンテンツタイプをリッチテキスト、H1に設定しています。それ以外の場合は変数定義にある–tableView-kv-record-menu-top-value: 62px;の値を変更して調整してください。
  3. セル内のテキスト折り返し設定は全てのフィールドを設定していないため、適宜追加してください。
  4. 他のCSSで:rootを設定している場合、変数名が衝突していないか確認してください。
  5. 背景色を交互に設定していますので不要でしたら、以下のCSSを削除してください。
tr:nth-child(even) {
  background: var(--tableView-backgroundColor-LIGHT_GRAY);
}
「いいね！」 2