プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

  • 質問者：miyabis
  • 質問日時：
  • 回答数：1件

お世話になります。
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.dt …
<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.dt …
<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>

恐れ入りますが、お分かりになる方、ご回答頂けますでしょうか。
よろしくお願いいたします。

「テーブルの文字をオーバーラップさせたくな」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

　いやはや・・・IE8のシェアはじわじわ減少して４０数パーセント--日本のバージョン別ブラウザシェアグラフ (

http://lhsp.s206.xrea.com/misc/browser-share-ver … )--、Web標準にほぼ準拠したとはいえ完全ではありませんが、IE9以降は、順次Web標準に近づいていくでしょう。
　Web標準ではtableのセルは、固定レイアウト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )の場合、一行目で指定された幅で描画が開始され、あふれたデータは、overflow ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )に従います。初期値は[Initial:visible]ですから、「内容を切り抜かない。 すなわちブロックボックスの外側にもレンダリングされる。」のが本来の動作です。
　よって、そのセルにoverflow:hiddenを指定すればよいです。

★ただ、他にもとてもおかしなところが・・
　XHTML1.0strictはもとより、XHTML1.0Transitinal,HTML4.01Transitionalにも<nobr>は存在しません。
★必ずAnother HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )でチェックする癖をつけましょう。

　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.dt …
<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-html4 … )
　HTMLでページを作らずにプログラムに頼る。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )と、このように対応に苦慮します。

　Visual Studioに含まれる[Visual Web Developer]は、あくまでおまけですが、たとえそうでないにしてもHTMLやCSSの知識がないと、オーサリングツールはHTMLエディタ( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83% … )で作成する以上にとんでもないページが出来てしまいます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

「overflow:hidden」を指定していればよかったのですね。

また、その他にも色々と役立つ情報を含めて頂きありがとうございました。
参考にさせて頂きます。

通報する
お礼日時：2011/07/23 22:22

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報