
一覧表を作り、その内部では改行が行われないようにしたいのですが、
スタイルシートでnowrapを指定(tdやdivなどで)しても、ウィンドウのサイズを変更すると
自動改行が行われてしまいます。
テーブルの幅を85%にし、センター指定していて、ウィンドウが小さくなったときに
できればそちらを先に無視して欲しいのですが、無理なのでしょうか。
競合しないタグでの優先順位について調べてみたのですが、分かりませんでした;
ブラウザの解釈なのでしょうか?ちなみに、確認しているブラウザはIE6です。
初めは
│ ̄│ ̄ ̄ ̄│ ̄│ ̄ ̄ ̄│
│ ̄│ ̄ ̄ ̄│ ̄│ ̄ ̄ ̄│
│ ̄│ ̄ ̄ ̄│ ̄│ ̄ ̄ ̄│
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
の様に、セル二個組からなる表を、半分横に並べようかと思っていたのですが
(表の順序で考えるとおかしいですが;)
縦一列にすれば、よっぽどウィンドウサイズを小さくしない限り自動改行が入ることはなくなるので
どうしても無理であれば、そうしようかとも思っています。ただ、根本的な解決にはなっていないので・・・。
理由が分かる方、どうか教えていただけないでしょうか。
No.1ベストアンサー
- 回答日時:
これをやると改行されませんよ。
<!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です。
この回答への補足
ご回答ありがとうございます。
早速試してみたのですが、自動改行されなくなりました!!
ただ、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>通信10月号</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">10月</span></td>
<td width="300" align="left"><div id="b">全体チェック(年度始め)</div></td>
<td width="100" align="center"><span id="c">4月</span></td>
<td width="300" align="left"><p id="d">全体チェック(年度始め)</p></td>
</tr>
<tr><td width="100" align="center">11月</td>
<td width="300" align="left">山田太郎・田中花</td>
<td width="100" align="center">5月</td>
<td width="300" align="left">山田太郎・田中花</td>
</tr>
<tr><td width="100" align="center">12月</td>
<td width="300" align="left">山田太郎・田中花</td>
<td width="100" align="center">6月</td>
<td width="300" align="left">山田太郎・田中花</td>
</tr>
</table></div>
</td></tr></table>
<hr>
</body>
</html>
HTMLを勉強し始めてまだ間がなく、他にもおかしい所が多々あるかもしれません。
気になった点があれば、アドバイス頂けると嬉しいです。よろしくお願いします。
補足を書かせていただいた後、色々触っていたらうまくいきました。
教えていただいたソースから、4種のidを2種のclassに変更して
divでクラス指定すると大丈夫でした。
質問する前に自分で試していたときにも、idを使ってtdやspanに
nowrapの指定をしてみた気がするのですが・・・なぜうまくいかなかったのか(・_・;
DOCTYPEの違いなんでしょうか?可能性としてはそれが高そうですが。とにかく大変助かりました。
本当にありがとうございました。
No.2
- 回答日時:
セルの横幅の指定は、<COL>要素を使用して
作成例
<COL span="1" STYLE="width:305px;">
ピクセル(画面上の1ピクセルを意味する)
文字の大きさもピクセル指定しないと作成画面の大きさにより自動改行が入りますよ
Tukimiyamaさんのように改行場所等を気にする場合、ピクセルも検討してみて下さい
font size="4" 17インチ→18pxです
回答、どうもありがとうございます。
THMLの方でも、CSSでもTDのwidthを指定したのですがうまくいかず、
悩んでいたのですが、<col>要素を使うのは知りませんでした。
文字の大きさも指定しないと、自動改行されるのですね。
よく分かりました。そちらの方法も考えてみます。
フォントの例までつけて頂き、とても考えやすいです。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) エクセルのマクロについて教えてください。 7 2023/01/13 13:33
- Visual Basic(VBA) エクセルのマクロについて教えてください。 1 2022/12/26 12:05
- 大人・中高年 【どうすれば生きやすくなりますか】誤認・ツメが甘い・忘れっぽい 1 2022/07/05 15:55
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- 政治 私の憲法9条改正案はどうですか? これだったら改憲反対派も賛成してくれますか? 【9条】(平和主義) 3 2022/12/22 22:16
- Visual Basic(VBA) 指定月分の顧客データファイルを統合して並べ替え、所定の場所に貼り付ける (再質問) 4 2022/09/14 22:51
- Excel(エクセル) エクセル2013「次のページ数に合わせて印刷」が小さすぎる 9 2023/03/28 10:18
- Excel(エクセル) エクセルのマクロについて教えてください。 1 2023/01/26 09:50
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- 政治 日本で梅毒が増え続けているのは自民党が性犯罪に甘いからですよね? 7 2022/11/04 11:25
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルのセルに画像をピッタ...
-
中に<table></table>が使えるア...
-
cssで、表示されるテキストによ...
-
テーブルの行の高さを指定する...
-
tableでcolspanを使うと次行以...
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
特定の列の<td>または<th>だけ...
-
テーブル入れ子した時の、テー...
-
html・cssで日付をキレイに揃え...
-
テーブルのセルにアンカー
-
EXCELからhtmlへの変換で罫線が...
-
表の中の列の順番を入れ替える...
-
TRタグの余白をcssで設定するには
-
テーブルの表示がずれます
-
HTMLのテーブルで桁をそろ...
-
エクセルをhtml変換した、html...
-
表の1列だけをCSSを使って右揃...
-
HTMLで文とテーブルの間が空く。
-
HTMLセル結合にフォームを組み...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
TRタグの余白をcssで設定するには
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
テーブルのヘッダとボディの幅...
-
中に<table></table>が使えるア...
-
cssで、表示されるテキストによ...
-
テーブルのセルに画像をピッタ...
-
ホームページ 表の上の余白を...
-
文字列が入っているtdを削除せ...
-
tableの要素(tr、td)に一...
-
テーブルの表示がずれます
-
tdなどの閉じタグは省略しても...
-
HTML <td></td>タグ セル内余...
-
EXCELからhtmlへの変換で罫線が...
-
HTMLのテーブルで桁をそろ...
-
html・cssで日付をキレイに揃え...
-
tableでcolspanを使うと次行以...
-
逆L字の表(table)組み
-
CSSだけで<table>の<td>や<tr>...
おすすめ情報