wordpress5.3からテーブルの横幅が100%になったので対処法など

wordpressのバージョン5.3以降、表・テーブルの横幅(width)が100%になっています。

今回はテーブルをレスポンシブにする対処法を紹介していきます。

「table width:100%」の場合スマートフォンからはあまり不便さは感じませんが、PCで編集している僕からすれば見づらいので個人的には勘弁してくれって感じでした…

スポンサーリンク

wordpress5.3からテーブルの横幅が100%になった話

wordpress5.3は個人的に使いにくいっすね(´ε`;)ウーン…

アップデートすると改悪してくるのほんとやめてクレメンス~

というわけで、この記事を読んでいるみなさんが自分と同じ現象に苦しんでいるのかわかるように、5.3のアップデートで発生した現象を紹介していきます。

横幅が100%状態

ゲームの用語とか効果をまとめた記事を作成しています。

こういった表・テーブルを使ってまとめるとわかりやすいのですが、5.3のアップデートにより、余白が大きすぎる状態に…

これだと画面サイズの小さいスマートフォンはまだしも、PCユーザーから見てみれば逆に見づらい…と思いますよね。

レスポンシブ状態

さきほど紹介した余白のあるバージョンとはうって変わり、こっちはすっきりしていますよね。

このようなレスポンシブ状態にしたい方向けの設定になります。

テーブルをレスポンシブにする

/*tableのレスポンシブ化*/
.wp-block-table table{
	width:0% !important;
}

結論から言ってしまえば、上記のコードを子テーマ、もしくは親テーマのstyle.cssにぶち込めば完了です!

(Cocoonで子テーマを使っていない人は子テーマもインストールしておこうね!)

レスポンシブと横幅100%を使い分けたい人へ

「!important」を付与してしまうと、全てレスポンシブになってしまいます。

なので、レスポンシブにしたい記事のみ、「!important」を付与すると良いです。

あとがき

検索しても対処法に関して、というかwordpress5.3以降のwidth100%について言及している人がいなかったので、記事にしました。

もっといい解消法があれば教えてください。

wordpress
スポンサーリンク
kanbatch

広告収入やFXが主な生業です。
様々な情報収集が好きで、それらの情報を気ままに発信しています。
IQ140ちょいのMENSA会員です。
ゲーム攻略情報サイトはこちら⇒Baskmedia

kanbatchをフォローする
kanbatchをフォローする
kanbatchブログ

コメント

タイトルとURLをコピーしました