# サブテーブルを横スクロールせずに見たい

**URL:** <https://community.cybozu.dev/t/topic/1049>\
**Category:** kintone 開発相談\
**Created:** [2022 年 10 月 20 日午前 5:33 UTC](https://community.cybozu.dev/t/topic/1049 "2022-10-20T05:33:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2043](https://avatars.discourse-cdn.com/v4/letter/l/82dd89/32.png) [@Legacy\_Account2043](https://community.cybozu.dev/u/Legacy_Account2043)\
**Post date:** [2022 年 10 月 20 日午前 5:33 UTC](https://community.cybozu.dev/t/topic/1049/1 "2022-10-20T05:33:31Z")

</div>

レコードのテーブルのフィールド数が多いと画面幅からはみ出し、横スクロールをしなくてはいけなくて見づらいです

そこで、以下のようにCSSを記述して画面幅でカラムが折り返すようにしました。

ただ、この状態だと下の写真のようにヘッダーと入力した値との距離が空いてしまって見づらいので何かいい方法はないでしょうか？

あと、フィールドの型によって若干表示が崩れたりします。

&nbsp;

&nbsp;

```
.subtable-row-xxxxxx table {
    width: 1000px;
}
.subtable-row-xxxxxx table, .subtable-row-xxxxxx tbody{
  display: block;
}
.subtable-row-xxxxxx tr {
    display: flex;
    flex-wrap: wrap;
}
.subtable-row-xxxxxx th,.subtable-row-xxxxxx td {
    width: 200px !important;
    display: inline-block;
    border-width: 1px;
    box-sizing: border-box;
}
.subtable-row-xxxxxx td:not(:last-child) {
    border: solid 1px #e3e7e8 !important;
}

```

（subtable-row-xxxxxxの部分はテーブルごとに変わります）

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2757](https://avatars.discourse-cdn.com/v4/letter/l/65b543/32.png) [@Legacy\_Account2757](https://community.cybozu.dev/u/Legacy_Account2757)\
**Post date:** [2022 年 10 月 20 日午後 3:10 UTC](https://community.cybozu.dev/t/topic/1049/2 "2022-10-20T15:10:02Z")

</div>

[N](https://community.cybozu.dev/hc/ja/profiles/7517275851801-N)様

一度に全部見えなくて良いなら、setFieldShown()とラジオボタンの組み合わせで  
一度に表示するテーブル内フィールドの数を制御する方法があります。  
[フィールドの表示／非表示 - cybozu developer network](https://community.cybozu.dev/hc/ja/articles/360015513211-%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E8%A1%A8%E7%A4%BA-%E9%9D%9E%E8%A1%A8%E7%A4%BA)  
[フィールドの表示/非表示カスタマイズをがっつり使ってみた](https://qiita.com/RyBB/items/d133cad3be1346573945)

そうでなければ、大人しくテーブルを二つにわける感じでしょうか。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account93](https://avatars.discourse-cdn.com/v4/letter/l/53a042/32.png) [@Legacy\_Account93](https://community.cybozu.dev/u/Legacy_Account93)\
**Post date:** [2022 年 10 月 21 日午前 2:34 UTC](https://community.cybozu.dev/t/topic/1049/3 "2022-10-21T02:34:17Z")

</div>

N様、TO様  
すみません、横から失礼します。  
プラグインでも可能でしたらおそらくご要望に沿えるものがあります。

私もちょうどテーブルが横に長いのが嫌で解決策を探していて、  
このプラグインを使ってみたのですがヘッダーとボディが一緒に折り返されるので見やすいと思います。

ダウンロードに無料登録が必要です。  
紹介しておいてなんですが、プラグインなのでインストールは自己責任でお願いします。  
[https://it.kozen.co.jp/service/plugins/kholohfjjngkkocahbejchmchmmajcdh](https://it.kozen.co.jp/service/plugins/kholohfjjngkkocahbejchmchmmajcdh)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2043](https://avatars.discourse-cdn.com/v4/letter/l/82dd89/32.png) [@Legacy\_Account2043](https://community.cybozu.dev/u/Legacy_Account2043)\
**Post date:** [2022 年 10 月 21 日午前 5:10 UTC](https://community.cybozu.dev/t/topic/1049/4 "2022-10-21T05:10:57Z")

</div>

TO様

ご回答ありがとうございます。

確かにこの方法で表示非表示を切り替えれば実現できそうな気がします。

javascriptで細かい制御をしなければならなくなったらこの方法を試してみたいと思います。

saitou takeru様

ご回答ありがとうございます。

このプラグインで見やすく折り返すことができました。

今回は簡易的に見えやすくすることが目的だったのでこちらのプラグインを利用したいと思います。

お二方どうもありがとうございました。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 6 月 4 日午前 1:51 UTC](https://community.cybozu.dev/t/topic/1049/5 "2024-06-04T01:51:27Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。