ワードプレスでテーブルを作成時、パソコンでは問題なく表示されるが、スマホで見るとテーブルがすべて表示されなくて途中で切れてしまう場合（テーブルがページの幅を超える場合）の、横スクロールをさせる方法です。
WordPress の投稿編集画面を、コード（テキスト）エディターで開きます。次に、スクロールさせたいテーブルのコードを探します。テーブルのコードは、「<table>～</table>」です。テーブルのコードを見つけたら、スクロールをさせるために「<div class=”scroll”>～</div>」で「<table>～</table>」のコードを挟みます。つまり、「<div class=”scroll”><table>～</table></div>」に変更すればＯＫです。
テーブルのコード修正が完了したら、最後にCSSを追記します。WordPress メニューから「外観」ー「カスタマイズ」ー「追加CSS」に進んで、以下のCSSコードを貼り付けて「公開」をクリックすれば設定が完了です。この場合、画面の大きさに関係なく「<table>～</table>」を挟めばスクロールバーが表示されます。
/*表のスクロールはここから*/
table{
width:100%;
}
.scroll{
overflow: auto;
white-space:nowrap;
}
/*スクロールバーの高さ
.scroll::-webkit-scrollbar{
height: 10px;
}
/*スクロールバーの背景色
.scroll::-webkit-scrollbar-track{
background: #f1f1f1;
border-radius: 5px; /* 角丸にする*/
}
/*スクロールバーの色
.scroll::-webkit-scrollbar-thumb{
background: #bbb;
border-radius: 5px; /* 角丸にする*/
}
/*表のスクロールはここまで*/
実際のスマホでのテーブル表示（スクロールバーが表示されています）
コメント