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>タグにもクラス設定を行った方がいいかと思います。
是非お試しください。
