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>と記述しており、テーマをデフォルトに戻すとテーブルはきちんと表示されます。
文章だけだと説明が難しいのですが、解る方や同じ現象にあわれた方はいらっしゃいますでしょうか？
No.2
38
5
100pt
ソースはちらっとしか見ていないのですが、恐らく普通には再現しないのでは？
IE6とIE7だけ綺麗に表示されるなどという話は、その時点で何かがオカシイです。
wordpressのデフォルト以外のテーマで、『design』というクラスが既に使われている可能性は無いでしょうか？
そこに、floatとかpositionとかがあって、表示を変にしていませんか？
デフォルトでは普通に表示されるという状況からして、デフォルト以外のWordpressのcssと干渉している可能性があります。
tableのクラス名を変えて試してみると、どうなりますか？
No.1
85697
50pt
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;
}
No.2
385
ここでベストアンサー
100pt
ソースはちらっとしか見ていないのですが、恐らく普通には再現しないのでは？
IE6とIE7だけ綺麗に表示されるなどという話は、その時点で何かがオカシイです。
wordpressのデフォルト以外のテーマで、『design』というクラスが既に使われている可能性は無いでしょうか？
そこに、floatとかpositionとかがあって、表示を変にしていませんか？
デフォルトでは普通に表示されるという状況からして、デフォルト以外のWordpressのcssと干渉している可能性があります。
tableのクラス名を変えて試してみると、どうなりますか？
＞IE6とIE7だけ綺麗に表示されるなどという話は、その時点で何かがオカシイです。
そうですよね・・。今までそんなことは無かったものですから、突然で困っています。
＞tableのクラス名を変えて試してみると、どうなりますか？
クラス名を変えても駄目でした。そもそもクラス名を指定しない通常のテーブルがずれてしまいます。
No.3
85697
50pt
CSSの提示をありがとうございます。
tableタグの "margin: 5px auto" が原因ではないかと思われます。
以下のように絶対値を指定するようにしてみてください。
margin: 5px 5px 5px 5px;
回答ありがとうございます。
訂正してみましたが、直りませんでした。無念・・
Cherenkov
2011/02/16 06:27:16
30
25
dekapurio
yoroshikudesu
1
1
＞IE6とIE7だけ綺麗に表示されるなどという話は、その時点で何かがオカシイです。
そうですよね・・。今までそんなことは無かったものですから、突然で困っています。
＞tableのクラス名を変えて試してみると、どうなりますか？
クラス名を変えても駄目でした。そもそもクラス名を指定しない通常のテーブルがずれてしまいます。