# kviewer リストビュー ヘッダ部固定

**URL:** <https://community.cybozu.dev/t/topic/5743>\
**Category:** kintone 開発相談\
**Created:** [2022 年 2 月 21 日午前 1:31 UTC](https://community.cybozu.dev/t/topic/5743 "2022-02-21T01:31:01Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2022 年 2 月 21 日午後 2:14 UTC](https://community.cybozu.dev/t/topic/5743/2 "2022-02-21T14:14:41Z")

</div>

foopiiさん

こんにちは。

&nbsp;

私の回答をご覧になっていただいてますね。ありがとうございます。

kViewerでもCSSで固定できましたのでご参考ください。

&nbsp;

ヘッダーコンテンツ（タイトルや検索フォーム）の固定の有無で、テーブルヘッダー（thead th）のtopが変わります。

テーブルヘッダーだけの固定であれば.kv-header の記載は不要です（以下コメントアウトしている通り）。

&nbsp;

3パターンで試して、値は以下コードのコメントの通りです。

※環境によって異なるかもしれません。お使いの環境に合わせて調整してください。

&nbsp;

```
/* ヘッダー（タイトルや検索条件）も固定する場合 */
/* .kv-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: 2;
    background-color: rgb(239, 242, 248);
} */

.kv-main {
    overflow: unset; /* overflowを解除しないとstickyが効かない */
}

/* 一覧テーブルヘッダー固定 */
/* テーブルヘッダーのみなら上記.kv-headerは削除して、thead thのtop:0px */
/* タイトルも固定なら上記.kv-headerを記載して、thead thのtop:38px */
/* タイトル＋検索フォームも固定なら上記.kv-headerを記載して、thead thのtop:128px */
thead th {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: 1;
}

.v-modal {
    display: none; /* 非表示にしないと検索ポップアップ表示時に前面が暗くなる */
}

```

&nbsp;

---

_[View the full topic](https://community.cybozu.dev/t/topic/5743)._