はじめに
Bubbleで利用できるTableエレメントは、画面から表の幅がオーバーした場合の横スクロール機能がデフォルトで実装されていません。（スマホ表示の際は横スクロールできた方が便利かと思うのでぜひデフォルトで横スクロール可能として欲しいです）
本記事では、暫定的な対応としてTableエレメントの横スクロール可能にする方法をまとめます。
横スクロールの設定方法
前提
以下のようにエレメントを配置します。エレメントツリーは図内の赤枠を参照ください。
（見やすさのため、Tableエレメントの外枠を緑の枠線で囲っています。）
（この先の手順内でツリー構造を変更しますが、あくまでよくある初期のエレメントの状態として以下の構成にしています）
※Table要素の作成方法はこちらを参照ください
＜エレメント配置における注意点＞
- Tableエレメントの親要素（画像内の「Outer Box」）の[Container layout]は「Column」に設定ください
- Tableエレメントの親要素（画像内の「Outer Box」）の[Make this element fixed-width]のチェックは外してください
- Tableエレメントが画面の幅から溢れるように、Tableエレメントの[Make this element fixed-width]にチェックを入れ、widthを600pxなどに設定ください（スマホ画面での検証前提）
上記の通りエレメントを配置しChrome検証画面でスマホ表示を確認すると、以下の通り、テーブルがBoxエレメントからはみ出てしまいます。
以下の手順により、テーブルをBoxエレメント内に納め横スクロールで表全体を閲覧できように設定します。
①エレメントにCSSを適用するためID付与機能を有効化
エディター画面の左のツールバーから[Setting]を開き、[General]タブを開きます。[General]タブ内下部にある[Expose the option to add an ID attribute to HTML elements]をチェックします。
②Tableエレメントを入れるためのGroupエレメントを配置
（Tableエレメントに直接CSSを適用しても横スクロールを実現できないため、）Tableエレメントを入れるためのGroupエレメントを配置し、その中にTableエレメントを入れます。
③GroupエレメントにIDを付与
横スクロールを可能にするCSSをに適用するため、Tableエレメントを含んだGroupエレメントにIDを付与します。（画像の例では「enable-horizontal-scroll」というIDを付与しています）
④ページ内にスタイル（HTML）を記述する
ページ内にHTMLエレメントを配置し、以下のスタイルを記述します。
<style>
#enable-horizontal-scroll {
overflow-x: auto !important; /* 横スクロールを有効化 */
overflow-y: hidden !important; /* 縦スクロールを無効化 */
display: block;
white-space: nowrap;
}
</style>
⑤追加したスタイルを非表示にする
追加したスタイルが画面上に表示されないように、HTMLエレメントの[This element is visible on page load]のチェックを外し、[Collapse when hidden]にチェックを入れます。
完成イメージ
以上の操作を完了しプレビュー表示すると、以下のように表がBox内に収まり、横スクロールが可能になります。
終わりに
本記事に関して不明点やうまく設定できない箇所などありましたらコメントください。