表をスクロールさせる設定に挑戦してみた

社畜を誇りとしてますコオロギです。

表のスクロールに今日は挑戦してみようかと。
表の縦方向は良いとして、横方向は気を付けて文字の割り振りをすることがあったりして作成することってあると思うんだけど、皆さんはどうなんだろうか？

ってことで、実際に出来るのかググってみた。

表のスクロール設定の解説も結構あるのはあるけど、コードを埋め込む必要があって、初心者的には敷居が高いなぁ・・・、って思ってたんだけど、購入したテーマ先を調べてみると解説があったので、SANGOテーマを利用している人は、こちらを参考にしてみて下さい。

表の作成方法

表を作成する上で、とても便利なプラグインがTinyMCE Advanced。

このプラグインが一番簡単に表を作成出来ます。

表の作成についてはクラシック版の段落を選択します。

ブロックエディターを私は利用しているので、上のクラシック版の段落を埋め込まれるので、右端のテーブルを選択。

縦、横に直感的に行と列を挿入出来るので、必要分を作成することが出来ます。

表の作成としては、これだけで簡単に出来ます。

HTMLからの作成も出来るみたいですが、私自身は詳しくないので、サルワカさんのサイトに作成の仕方があるので、そちらを参考にしてみて下さい。

表をスクロールさせるには

SANGOテーマで表のスクロール設定をする方法については、リンク先を参考に設定を順に追ってみました。

順番通りにしてみようと思ったのですが、いくつか問題も。

一つ目が、

フォーマットの中に、「スタイル」の項目がない・・・。

今回、表をスクロールするためには、「スタイル」という項目が必要になります。この場合は、ツールの中に「スタイル」を埋め込むということで設定はクリア。

スタイルボタンの挿入設定

WordPressの編集画面→「設定」→「TinyMCE Advanced」を選択

使用しいないボタンの中に「スタイル」があるので、ツールに埋め込み、一番下にある「変更を保存」ボタンを押せば設定は完了。
※変更保存を押し忘れがちなので、押し忘れてしまったら、もう一度やり直しです。

「スタイル」の項目が挿入されているのが確認出来ます。
これでボタンの挿入設定は完了です。

スクロール出来ない問題点

これで出来ると思ったのですが、ここでまた問題が・・・・。
スクロールが出来ない。。

スタイルから、「表をレスポンシブに変える」にしても自動でスクロールが出来ないという問題が。

さらにググってみて、下記のサイトに書かれているコードを参考にもう一度試してみました。

https://helppo-station.com/html-table-scroll

同じように、上記のリンクサイトで作成されたものを参考に表を作成しました。
通常表示だと、プランAとプランBの価格数値は３段に折り曲がって表示されています。

さらに、ソースコードを調べてみると

コードの比較をしてみると分かるんだけど、どうやら各行の”width:33.3333%;”
とかが不具合の原因のよう。

これを解消するには、結局、コードを埋め込む必要があるので、もし上記の様なコードになっていたら、先頭と最後に必要なコードを埋め込むとスクロールが出来流ようになるのでやってみて下さい。

コードを挿入する手順だけ記載します。

「ツール」→「< > ソースコード」を選択すると表のコードが表示されます。

<div style=”overflow: auto;”>と</div>を先頭と最後に挿入してもスクロールは出来なかったんだけど、２段目の<table class=” tb-responsive” style=”border-collapse;width: 100%;height: 110px;#>を<table style=”width: 730px;”>に変更するとスクロール出来た。

こんな感じに出来ました。

欠点として、毎回、表を作成すると設定を行う必要があるので、そこはだけが面倒だかも。