# kveiwer リストビュー ヘッダー＆列の固定

**URL:** <https://community.cybozu.dev/t/topic/8101>\
**Category:** kintone 開発相談\
**Created:** [2023 年 9 月 13 日午前 2:32 UTC](https://community.cybozu.dev/t/topic/8101 "2023-09-13T02:32:36Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![yamada](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@yamada](https://community.cybozu.dev/u/yamada)\
**Post date:** [2023 年 9 月 13 日午前 2:32 UTC](https://community.cybozu.dev/t/topic/8101/1 "2023-09-13T02:32:36Z")

</div>

kveiwerのリストビューでヘッダーと左側３列を固定したい

> [@kviewer リストビュー　ヘッダ部固定](https://community.cybozu.dev/t/topic/5743/2):
>
> foopiiさん こんにちは。 &nbsp; 私の回答をご覧になっていただいてますね。ありがとうございます。 kViewerでもCSSで固定できましたのでご参考ください。 &nbsp; ヘッダーコンテンツ（タイトルや検索フォーム）の固定の有無で、テーブルヘッダー（thead th）のtopが変わります。 テーブルヘッダーだけの固定であれば.kv-header の記載は不要です（以下コメントアウトしている…

こちらを参考にヘッダーの固定は確認済み  
しかし、カスタマイズ前に出来ていた横スクロールができなくなっているため、ヘッダーを固定しつつ、横スクロールができるようにしたい（できれば左側３列分も固定としたい）

現在の動作  
▶overflow が unset だとヘッダー固定となるが横スクロールができない  
（スクロールバーごと消失。Sift＋スクロールもきかない）

▶overflow が auto だと横スクロール実装・左側１列固定となるがヘッダー固定ができない

```javascript
.kv-main {
    overflow: unset;
}

thead th {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  left: 0px;
}

tbody td:first-child {
  position: sticky;
  position: -webkit-sticky;
  z-index: 1;
  top: 0px;
  left: 0px;
  background: #fff;
}

.v-modal {
    display: none;
}

```