- ベストアンサー
テーブルの文字をオーバーラップさせたくない
- VisualStudio 2002で作ったWEBアプリケーションを、VisualStudio2010に切り替える作業を実施中。
- VisualStudio2002とVisualStudio2010のDOCTYPEが異なり、テーブルの表現が変わってしまった。
- VisualStudio2010では、テーブルの文字列がセル幅を超えてはみ出してしまうため、表示を隠したい。
- みんなの回答 （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"><!-- ※2 --> <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><!-- ※4 --> <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 )で作成する以上にとんでもないページが出来てしまいます。
お礼
「overflow:hidden」を指定していればよかったのですね。 また、その他にも色々と役立つ情報を含めて頂きありがとうございました。 参考にさせて頂きます。