【Wordpress レスポンシブ対応】プラグイン"Table Press"の表の大きさを、スマホの画面幅に合わせて調整したい

Question

Wordpressのプラグイン"Table Press"で作成した表を固定ページに埋め込む際、スマホ画面の幅に合わせて、テーブルサイズ(フォントサイズ)を調整して表示させたいです。
※使用テーマ：Cocoon

【既に試したこと】ーーーーーーーー
①
"TablePress Extension: Responsive Tables"は既にインストールして有効済。
以下の通りショートコードを埋め込みましたが、スマホ画面で表示させてもテーブルサイズ(フォントサイズ)が変わらず、画面から見切れてしまいます。

[table id=1 responsive="phone"/]

②
Tabel Pressの設定画面内の"プラグインのオプション"にて、フォントサイズを30px(PC版)から19px(SF版)に変更しようと以下CSSを追記しましたが、PC版(30px)と変わりませんでした。

@media screen and(max-width:768px){
#tablepress-1 {
	font-size: 19px;
}

ーーーーーーーーーーーーーーーー

どなたかご存じでしたら、ご教示頂けませんでしょうか？
追加情報必要あればご共有するのでお申し付け頂ければ幸いです。もし不足情報あれば申し訳ございません。

Answer 1

①の方は、responsive="phone" ではうまくいかないようです。
参考
例えば、上記のページにある

[table id=123 responsive=flip responsive_breakpoint="phone" /]

のように書き換えてみてはいかがでしょう？

②についてですが、ご提示のコードをそのままコピペすると、最後の}が足りないのと、andの後に空白がありませんので、取り消されてしまいますね。

@media screen and (max-width:768px) {
	#tablepress-1 {
		font-size: 19px;
	}
}

このコードをコピペしてみても上手くいきませんか？

Comments

[M-H]

Fushi_me 様

ご回答ありがとうございます。
①試してみましたが、表の行と列が逆転して、また横スクロールされる表示(見切れた状態)になってしまいました。。。

②すいません、こちらではその記載が抜けておりました。。
　WP内ではご指摘通りで記載できています。

[Fushi_me]

①についてですが、responsive=flip だとその表示が正常ですね。スクロールさせたくないなら、collapseか stackですかね？参考URLを見てみてください。変更するのは文字サイズのみで、表示自体は変えたくないなら、responsive=〇〇の部分は不要で、responsive_breakpoint="phone" だけで大丈夫だと思います。

②については、正しい表記でも変わらないということですね。css自体は反映されているということでしょうか。デベロッパーツールで768px以下の時の#tablepress-1部分を見てみて、他のcssに上書きされていたりしませんか。ちなみに、プラグインのオプション画面の、Load this “Custom CSS” code to change the table styling: のところにはチェックが入っていますよね。

Answer 2

TablePress Documentation の CSS selectors, Styling に

tablepress-id-<ID> (class of <table>)
Every table has this class (with its ID for <ID>).

とあるように .tablepress-id-<ID> class を指定して

.tablepress-id-1 {
    width: 80%;
    font-size: 19px;
}

のようにするとどうなりますか？

Comments

[M-H]

CHERRY様

ご回答ありがとうございます。
やってみたのですが、変わらずでした。。。

※ちなみにPC版のfont-sizeは、class指定で変更しても連動できているので、
　レスポンシブコードだけが反映されていないようです。。