人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>と記述しており、テーマをデフォルトに戻すとテーブルはきちんと表示されます。
文章だけだと説明が難しいのですが、解る方や同じ現象にあわれた方はいらっしゃいますでしょうか?

1297799757
●拡大する

●質問者: dekapurio
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS HTML IE6 IE7 IE8
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● あすか
●50ポイント

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

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

◎質問者からの返答

以下がテーブルのみですが、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;

}


2 ● yoroshikudesu
●100ポイント ベストアンサー

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

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


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

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


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

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

◎質問者からの返答

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

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

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

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


3 ● あすか
●50ポイント

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


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

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

margin: 5px 5px 5px 5px;
◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ