【word press】テーブルの表示サイズをレスポンシブしたい。

Question

【word press】テーブルの表示サイズをレスポンシブしたい。

word press初心者です。

固定ページでテーブルを作成しました。
pcでは幅50%、スマホでは幅100%で表示したいです。
(テーブル作成プラグインはできれば使用しない)

テーブルの「セルのプロパティ」→「一般」→「幅」でPXや%指定をできることは理解済みですが、このやり方ではpcとスマホで表示サイズは同じになってしまします。

テーブルをidやclassでくくって、カスタムCSSでスマホで表示するwidthを指定すればよいでしょうか？

カスタムCSSを下記のようにする場合、個ページのHTMLではどのように記述すればよいでしょうか？

@media screen and (max-width: 640px) {
.table1 {
width: 100%;}
}

これよりも簡単な方法がありましたら教えていただきたいです。
どなたか知恵をお貸しください。
どうぞ宜しくお願い致します。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[amakawa]

teratailの使い方を完全に理解しておらずすみません。解決済みに致しました。ご指摘ありがとうございますm(__)m

Answer 1

テーブル要素は最大幅が100%なので、
幅の狭いテーブルも幅100%したいのでなければ
スマホ表示のスタイル指定は不要だと思います。
PC表示で幅50%にするだけで良いんじゃないでしょうか。

/* スマホで幅100%に統一したいなら
.table1 {
	width: 100%;
}
*/
@media screen and (min-width: 641px) {
	.table1 {
		width: 50%;
	}
}

Comments

[amakawa]

ご回答ありがとうございます。

頂いたCSSを試したのですがダメでした。
pc表示で幅50%にするだけ、で可能ならばそうしたいのですが…。

下記の記述は、スマホ表示以外の時に横幅50%という記述ですよね…？
@media screen and (min-width: 641px) {
.table1 {
width: 50%;
}
}

無知ですみません(__)

[takna]

その通りです。
すでに解決済みということで良かったです。
モバイルファースト、不要なオーバーライドはさせないなどを心がけてスタイリングしていくことをオススメします。

[amakawa]

承知しました。
以後心がけて制作に取り組んでみます。
ありがとうございましたm(__)m

Answer 2

単純にPCとスマートフォンでテーブルの幅の変更を行いたい場合は以下のように
PCの場合のcssとスマートフォンの場合のcssを書き、テーブル自体にはclassを与えます。

/*PCの場合*/
.table1 { 
width: 50%;
}
/*スマートフォンの場合*/
@media screen and (max-width: 640px) {
.table1 { 
width: 100%;
}

<table class="table1">
<tr>
<td></td>
</tr>
</table>

Comments

[amakawa]

ご回答ありがとうございます。

早速試したのですが、現在いじっているword pressで行ったら、なぜか固定ページのレイアウトが崩れる現象が起きてしまいました。
起こった現象下記
※<table class="table1">を記述したテーブルが消えた。
※ページ内にもう一つあるテーブル(こちらには記述していない)が変なところに移動した。

おかしいと思い、現在いじっているものとは違うワードプレスのページで同じ記述を行ったところ、正常に表示されました。

この場合考えられる原因はありますでしょうか？
現在いじっているページのカスタムCSSに以前から記述されているものと何か噛み合わなかったということも考えられますか？

ご質問ばがりですみませんm(__)m

[hanimaru11]

cssとは少し違うお話になってしまうのですが、ブラウザは何をお使いでしょうか？
既にご存知でしたら申し訳ないのですが、Google Chromeでしたらテーブルの上で右クリック→検証
を、することでElementsタブのStyleで今どのスタイルがテーブルに適用されているか見ることが出来ますので一度確認されてみてはいかがでしょうか
またその場でcssを書き加えて動作検証もできますのでおすすめです（あくまでその場での検証です）

[amakawa]

ご返信ありがとうございます。

ブラウザは何をお使いでしょうか？
>Firefoxを使用しています。

検証というのは、Chromeだとデベロッパーツールのことでしょうか？
Firefoxの開発ツールからいろいろと確認しながら操作してみました。

以前から記述されていたCSSを見直しキレイにしてから、いただいたCSSを記述してみたところ、やっと思い通りの形に表示することができました。
とても参考になりました。
お付き合いいただきありがとうございましたm(__)m

[hanimaru11]

解決されたようで良かったです、素敵なページになるといいですね！