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

2023/08/15 14:25

このQ&Aのポイント

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

ベストアンサー

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

2011/07/23 17:14

お世話になります。 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 )で作成する以上にとんでもないページが出来てしまいます。

質問者

お礼 2011/07/23 22:22

「overflow:hidden」を指定していればよかったのですね。また、その他にも色々と役立つ情報を含めて頂きありがとうございました。参考にさせて頂きます。

関連するQ&A

文字とテーブルの間に隙間ができてしまいます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> があると、 <table width="100%"> <tr> <td class="test"> <h1> aaa </h1> </td> </tr> </table> としたときに、cellpaddingをしていないのに、文字とテーブルの間に隙間ができてしまいます。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> をなくすと、通常通り表示されます。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">をつけつつ、Ｈ１タグで記載しつつ、テーブルの間に隙間を作らない方法はありますか？
- 締切済み
- HTML
IE以外のブラウザでスペース
お世話になります現在、ホームページを作っているのですが <?xml version="1.0" encoding="EUC-JP"?> <!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"> <body style="margin-top:0px;"> <table cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align: top;"><img src="img/01.gif" width="180" height="20" alt="画像1" /></td> <td style="vertical-align: top;"><img src="img/02.gif" width="180" height="5" alt="画像2" /></td> </tr> </table> </body> </html> とやったときに IE6.0では上にスペースなく表示されるのですが NN7.1やOpera、Firefoxなどでは画像2の方の上にスペースが入ってしまいますこのスペースをなくす方法はないでしょうか？よろしくお願いします
- ベストアンサー
- CSS
tableにtableをネストした場合
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <style type="text/css"> body{margin:0} table{border-collapse:collapse} td{padding:0;} </style> </head> <body> <table> <tr><td></td><td></td><td></td></tr> <tr><td></td><td> <table style="width:100px;height:100px;background-color:#f93;"> <tr><td></td><td></td><td></td></tr> <tr><td></td><td> a </td><td></td></tr> <tr><td></td><td></td><td></td></tr> </table> </td><td></td></tr> <tr><td></td><td></td><td></td></tr> </table> </body> </html> 以上のソースをIEで見たとき。よく分からない1pxぐらいの隙間が上に開いてしまいます。 FFで見たときには思ったとおりに表示されるのですが・・・。どなたか原因が分かる方おられましたら教えてください。
- ベストアンサー
- HTML
テーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。
#test1はちゃんとスクロールバーが付くのに、テーブル内の設定したセルにはスクロールバーが付きません。 tableタグやth,tdタブにも設定したりと色々しましたが、付きません。なぜなのでしょうか。 <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test page</title> <style type="text/css"> table { background:yellow; } th,td { width:200px; border:solid 1px #000000; overflow:scroll; } #test1 { width:100px; overflow:scroll; } </style> </head> <body> テーブル <br /> <table> <tr> <th>見出し１</th><td>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</td> </tr> <tr> <th>見出し２</th><td></td> </tr> <tr> <th>見出し３</th><td>本文</td> </tr> </table> <div id="test1">あああああああああああああああああああああああああああああああああ</div> </body> </html>
- ベストアンサー
- HTML
“タグの属性”と“スタイル”の優先度について
HTMLの勉強をしています。以下のソースですと、“cellpadding”が機能しません。試しに、*{margin:0; padding:0;}を外しレンダリングしてみると、うまくいきました。これは、やはり、「“タグの属性”と“スタイル”での指定なら、“スタイル”が優先されると考えてよいのですか？」よろしく、お願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style text/css> *{ margin:0px; padding:0px; } </style> </head> <body> <table width="200" border="1" cellspacing="1" cellpadding="15"> <tr> <td>セルパディング</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
liタグ中の二つのTABLEの間を埋めたい
お世話になります。現在二つのテーブルタグを埋めたくて、思考錯誤中です。普通にTABLEタグを利用すると、二つのテーブルは隙間なく埋まります。これをliタグに持っていくと、隙間が発生しております。これを埋める方法はありませんでしょうか？何卒よろしくお願いします。（ちなみに私の環境はIE6です。） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body style="background-color:Black;"> <div> <table> <tr> <td> <table style="background-color: Red;"> <tr> <td> a </td> </tr> </table> <table style="background-color: Red;"> <tr> <td> b </td> </tr> </table> </td> </tr> </table> </div> <ul> <li style="text-align: left; vertical-align: middle;"> <table style="background-color: Yellow;"> <tr> <td> a </td> </tr> </table> <table style="background-color: Yellow;"> <tr> <td> b </td> </tr> </table> </li> </ul> </body> </html>
- ベストアンサー
- HTML
ＤＯＣＴＹＰＥ宣言について
自分はＸＨＴＭＬ１．０を参考通り <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> このように二列で入力しているのですが、一列で入力しても大丈夫なのでしょうか？また、オススメの宣言タイプ？があったら教えてください。お願いします。
- 締切済み
- ホームページ作成ソフト
文字色を変更するCSSが効かない
テーブルのヘッダ部分の文字色を変更したくて下記CSSとHTMLを記述したのですが文字色を変更するcolorが効かなくて困っています。背景色は変更されるのでbackgroudは効いています。原因はお分かりになりますでしょうか。【CSS】 table thead tr td { clolor:red; background:black; } 【HTML】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel="stylesheet" href="test2.css" type="text/css"> <script> </script> </head> <body> <table> <thead> <tr> <td>名前</td> <td>金額</td> </tr> </thead> <tbody> <tr class="odd"> <td>abc</td> <td>3000</td> </tr> <tr class="even"> <td>xyz</td> <td>100</td> </tr> <tr class="odd"> <td>myk</td> <td>20000</td> <tr class="even"> <td>xyz</td> <td>100</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
入れ子にしたテーブルをheight100%にする
お世話になります。以下のソースで、table2の高さを100％にしたいです。この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css">  </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
DreamWeaverでテーブルをCSSにした場合にずれます。
DreamWeaverを使い始めました。 CSSの段組左にテーブルを入れると下記のようになりました。 ----------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="wrap"> <div id="content"> <table width="200px" border="0" cellspacing="0" cellpadding="0"> <tr> <td>1段</td> </tr> <tr> <td>2段</td> </tr> </table> </div> <div id="main">メインメインメインメインメイン</div> <div id="footer"> 下</div> </div> </body> </html> -----↑ここまでDreamWeaver そこで、CSSでテーブルにボーダー0の値を入れて、タグからborder="0"を消すと、段組右側が左の下にずれて表示されます。ブラウザプレビューでは正常ですが、編集しにくくて困ってます。 table { border: none; border-collapse: collapse; } DWでは、このようになるものなのでしょうか。
- ベストアンサー
- HTML