「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

テーブルがスマホで表示崩れするようになった(バージョンアップ後etc)

Q.記事内のテーブルがスマホで表示崩れするようになりました。

テーマのバージョンアップ後、それまで正常に表示されていた記事内のテーブル表が、スマホで表示崩れを起こすようになりました。対応方法があれば教えてください。

A.テーブルのレスポンシブ対応スタイルを削除してみてください。

ソーシャルボタンおよびクイックタグ機能を追加するアップデートの際、テーブルタグをレスポンシブにするためのスタイルを追加いたしました。これが原因となって表示崩れが発生していたものと考えられます。

使用しているするテーブル(表組み)によっては、レスポンシブのための施策は行わない方がスマホ環境において意図したとおりの表示になる場合もあります。

一度レスポンシブにするためのスタイル定義の削除をお試しください。

編集するファイル:style.css

削除する箇所:

/* ----------------------------------------------------------------------
Table responsive - テーブルのレスポンシブ表示
---------------------------------------------------------------------- */
@media only screen and (max-width:480px) {
    tbody tr { display:block; margin-bottom:1em; }
    tbody th, tbody td{ display: list-item; list-style-type:none;
border: none; }
}

↑↑
上記の箇所を削除し、表示崩れが解消するかご確認ください。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事