クイズ王の部屋

《WordPress》 テーブルの罫線をくっきり表示。


今日は、昨日の投稿の続きみたいなもの。

テーブルの背景色を工夫するだけでは、罫線を見やすくするのは難しい。
もっと濃い線にしようにも、HTMLやCSSがよく分かっていないので、WordPress上ではなかなかうまく表示させられない。

ググっていると次のページを見つけた。

【ヤフージャパン 知恵袋】 ワードプレスの~

このページを参考にして、子テーマのスタイルシートの最後に以下の一行を付け加えた。

table tr, table th, table td { border: solid 1px #008000 !important; }

これによって、このサイトのすべてのページのテーブルは、セルが緑色の直線で区切られることとなった。
色を設定していなくても、あるいは、別のどんな色を設定していても、すべて緑色の罫線になった。

フッターにあるカレンダーの数字まで、ものの見事に緑の枠で囲まれている。

実は、当初は上記のようなカスタマイズをするつもりはなかった。なぜかというと、テーブルの背景色としてありとあらゆる色を使用しているので、罫線の色を一種類に統一するとテーブルによっては罫線が目立たなくなってしまうからだ。
そこで考えたのは、背景色に埋没することが少なさそうな色の罫線にすれば、修正は少なくて済むのではないかということ。
というわけで緑色の線にしてみたら、だいたいどのテーブルでもいい感じになっていた。

これで、セルの枠の色の設定に関する表記はすべて意味がなくなったので、それらを削除すればソースもすっきり短くできるのだが、それをするのは手間がかかるので、時間ができた時にぼちぼち行うとしよう。

追記。
スマホ(アンドロイド)では、セルの枠の色を設定していないテーブルは相変わらず罫線が表示されていない。


投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です