- ベストアンサー
nowrapを指定しても改行されるのですが
一覧表を作り、その内部では改行が行われないようにしたいのですが、 スタイルシートでnowrapを指定(tdやdivなどで)しても、ウィンドウのサイズを変更すると 自動改行が行われてしまいます。 テーブルの幅を85%にし、センター指定していて、ウィンドウが小さくなったときに できればそちらを先に無視して欲しいのですが、無理なのでしょうか。 競合しないタグでの優先順位について調べてみたのですが、分かりませんでした; ブラウザの解釈なのでしょうか？ちなみに、確認しているブラウザはIE6です。 初めは │￣│￣￣￣│￣│￣￣￣│ │￣│￣￣￣│￣│￣￣￣│ │￣│￣￣￣│￣│￣￣￣│ ￣￣￣￣￣￣￣￣￣￣￣ の様に、セル二個組からなる表を、半分横に並べようかと思っていたのですが (表の順序で考えるとおかしいですが;) 縦一列にすれば、よっぽどウィンドウサイズを小さくしない限り自動改行が入ることはなくなるので どうしても無理であれば、そうしようかとも思っています。ただ、根本的な解決にはなっていないので・・・。 理由が分かる方、どうか教えていただけないでしょうか。
- Tukimiyama
- お礼率73% (28/38)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
これをやると改行されませんよ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>copy</TITLE> <style type="text/css"> table{width:80%;margin:auto} #aa{white-space: nowrap;} #bb{white-space: nowrap;} #cc{white-space: nowrap;} </style> </HEAD> <BODY> <table> <tr><td id="aa">ああああああああああ</td><td>ああああああああああ</td></tr> </table> <table> <tr><td>ああああああああああ</td><td><div id="bb">ああああああああああ</div></td></tr> </table> <table> <tr><td><span id="cc">ああああああああああ</span></td><td>ああああああああああ</td></tr> </table> </BODY> <HTML> IE6とFirefoxです。
その他の回答 (1)
- k0021
- ベストアンサー率26% (32/120)
セルの横幅の指定は、<COL>要素を使用して 作成例 <COL span="1" STYLE="width:305px;"> ピクセル（画面上の１ピクセルを意味する） 文字の大きさもピクセル指定しないと作成画面の大きさにより自動改行が入りますよ Tukimiyamaさんのように改行場所等を気にする場合、ピクセルも検討してみて下さい font size="4" 17インチ→18pxです
お礼
回答、どうもありがとうございます。 THMLの方でも、CSSでもTDのwidthを指定したのですがうまくいかず、 悩んでいたのですが、<col>要素を使うのは知りませんでした。 文字の大きさも指定しないと、自動改行されるのですね。 よく分かりました。そちらの方法も考えてみます。 フォントの例までつけて頂き、とても考えやすいです。 ありがとうございました。
お礼
補足を書かせていただいた後、色々触っていたらうまくいきました。 教えていただいたソースから、４種のidを２種のclassに変更して divでクラス指定すると大丈夫でした。 質問する前に自分で試していたときにも、idを使ってtdやspanに nowrapの指定をしてみた気がするのですが・・・なぜうまくいかなかったのか(・_・; DOCTYPEの違いなんでしょうか？可能性としてはそれが高そうですが。とにかく大変助かりました。 本当にありがとうございました。
補足
ご回答ありがとうございます。 早速試してみたのですが、自動改行されなくなりました!! ただ、TDで指定している所だけはウィンドウサイズを変更すると やはり改行されてしまうのですが・・・どこか間違っているのでしょうか;下にソース(一部省略)を書いておきます。もしよければ見て頂けると助かります。 実際は別のスタイルシートで、目立つようにもう少し文字を大きく指定しています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="../style.css"> <style type="text/css"> table{width:85%;margin:auto} #a{white-space: nowrap;} #b{white-space: nowrap;} #c{white-space: nowrap;} #d{white-space: nowrap;} </style> <title>通信１０月号</title> </head> <body> <table align="center"><tr><td> <table border="1" width="100%"> <caption><font size="4"><b>年間担当表</b></font></caption> <tr><td id="a" width="100" align="center">１０月</span></td> <td width="300" align="left"><div id="b">全体チェック(年度始め)</div></td> <td width="100" align="center"><span id="c">４月</span></td> <td width="300" align="left"><p id="d">全体チェック(年度始め)</p></td> </tr> <tr><td width="100" align="center">１１月</td> <td width="300" align="left">山田太郎・田中花</td> <td width="100" align="center">５月</td> <td width="300" align="left">山田太郎・田中花</td> </tr> <tr><td width="100" align="center">１２月</td> <td width="300" align="left">山田太郎・田中花</td> <td width="100" align="center">６月</td> <td width="300" align="left">山田太郎・田中花</td> </tr> </table></div> </td></tr></table> <hr> </body> </html> HTMLを勉強し始めてまだ間がなく、他にもおかしい所が多々あるかもしれません。 気になった点があれば、アドバイス頂けると嬉しいです。よろしくお願いします。