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

[foopii]

Kviewer（新バージョン）で下記を実装したいと考えております。
・テーブルの項目ごとに幅を調整したい
・テーブルのヘッダーを固定したい
CSSでのこちらの書き方をご教授いただけますでしょうか。。。

[BackRuler]

自分は以下のCSSを2つ適用し実装しています
テーブルのヘッダーを固定：tableView.css
テーブルの項目ごとに幅を調整：tableColumn.css
まだ試行錯誤しているところもありますので、最後の注意点もお読みください。

tableView.css

/* 
  新リストビューでテーブルのヘッダーを固定し、背景色を白と薄いグレーの交互にする

  1. テーブルのカラムをディスプレイに収まるようにする
  2. テーブルのヘッダーを固定する
  3. テーブルの背景色を交互にする
  4. セル内のテキストを折り返す

  ヘッダーの設定によるtopの値
  1. ヘッダー/ロゴあり、ヘッダーコンテンツ（リッチテキスト）のテキスト書式がH1
  2. ヘッダー/ロゴなし、ヘッダーコンテンツ（リッチテキスト）のテキスト書式がH1
  |Num|header|kv-record-menu|kv-list-head th|kv-user-content-side|
  |  1  |   0px  |        110px       |      188px      |          188px          |
  |  2  |   0px  |         62px        |      140px      |          140px          |
*/

/* 
  変数定義
*/
:root {
  /* 
    タイトルの高さに応じて変更する
    デフォルトはヘッダー/ロゴなし、ヘッダーコンテンツ（リッチテキスト）のテキスト書式がH1
  */
  --tableView-kv-record-menu-top-value: 62px;

  /* kv-record-menuのtop値+78pxに設定するとちょうど良い */
  --tableView-kv-list-head-th-top-value: calc(var(--tableView-kv-record-menu-top-value) + 78px);

  /* 背景色 */
  --tableView-backgroundColor-LIGHT_BLUE: rgb(239, 242, 248);
  --tableView-backgroundColor-LIGHT_GRAY: rgb(249, 250, 250);

  /* ボーダー色 */
  --tableView-borderColor-LIGHT_GRAY: rgb(238, 238, 238);
}

/* --- 1. テーブルのカラムをディスプレイに収まるようにする --- */
/*
  テーブル全体のスタイル 
*/
table {
  /* 列幅を固定し全ての列をディスプレイに収める */
  table-layout: fixed;
}

/* --- 2. テーブルのヘッダーを固定 --- */
/*
  ヘッダー（タイトル）領域
*/
header {
  position: sticky;
  z-index: 1;
  top: 0px;
  background-color: var(--tableView-backgroundColor-LIGHT_BLUE);
}

/*
  検索フォーム・並び替え・パンくず等を囲う領域の要素
  z-indexを設定すると、検索ボタンを押したとき、ポップアップがヘッダーの奥に表示される
*/
.kv-record-menu {
  position: sticky;
  background-color: var(--tableView-backgroundColor-LIGHT_BLUE);
  top: var(--tableView-kv-record-menu-top-value);
}

/*
  テーブルヘッダー領域
*/
.kv-list-head th {
  position: sticky;
  z-index: 2;
  background-color: var(--tableView-backgroundColor-LIGHT_GRAY);
  top: var(--tableView-kv-list-head-th-top-value);

  /* 上下のボーダーは疑似要素で描画。ズーム倍率を拡大したときヘッダーが少し動くことを防止 */
  border-top: none;
  border-bottom: none;
}

[BackRuler]

続きです

/* 
  テーブルヘッダーのボーダーを疑似要素で描画
*/
.kv-list-head th::before,
.kv-list-head th::after {
  content: "";
  position: absolute;
  left: 0px;
  width: 100%;
  background-color: var(--tableView-borderColor-LIGHT_GRAY);

  /* ボーダーの厚み */
  height: 1px;

  /* クリックや操作に影響を与えないようにする */
  pointer-events: none;
}

/* 
  疑似要素で描画する上のボーダー
*/
.kv-list-head th::before {
  top: -1px;
}

/* 
  疑似要素で描画する下のボーダー
*/
.kv-list-head th::after {
  bottom: -1px;
}

/*
  テーブルヘッダーの固定
  overlofw: visible; に設定する
*/
.overflow-x-auto {
  overflow: visible;
}

/* 
  サイドコンテンツ
*/
.kv-user-content-side {
  /* kv-list-head thと同じ値に設定する */
  top: var(--tableView-kv-list-head-th-top-value);
}

/* --- 3. テーブルの背景色を交互にする --- */
/*
  テーブルの背景色を交互にする
*/
tr:nth-child(even) {
  background: var(--tableView-backgroundColor-LIGHT_GRAY);
}

/* --- 4. セル内のテキストを折り返す --- */
/*
  テキストの折り返し設定
*/
td[data-field-type='SINGLE_LINE_TEXT'],
td[data-field-type='MULTI_LINE_TEXT'],
td[data-field-type='RICH_TEXT'],
td[data-field-type='NUMBER'],
td[data-field-type='RADIO_BUTTON'],
td[data-field-type='MULTI_SELECT'],
td[data-field-type='DATE'],
td[data-field-type='DATETIME'],
td[data-field-type='LINK'],
td[data-field-type='CHECK_BOX'],
td[data-field-type='DROP_DOWN'],
td[data-field-type='TIME'],
td[data-field-type='FILE'] {

  /* デフォルトでテキストを折り返す */
  white-space: normal;

  /* 長い単語を折り返す */
  word-wrap: break-word;

  /* はみ出し部分を隠す */
  overflow: hidden;
}

[BackRuler]

続きです

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);
}

[foopii]

ありがとうございます！実現できました！大変助かりました！