wordpressでテーブルが崩れてしまいます。(htmlドキュメントで見ると正常)

[akito2362]

こんにちわ。
Wordpress3.0とTwentyTenをテンプレートにHPを作っています。

テーブルレイアウトではなく、本来の表としてテーブルタグを使いたいのですが、
オフラインでただのhtmlドキュメントとして閲覧したら、IEでもFirefoxでも
ズレなく表示されるのに、wordpressに打ちこんで見ると
IEでもFirefoxでもテーブルの表示がズレまくってるのは何故でしょうか？
ページの記事内に入れてもページテンプレートの
<div class=”entry-content”>の下に入れてもダメみたいです。

ビジュアルエディタでテーブルの操作が出来るようになるプラグインの
TinyMCE Advancedとfckeditor wordpressも試しましたが
wordpress3.0+TwentyTenではTinyMCE Advancedは表の項目自体が存在せず、
fckeditor wordpressはDEMO版ではあった右クリック→セルで結合するコマンドが
自分の環境ではありませんでした。

IEとFirefoxで閲覧した場合の画像をアップしてみました。
http://tabletest.sakura.ne.jp/?page_id=9

wordpressに入力したものを見ると、IEが一番レイアウト崩れが酷いみたいです。
表の縦線が消えてしまっています。Firefoxでも縦のサイズが固定されないのと
文字が上詰めになって表示されてしまっています。

どうしたら解決できるでしょうか？
よろしくお願いします。因みに↓が入力したコードです。(ホームページビルダーを使いました)

<table border="1">
  <tbody>
    <tr>
      <td colspan="4" style="width : 600px;height : 25px;right : auto;"> てすと</td>
    </tr>
    <tr>
      <td colspan="4" style="width : 600px;height : 25px;right : auto;"> てすと</td>
    </tr>
    <tr>
      <td rowspan="2" style="width : 120px;height : 120px;"> </td>
      <td style="width : 160px;height : 60px;" valign="middle" align="center">てすと<br>
      てすと<br>
      てすと</td>
      <td style="width : 160px;height : 60px;" valign="middle" align="center"> <font size="-1">てすとてすとてすと</font></td>
      <td style="width : 160px;height : 60px;" align="center" valign="middle">てすとてすと</td>
    </tr>
    <tr>
      <td style="width : 160px;height : 60px;right : auto;" valign="middle" align="center">てすとてすと<br>
      てすとてすとてすと<br>
      </td>
      <td style="width : 160px;height : 60px;right : auto;"> </td>
      <td style="width : 160px;height : 60px;"> </td>
    </tr>
  </tbody>
</table>
</body>

[jim912]

akito2362さん、こんにちは。

WordPressは、入力時にはbr, pタグを削除し、表示されるときに追加するような仕組みとなっています。この仕組みはビジュアルエディタのみで入力している場合、全く問題ないのですが、htmlモードでタグ付きのソースを入力すると、おかしな所にbr, pが入ってしまい、表示が崩れる原因となります。

おそらく、akito2362さんの場合も同様のケースと思われますが、表示がおかしいのであれば、まずは表示されているhtmlのソースを確認してみる必要があります。

対策としては、拙作のPS Disable Auto Formattingほか、いくつかのプラグインがありますので、試してみて下さい。

[Satoko Kusakabe]

こんにちは。

TwentyTenをテンプレートにHPを作っています。

ということですが、スタイルシートを点検なさいましたか？
23行目に
table, caption, tbody, tfoot, thead, tr, th, td {
という記述もありますし、それ以外にもあるようですから、設定の競合が起こって表示が思うようにいかないものと思われます。スタイルシートから table 関連の設定を削除するか、自分の設定に変えるか、あるいは、スタイルシートの最後に table 関連の設定をし直せば直るものと思われます。

[akito2362]

jim912さん、Satoko Kusakabeさん、ありがとうございます！

jim912さん、
素晴らしいプラグインをお作りですね。
私は使わせていただくばかりなので頭が下がる思いです。
ご紹介のPS Disable Auto Formattingを入れさせていただきましたが
私の場合のレイアウト崩れはbr,pタグが原因ではなかったようです。

Satoko Kusakabeさん、
スタイルシートを点検しましたが、やはり仰られているように
スタイルシートが設定の競合を起こしているみたいです。
プレーンのTwentyTenでも同じようなレイアウト崩れを起こすので
スタイルシートを何とかしないとダメみたいです。
テーブルの一番上と左の線が出なかったりする場合があるのもこれが原因みたいです。

試しにtable関連のタグを全て削除したら、
firefoxではhtmlドキュメントと同じサイズになったのですが
IEでは一番外の枠以外が消えてしまいました。
それとメニューバーの位置の設定なども変わってしまうみたいです。
でも画像を挿入したりしても、枠が崩れなくなりました。

スタイルシートの最後にtable関連の設定をし直すとの事ですが、
これは既存のtable関係のタグを削除せずに、
<table class=””>の為のcssを記述するということでしょうか？

因みにeditor-extenderはTwentyTenでも作動しましたが、
やはりスタイルシートの設定の競合が起こるみたいです。。

質問ばかりで本当に申し訳ないです。

[Satoko Kusakabe]

スタイルシートの最後にtable関連の設定をし直すとの事ですが、
これは既存のtable関係のタグを削除せずに、
<table class=””>の為のcssを記述するということでしょうか？

スタイルシートというのは、ご存じのように、同じ設定（セレクタないしプロパティ）でも、下に行くほど上書きされ（下の方が優先順序が高い）ますので、その特性を活かして設定して下さい、というほどの意味で書きました。

スタイルシートの書式は、
セレクタ {プロパティ: 値}
です。テーブル関連のセレクタとプロパティの組み合わせで、ブログ本文にテーブルを挿入するのに必要なものだけ選んでスタイルシートの最後に記述してみてはどうでしょう。
IE に関しては、IE だけに適用するテクニックがございまして入門書などを読んでみると書いている本もございます。そういうのを参考にするのがよろしいかと思います。
具体的には、

<table class=””>の為のcssを記述するということでしょうか？

class の値を設定して記事本文でのみに適用する値をスタイルシートの最後に記述するのが良いかも。

[kz]

画像ではなくて、実際にテーブルを出力したページを提示すると話が早いです◎

[akito2362]

こんにちは。
>Satoko Kusakabeさん　ありがとうございます。
>kzさん　ご指摘、了解です。

table関連のcssを消した場合にテーブルだけ正常になるといった場合に
設定を優先的に適用させるのではなく、
何も適用させない設定を優先させるにはどうしたらいいのでしょうか？

それと例えば、以下のようなクラスを設定してcssの最後に書き込むと、
widthが何故か効かなくて、枠線の色も上だけ表示されないみたいなんです。

CSS

table.kari{
    width: 100px;
    height: 100px;
    border:1px solid #000000;
}

.kari td{
    width: 100px;
    height: 100px;
    border:1px solid #000000;

}

<table class="kari">
<TR><TD></TD></TR>
</table>

http://tabletest.sakura.ne.jp/?page_id=2

[nobita]

こんにちは、

twentytenのstyle.css　L521

#content tr td {
	border-top: 1px solid #e7e7e7;
	padding: 6px 24px;
}

border-top: 1px solid #e7e7e7;をエスケープしてみてください

参考：スタイルの適用順位は、
「詳細度」= (id属性の数)*100 + (class属性の数)*10 + (要素名の数)*1

点数の高い奴が優先適用されます。

table関連のcssを消した場合にテーブルだけ正常になるといった場合に
設定を優先的に適用させるのではなく、
何も適用させない設定を優先させるにはどうしたらいいのでしょうか？

yahoo user interface reset css
等のスタイルシートフレームワークってのもあります。

あてずっぽで申し訳ありませんが、何かのお役に立てばうれしいです。

[akito2362]

>nobitaさん

おお～。凄いです！
border-top: 1px solid #e7e7e7;をバックスラッシュエスケープしてみると
上と左側の枠線が表示されなかった不具合が見事解決しました。
ありがとうございます。
(お返事が遅くなってすいません。今まで掛かってました・・・orz)

紹介して下さった、
YUI Reset CSSに関しても早速、勉強してみたいと思います！

[nobita]

akito2362さん

うそをついてしまいました。

エスケープ　それ、うそです

コメントアウトですー

nobitaは、あほです。　ごめん