表の罫線が消せない!

作成日:2019年4月26日

更新日:2020年6月27日

 

WordPressで表を作成し、罫線を消したい場合があります。HTMLではborder="0"にしたら罫線は表示されなかったのに、WordPressでは薄いグレーの罫線が表示されてしまうことがあります。

<例>

<table border="0" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td>コーヒー</td>
<td>紅茶</td>
<td>ジュース</td>
</tr>
<tr>
<td>500円</td>
<td>650円</td>
<td>150円</td>
</tr>
</tbody>
</table>

コーヒー 紅茶 ジュース
500円 650円 150円

今回は罫線を非表示にする方法をご紹介します。

HTMLで修正する方法

全てのタグ<table><tbody><tr><th><td>にstyle="border: none;"をつければ罫線を非表示することができます。

<サンプル>

<table style="border: none;" border="0" cellspacing="0" cellpadding="5">
<tbody style="border: none;">
<tr style="border: none;">
<td style="border: none;">コーヒー</td>
<td style="border: none;">紅茶</td>
<td style="border: none;">ジュース</td>
</tr>
<tr style="border: none;">
<td style="border: none;">500円</td>
<td style="border: none;">650円</td>
<td style="border: none;">150円</td>
</tr>
</tbody>
</table>

コーヒー 紅茶 ジュース
500円 650円 150円

CSSを利用する

CSSで任意のクラス名(ここではb_less)を設定し、そのクラス名に対して罫線を表示しないひな型を指定します。

ダッシュボードの「外観」→「カスタマイズ」→「追加CSS」に次のコードをコピーペストします。

.b_less{
border:none;
}
.b_less td{
border:none;
}

次に表を記入するページ(固定ページ、投稿ページ)に戻り、表にクラス属性を追加します。

<table class="b_less" border="0" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td>コーヒー</td>
<td>紅茶</td>
<td>ジュース</td>
</tr>
<tr>
<td>500円</td>
<td>650円</td>
<td>150円</td>
</tr>
</tbody>
</table>

コーヒー 紅茶 ジュース
500円 650円 150円

表が大きくなった場合は全てのタグにstyle="border: none;"をつけるのはかなりの手間となりますのでCSSを利用する方法をお勧めします。ただし、ヘッダータグ<th>を使用する場合、罫線が表示されてしまう場合もあるので、その際は<th>タグにもクラス設定を行った方がいいかと思います。

是非お試しください。

 

この記事が役に立ったらシェア!