• HOME
  • 記事一覧
  • tableタグのcaptionの表示が崩れた!その直し方とは

tableタグのcaptionの表示が崩れた!その直し方とは

コーディング
記事を書いた人 : ヨシオカ レオ
デザイン・カメラ・スノーボードを愛しています。美容師→SE→デザイナー→海外留学→GLUTを立ち上げ!Webデザイナーに役立つ記事を執筆してます。

WordPressをローカル環境で構築する時なんのツールを使用されていますか?

最近パソコンを買い換えたこともあり以前から気になっていたLocal by flywheelという簡単にWordpressのローカル環境で構築することにしました。

ちょうど進めていたプロジェクトがあったのでLocal by flywheelを使ってWordPress化を進めていたところテーブルタグのcaptionタグの表示が崩れてしまいました。

あるタグを追加することで表示崩れが修正できました。

captionにCSSのcaption-sideを追加する

caption {
 caption-side: top;
}

今回の不具合としてはtableタグのすぐ直下にcaptionタグを追加したにも関わらずbottomの位置に表示されてしまいました、調べてみると解決方法はcaptionのCSSにcaption-side:topを追加することで解決する事ができました。

初期値はtopがデフォルトなのでLocal by flywheelかWordPressの仕様上の不具合かと思います。

caption-sideでは下記のプロパティを使用できますがtopとbottom以外の値は非推奨となるのでできるだけ使わない方が無難だと思います。

新しい環境で不具合が起きると結構焦りますよね。

もし同じような症状がでた方は試してみてください。


この記事を共有する

Facebook Twitter Line

関連記事

よく読まれている記事