1297799757 HTMLのTABLEの表示崩れについて


<table>
<tbody>
<tr><th>11</th><td>22</td></tr>
<tr><th>11</th><td>22</td></tr>
</tbody>
</table>
のような通常のテーブルなのですが、
表示してみると、<th>のしたに<td>がめりこんでしまうような感じになって、さらに<tr>で改行されずに、右に並んでしまいます。
IE6とIE7では、きちんと表示されるのですが、IE8やFirefox3では上記のような崩れが発生してしまいます。
色々調べてみたのですが、cssやDOCTYPE、htmlの記述は問題無いようでした。
wordpressのサイトで、DOCTYPEは、<!DOCTYPE html>と記述しており、テーマをデフォルトに戻すとテーブルはきちんと表示されます。
文章だけだと説明が難しいのですが、解る方や同じ現象にあわれた方はいらっしゃいますでしょうか?

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2011/02/16 04:55:57
  • 終了:2011/02/16 22:35:44

ベストアンサー

id:yoroshikudesu No.2

yoroshikudesu回答回数38ベストアンサー獲得回数52011/02/16 14:48:58

ポイント100pt

ソースはちらっとしか見ていないのですが、恐らく普通には再現しないのでは?

IE6とIE7だけ綺麗に表示されるなどという話は、その時点で何かがオカシイです。


wordpressのデフォルト以外のテーマで、『design』というクラスが既に使われている可能性は無いでしょうか?

そこに、floatとかpositionとかがあって、表示を変にしていませんか?


デフォルトでは普通に表示されるという状況からして、デフォルト以外のWordpressのcssと干渉している可能性があります。

tableのクラス名を変えて試してみると、どうなりますか?

id:dekapurio

>IE6とIE7だけ綺麗に表示されるなどという話は、その時点で何かがオカシイです。

そうですよね・・。今までそんなことは無かったものですから、突然で困っています。

>tableのクラス名を変えて試してみると、どうなりますか?

クラス名を変えても駄目でした。そもそもクラス名を指定しない通常のテーブルがずれてしまいます。

2011/02/16 15:02:37

その他の回答(2件)

id:asuka645 No.1

あすか回答回数856ベストアンサー獲得回数972011/02/16 06:49:19

ポイント50pt

table, tbody, tr, th, td に関わるCSSに問題があるのだと思います。

CSSを提示していただけませんか。

id:dekapurio

以下がテーブルのみですが、css部分です。

一応通常のテーブルとクラス名をつけたものの2種類です。

どちらを使用しても同じ現象になります。

/*--- Table ---*/

table {width: 99%; border-color: #ddd; font-size: 13px; border-collapse: collapse; margin: 5px auto; text-align: left;}

th {padding: 5px 7px; border-color: #ccc; background: #f7f7f7;}

td {padding: 5px 7px; border-color: #ccc;}

/*--- Design Table [ class="design" ] ---*/

table.design{

width: 95%;

border-top:1px solid #eee;

border-left:1px solid #eee;

border-collapse:collapse;

border-spacing:0;

empty-cells:show;

color: #000;

font-size: 13px;

margin: 10px auto;

}

.design th{

border-right:1px solid #ccc;

border-bottom:1px solid #ccc;

color:#333;

background-color:#eee;

padding: 10px 5px 9px 10px;

text-align:left;

font-weight: normal;

background: #f7f7f7;

}

.design td{

border-right:1px solid #ccc;

border-bottom:1px solid #ccc;

padding:5px 10px;

background: #fff;

}

2011/02/16 13:58:11
id:yoroshikudesu No.2

yoroshikudesu回答回数38ベストアンサー獲得回数52011/02/16 14:48:58ここでベストアンサー

ポイント100pt

ソースはちらっとしか見ていないのですが、恐らく普通には再現しないのでは?

IE6とIE7だけ綺麗に表示されるなどという話は、その時点で何かがオカシイです。


wordpressのデフォルト以外のテーマで、『design』というクラスが既に使われている可能性は無いでしょうか?

そこに、floatとかpositionとかがあって、表示を変にしていませんか?


デフォルトでは普通に表示されるという状況からして、デフォルト以外のWordpressのcssと干渉している可能性があります。

tableのクラス名を変えて試してみると、どうなりますか?

id:dekapurio

>IE6とIE7だけ綺麗に表示されるなどという話は、その時点で何かがオカシイです。

そうですよね・・。今までそんなことは無かったものですから、突然で困っています。

>tableのクラス名を変えて試してみると、どうなりますか?

クラス名を変えても駄目でした。そもそもクラス名を指定しない通常のテーブルがずれてしまいます。

2011/02/16 15:02:37
id:asuka645 No.3

あすか回答回数856ベストアンサー獲得回数972011/02/16 17:43:51

ポイント50pt

CSSの提示をありがとうございます。


tableタグの "margin: 5px auto" が原因ではないかと思われます。

以下のように絶対値を指定するようにしてみてください。

margin: 5px 5px 5px 5px;
id:dekapurio

回答ありがとうございます。

訂正してみましたが、直りませんでした。無念・・

2011/02/16 17:59:30
  • id:Cherenkov
    >文章だけだと説明が難しいので

    http://jsfiddle.net/ や http://www.dinkypage.com/ を使って最小限のコードを貼るといいでしょう。どうしたいのか図もあると回答しやすいかと。

    >cssやDOCTYPE、htmlの記述
    が秘密ではいろいろ手間になるでしょう。
  • id:dekapurio
    そんなサイトがあったんですね!

    以下がすべてのcssとなります。
    http://www.dinkypage.com/106277

    参考にならないかもしれませんが、どうぞよろしくお願いします。
  • id:yoroshikudesu
    一度回答したものです。
    wordpressのcssの、table関連要素部分は確認されましたか?
    float無しに右に並ぶとは考えづらく、positionや妙なmarginなどの指定なしに「めりこむ」というような状態が起こるとはどうしても考えにくいです。

    tableの前でfloatを使って、clearしていないとかはありませんか?
    ためしに、tableの前でclear:both;してみませんか?

    tableの途中に「clear:both;」を一つ入れてみて、入れた個所の表示が変化するかどうかとか。
  • id:dekapurio
    yoroshikudesuさま

    コメントありがとうございます。
    別ページで利用しているプログラム(jquery)がcssを読んでいてそれが、該当ページにも適用されていたようです。
    (ソースでは確かにcssは1つ以外に読み込まれていなかったんですが・・・謎です)

    そのcssのtableにはやはり、float: leftがはいっていました・・
    table,tr,td { float: left;} 絶対ありえないようなcssなんですがね。

    無事解決いたしました。本当にお騒がせしました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません