BLOG

ブログ

CSSで表示形式が固定されているテーブルで悩んでました。
やりたいことは

  • thタグのバックグラウンドとフォントの色変更
  • テーブルの各セルの幅をパーセンテージで管理

だけなのに、もう何度も失敗してる。
なんか、テックなんとかのサイトがやたらと出てくるんだけど、同じ様にやっても全くなんともならない。
で、たどり着いたのがこちらのページ
個人の方が5年以上前に書いてる記事。
その記述の中のこの一言が解決の糸口になりました。
Chromのデベロッパーツールで確認しながら、リセットするStyleを探して追記していくだけ
そうか!デベロッパーツールを使うのか。
ツールの上側のメニューでソース>style.css?○○的なところを見ると、なんとなんでも書いてあるじゃないですか!
該当する

/* table */

の記述を見つけて、こんな記述を追加。

/* table reset */
.p-entry__body table { margin: initial; }
.p-entry__body td, .p-entry__body th { borde: initial; background: initial; vertical-align: middle; }
.p-entry__body th { background: #000000; font-weight: normal; color: #ffffff; }

これでテーブルのマージンなんかは変えずにバックグラウンドの色(黒指定の記述に変えてるけど)、フォントの色、セル幅の管理が自由にできるようになりました。
ありがとうございます。
んー、CSSって苦手。

関連記事一覧