特殊HTML

確認いたしましたところ、スマートフォン表示時に、横スクロール用の設定によってセル内の文章が自動改行されない状態となっていました。

該当するテーブルの開始タグを、以下のように変更してください。

続いて、ユーザー指定スタイルへ以下のCSSを追加してください。

..table-cell-wrap {
width: 100% !important;
table-layout: fixed !important;
}

..table-cell-wrap th,
..table-cell-wrap td {
white-space: normal !important;
overflow-wrap: anywhere;
word-break: normal;
}

@media screen and (max-width: 767px) {
.table-cell-wrap {
width: 800px !important;
min-width: 800px;
}
}

パソコンではページ幅に合わせて表示され、スマートフォンでは各セル内で文章を改行しながら、表全体を左右へスクロールできるようになります。

スマートフォンでのセル幅を変更したい場合は、「800px」の数値を調整してください。今回の2列の表では、800pxに設定すると1列あたり約400pxとなります。

よろしくお願いいたします。