WordPress 表の線が表示されない!

WordPressで表を作成、またはエクセルの表をコピーし、ビジュアルエディタで色々色の設定等をしたけどもどうしても表の線が表示されないケースについて対応を示します。
使用テーマ:          Twenty Ten

ビジュアルエディタには、TinyMCE Advancedがプラグインで入っているものとします。

例えば以下のような表です。

	項目1	項目2
評価1	A	B
評価2	C	D

解決策

エクセルまたはビジュアルエディタで表を作成したあとに、表をすべて選んで、「セルのプロパティ」を選び、詳細タブで枠線の色を指定したあと、スタイル欄に「border: 1px solid;」とタイプする。例えば枠線の色を黒色に選んでいたらスタイル欄が

「border-color: #000000; 」

となってますが、そこにタイプして追記し、表示を「border-color: #000000; border: 1px solid;」とします。そうすると以下のように見えます。ここで1pXは線の太さです。またビジュアルモードでは線が依然見えないかもしれませんが、「プレビュー」で見ると変わっています。

	項目1	項目2
評価1	A	B
評価2	C	D

ひとつ注意ですが、「border 1px solid;」とタイプしてもだめですからね。borderのあとに”:”が抜けてますので、かならず「border:」とタイプしてください。

操作説明

上記操作をひとつずつ図示します。

1.表を選択する。以下のように、青色で反転してます。

2.セルのプロパティを選ぶ。

3.詳細タブで枠線の色を選択。(以下の右側の詳細タブをクリックです)

色はマウスで選択です。あるいは黒の場合、RGBをすべて0と入力しても良いです。

 

4.border: 1px solid;と追加タイプ

上記画面でOKを押した後以下の画面になります。

ここでスタイル欄で色が指定されているのがわかります。ここに追記して、「border: 1px solid;」とタイプします。そしてOKを押します。もともとこのセルのプロパティに「線種」という欄がないので、線の種類が指定されていないのです。

これで完成です。セルの枠に線が表示されるのがプレビューで見れるようになっていると思います。

ちなみに「セルのプロパティ」ではなく、「表のプロパティ」で同様の操作をしていも以下のとおり、表の外側だけが中途半端に変更になるだけです。「セルのプロパティ」を選択ください。

エクセルのCut&Pasteでは

エクセルで同様にCut&Pasteして実施してみます。エクセルでは以下のように見えます。

これをCut&Pasteすると以下のように大きさが変わってきます。

	項目A	項目B	項目C
評価A
評価B
評価C

これをビジュアルエディタでマウスで表の大きさを変更してみます。少し手間ですが。

	項目A	項目B	項目C
評価A
評価B
評価C

そして先程と同様の方法で枠線を入れてみます。

	項目A	項目B	項目C
評価A
評価B
評価C

 

どうでしょう。プレビューすると、同様に枠の線が表示されてますね。これで問題が解決されたでしょうか。

スポンサードリンク



スポンサードリンク