テーブルタグ内の半角文字が隠れます。

Question

IE8で、テーブル内の半角テキストが折り返さずに隠れてしまいます。

他ブラウザでは、セルから飛び出します。
また、全角の場合は、自動的に折り返しています。

こういった現象というのは、何が原因となっているのでしょうか。
CSSかと思い、思い当たる節は変えたり試したのですが、分からなかったため、ご質問させていただきました。

ご存じの方いらっしゃいましたら、何卒ご教授お願い致します。

think49 · Accepted Answer

まずはCSS起因かを切り分けるためにCSSを全て削除してみてはどうでしょう？
overflow が関係している可能性はありますが、切り分けが先だと思います。
CSS起因なら overflow を全て削除してみましょう。少しずつ削除する場所を狭めて問題の記述を突き止めてみてください。
(勿論、作業前にバックアップを取っておく必要があります)

ちなみに長い単語が含まれる場合にゼロ幅スペース(Zero-width space)を使用する必要はありません。
そんな状況のために word-wrap や word-break があるのですから。
http://www.tagindex.com/kakolog/q3bbs/1201/1374.html

ORUKA1951 · Answer

　Tableは、表ですから、内容をすべて表示するため、内容をすべて読み込んで整形することになっています。

　しかし、レンダリングを早くするために、あるいはサイズを固定することで決めることは出来ます。
11.3 視覚系ユーザエージェントによる表の整形 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　しかし、半角英数字を使用する言語体系では単語の途中で折り返すことは原則禁じられています。
9.1 空白類 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　そのため、長い半角英数字が含まれるときは、折り返しても良い文字間に「０字幅スペース」を置くことで対処します。
例)
<div>
abcdefghijklmnopqrstu
</div>

abcdefghijklmnopqrstu

ORUKA1951 · Answer

tableは表ですから、サイズは自動的に計算されることになっています。単語境界のある言語は、単語の途中で改行されません。単語境界のない言語は任意の場所で折り返されます。
　HTMLでは、はみ出したときの処理はユーザーエージェントに任せられています。
　CSSではデフォルトはvisibleなのですが、IEはhiddenになっているようですから、明確にoverflow:visibleと指定する必要があります。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
11.1.1 Overflow: the 'overflow' property

'overflow'
　　Value:　　　　visible | hidden | scroll | auto | inherit
　　Initial:　　　visible
　　Applies to: 　block containers
　　Inherited:  　no
　　Percentages: N/A
　　Media:　　　 visual
　　Computed value:  as specified
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Visual effects( http://www.w3.org/TR/CSS2/visufx.html )］より

ですが、その前にセルの横幅を決めてしまうという間違いを直さないと・・

テーブルタグ内の半角文字が隠れます。

まずはCSS起因かを切り分けるためにCSSを全て削除してみてはどうでしょう？

Tableは、表ですから、内容をすべて表示するため、内容をすべて読み込んで整形することになっています。

tableは表ですから、サイズは自動的に計算されることになっています。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　Tableは、表ですから、内容をすべて表示するため、内容をすべて読み込んで整形することになっています。