WordPressの表の罫線が表示されないときの対策。太さを変えるだけで動作する?

WordPressで表を使用するときに、表の罫線が表示されなくて困っていませんか。私は罫線を表示しようとしてもうまくいかなかったので、プラグインを入れるなどの方法を試しましたが、それでも表示されませんでした。しかし、簡単な方法で表の罫線を表示することができるとわかったので、その方法を紹介します。

私はこれを発見するまでに1時間以上かかりました(苦笑)

 

表の罫線を表示する方法

1.Style.cssを編集して表のStyleを記述する

Style.cssに以下の記述を加えます。

.entry-content table{
border-top:solid 2px black; /* 上線 */
border-bottom:solid 2px black; /* 下線 */
border-left:solid 2px black; /* 左線 */
border-right:solid 2px black; /* 右線 */
border-collapse:separate;
}

これは記事の本文中の表のスタイルに関する記述です。
border-topなどの要素の太さを2にすることがポイントであり、太さが1の場合にはうまく表示されませんでした。この例では罫線の色を黒にしていますが、他の色を使用することもできます。

 

2.表のhtmlソースを編集する

執筆中の記事をテキストモードで表示して、以下のように記述します。
<table style=”任意”  border=”2″ width=”任意” cellspacing=”0″>

ここでもStyle.cssを編集した場合と同じように、border=2にしてみてください。以下のように表の罫線が正しく表示されるはずです。記事をビジュアルモードで見る場合とプレビューで見る場合で表示のされ方が異なることがありますが、プレビューで見ると正しく表示されることがわかります。

この手順を試す前に、プラグインTinyMce Advancedを使って表を作成した際も、罫線だけは正しく表示することができませんでしたが、この2つの手順を行うことで表の罫線を正しく表示することができました。

WordPressの表の罫線が正しく表示されずに困っている方はこの方法を試してみてください。borderの太さが1だと駄目で、2だとうまく動作する理由はわかりません!


コメントを残す

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