テーブルの文字をオーバーラップさせたくない

2011/07/23 17:14

このQ&Aのポイント

VisualStudio 2002で作ったWEBアプリケーションを、VisualStudio2010に切り替える作業を実施中。
VisualStudio2002とVisualStudio2010のDOCTYPEが異なり、テーブルの表現が変わってしまった。
VisualStudio2010では、テーブルの文字列がセル幅を超えてはみ出してしまうため、表示を隠したい。

テーブルの文字をオーバーラップさせたくない

お世話になります。 VisualStudio 2002で作ったWEBアプリケーションを、VisualStudio2010に切り替える作業を実施しています。 VisualStudio 2002で出力されるDOCTYPEと、VisualStudio2010のDOCTYPE（正確には2005から）が異なっており、出力されるページの表現が変わってしまいました。 VisualStudio2002では、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html>・・・ VisualStudio2010では、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">・・・となっています。お聞きしたいのは、style="table-layout:fixed;"の付いたテーブルの表現についてです。 VisualStudio2002では、前のセルの文字列がセル幅より大きい場合、はみ出した部分は隠れて表示されます。 VisualStudio2010では、はみ出した部分が次のセルに被さって表示されます。これをVisualStudio2002と同じように、はみ出した部分を隠して表示したいと考えています。なお、出力はIE8のみをターゲットとしており、IE8で正しく表示出来れば問題ありません。（Google Crhomeでは双方ともオーバーラップされて表示されました） VisualStudio2010のDOCTYPEを2002と合わせれば解決しますが、他の部分で影響が出る為、出来ればVisualStudio2010のDOCTYPEをデフォルトのままで、テーブルのはみ出した文字を隠したいと考えています。具体的なソースは以下のとおりです。【VisualStudio 2002】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head><title>オーバーラップされない</title></head> <body> <table border="1" cellspacing="0" cellpadding="0" style="table-layout:fixed;" width="100px"> <tr> <td width="50px"><nobr>テストデータ</nobr></td> <td width="50px">入力</td> </tr> </table> </body></html> 【VisualStudio 2010】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><title>オーバーラップされる</title></head> <body> <table border="1" cellspacing="0" cellpadding="0" style="table-layout:fixed;" width="100px"> <tr> <td width="50px"><nobr>テストデータ</nobr></td> <td width="50px">入力</td> </tr> </table> </body></html> 恐れ入りますが、お分かりになる方、ご回答頂けますでしょうか。よろしくお願いいたします。

miyabis
お礼率37% (20/54)

CSS
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/07/23 19:15 回答No.1

いやはや・・・IE8のシェアはじわじわ減少して４０数パーセント--日本のバージョン別ブラウザシェアグラフ ( http://lhsp.s206.xrea.com/misc/browser-share-version.html )--、Web標準にほぼ準拠したとはいえ完全ではありませんが、IE9以降は、順次Web標準に近づいていくでしょう。　Web標準ではtableのセルは、固定レイアウト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/tables.html#fixed-table-layout )の場合、一行目で指定された幅で描画が開始され、あふれたデータは、overflow ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visufx.html#propdef-overflow )に従います。初期値は[Initial:visible]ですから、「内容を切り抜かない。すなわちブロックボックスの外側にもレンダリングされる。」のが本来の動作です。　よって、そのセルにoverflow:hiddenを指定すればよいです。 ★ただ、他にもとてもおかしなところが・・　XHTML1.0strictはもとより、XHTML1.0Transitinal,HTML4.01Transitionalにも<nobr>は存在しません。 ★必ずAnother HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )でチェックする癖をつけましょう。　XHTML1.0strictでしたら <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head><title>オーバーラップされる</title></head> <body> <table border="1" style="table-layout:fixed;border-collapse:collapse;border:solid 1px black;" width="100px"> <tr> <td width="50px" style="overflow:hidden;border:solid 1px black;">テストデータ</td> <td width="50px" style="border:solid 1px black;">入力</td> </tr> </table> </body></html> ※1)　XML宣言が必要です。 ※2) <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 　　　日本語の文書ですから　　　 xml:lang="ja" lang="ja">です。 ※3)border="1" cellspacing="0" cellpadding="0" は書きません。スタイルシートで ※4)nobrはHTMLにはありません!! Web標準に直すことで、ほとんどすべてのブラウザできちんと、ほぼ同等に見えるはずです。なお、tdのstyle="border:solid 1px black;"はHEAD内に書いたほうが良い--一度ですむ。 ★1 著者はstrictで作成すべき ★2 その場合、非推奨要素や非推奨属性は使えない ★3 ブラウザは、そのような古い要素や属性もサポートしなければならない　きちんと仕様書に書いてある。--ブラウザの★3の機能に頼って作成していると、IE9,IE10も含めて、また直さなきゃならない。　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 ) 　HTMLでページを作らずにプログラムに頼る。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )と、このように対応に苦慮します。　Visual Studioに含まれる[Visual Web Developer]は、あくまでおまけですが、たとえそうでないにしてもHTMLやCSSの知識がないと、オーサリングツールはHTMLエディタ( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB#HTML.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF )で作成する以上にとんでもないページが出来てしまいます。