# 横にスクロールができる表作成について

**URL:** <https://www.nocode-faq.com/t/topic/2446>\
**Category:** bubble\
**Created:** [2021 年 12 月 15 日午前 7:13 UTC](https://www.nocode-faq.com/t/topic/2446 "2021-12-15T07:13:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rintaro.ishii0719](https://avatars.discourse-cdn.com/v4/letter/r/e99b99/32.png) [@rintaro.ishii0719](https://www.nocode-faq.com/u/rintaro.ishii0719)\
**Post date:** [2021 年 12 月 15 日午前 7:13 UTC](https://www.nocode-faq.com/t/topic/2446/1 "2021-12-15T07:13:12Z")

</div>

現状作っているアプリについて、横に長い表を作成したいと思っています。

[https://blog.nocodelab.jp/entry/table-grid](https://blog.nocodelab.jp/entry/table-grid)  
こちらの記事で紹介されている有料プラグインのうち、  
下記gif画像のうち、表の中で横スクロールするのをプラグインなし（or 無料プラグインで）実現できないものかと思っているのですが、こちらはやはり難しいものでしょうか？

[https://cdn-ak.f.st-hatena.com/images/fotolife/M/MKCHI/20211111/20211111124832.gif(image larger than 4 MB)](https://cdn-ak.f.st-hatena.com/images/fotolife/M/MKCHI/20211111/20211111124832.gif)

有料で販売されているくらいなので、同じ形での実現は難しいかと考えているのですが、  
もし近しい方法で実現できる方法があれば、ご教示いただけると大変うれしいです。

---

<div class="post-metadata">

**Author:** ![K.nakata](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/k.nakata/32/1810_2.png) [@K.nakata](https://www.nocode-faq.com/u/K.nakata)\
**Post date:** [2021 年 12 月 16 日午前 2:08 UTC](https://www.nocode-faq.com/t/topic/2446/2 "2021-12-16T02:08:14Z")

</div>

CSSでrepeating groupのmax-widthを定義し、overflow: autoにすると横スクロール可能なエリアになります。

---

<div class="post-metadata">

**Author:** ![rintaro.ishii0719](https://avatars.discourse-cdn.com/v4/letter/r/e99b99/32.png) [@rintaro.ishii0719](https://www.nocode-faq.com/u/rintaro.ishii0719)\
**Post date:** [2021 年 12 月 16 日午前 9:50 UTC](https://www.nocode-faq.com/t/topic/2446/3 "2021-12-16T09:50:46Z")

</div>

@K.nakata  
コメントありがとうございます！

プラグインなどでCSSの編集をできるようにする必要があるということですかね？  
もう少し調べてみます！  
ありがとうございます！

---

<div class="post-metadata">

**Author:** ![K.nakata](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/k.nakata/32/1810_2.png) [@K.nakata](https://www.nocode-faq.com/u/K.nakata)\
**Post date:** [2021 年 12 月 16 日午後 4:28 UTC](https://www.nocode-faq.com/t/topic/2446/4 "2021-12-16T16:28:30Z")

</div>

Settingタブ→General→Expose the option to add an ID attribute HTML elementsにチェックを入れると、デザインタブで各エレメントのプロパティエディターの一番下にIDを触れるようになります。

この状態で、HTMLエレメントを配置して

```auto
 <style>
</style>

```

で記述すればCSSがかけます。

---

<div class="post-metadata">

**Author:** ![rintaro.ishii0719](https://avatars.discourse-cdn.com/v4/letter/r/e99b99/32.png) [@rintaro.ishii0719](https://www.nocode-faq.com/u/rintaro.ishii0719)\
**Post date:** [2021 年 12 月 17 日午前 12:35 UTC](https://www.nocode-faq.com/t/topic/2446/5 "2021-12-17T00:35:35Z")

</div>

なるほど！  
ちょっと試してみます！

ありがとうございました！