こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

IEでテーブル内のテキストが勝手に改行されます。

個人でサイトを運営しているのですが、

外部CSSをテーブルに適用するとIEとFirefoxで表示が変わってしまい
困っています。問題は下記です。

テーブルに指定するCSSは以下のようなものです。

table.1{
border-top:1px solid #666666 ;
border-left:1px solid #666666 ;
border-collapse:collapse;
border-spacing:0;
background-color:#ffffff;
empty-cells:show;
text-align:left;
font-size: 10pt;
padding:3px;
}
.1 th{
border-right:1px solid #666666 ;
border-bottom:1px solid #666666 ;
color:#330000;
background-color:#996633;
padding:0.1em 0.1em;
text-align:center;
}
.1 td{
border-right:1px solid #666666 ;
border-bottom:1px solid #666666 ;
padding:8px 8px 8px 8px;
line-height: 120%;
}

そして本文のHTMLです。

<table width="166" border="0" class="1">
<tr>
<td colspan="2"><div align="center">テキストテキスト</div></td>
</tr>
<tr>
<td>イメージ写真</td>
<td>イメージ写真</td>
</tr>
<tr>
<td width="76"><p>テキストテキストテキストテキストテキストテキストテキストテキスト</p></td>
<td width="79"><p>テキストテキストテキストテキストテキストテキストテキストテキスト</p></td>
</tr>
</table>


以上のようなものです。

このようにするとFirefoxではきちんと表示されるのですが、
IEだとテキストの部分が4文字ほどで勝手に改行されてしまい、
かなり縦長のテーブルになってしまいます。

試行錯誤してみたのですが、全然できなくて本当に困っています。
もし解決策をご存知の方おられましたら、ぜひ教えていただければ幸いです。

投稿日時 - 2011-02-14 10:10:43

QNo.6521718

すぐに回答ほしいです

質問者が選んだベストアンサー

DOCTYPE宣言で表示が異なりますので、ソースを頭から見てもらうのが良いと思います。

クラス名が数字でもアルファベットでも同じと言われていますので、DOCTYPE宣言がないと考えられますが。
IE6のcssは、tableに引き継がないとかありますので、部分的なソースでは何とも言えませんね。

投稿日時 - 2011-02-15 13:32:20

お礼

そうですか、IE6ではCSSをtableに引き継がないんですね。
もうすでに古いブラウザということですね。

ありがとうございます。
シェアも少ないみたいなんで、無視してやっていきたいと思います。

投稿日時 - 2011-02-18 11:55:06

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

私の環境ではそのような現象は確認できませんでしたが、
まずクラス名に数値だけを使用するのはやめましょう。
「1」の代わりに「a」等に変更してみてください。

あと縦長のテーブルになってしまうのは、
widthの値が小さいからではないでしょうか。

投稿日時 - 2011-02-14 13:32:11

お礼

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

確認したところIE7では正常に表示されているようです。
1つ前のIE6で表示がおかしくなっています。

アルファベットにしてみても同じでした。
またwidthも関係ないようです。

困りました。。。

投稿日時 - 2011-02-14 18:10:38

あなたにオススメの質問