• ベストアンサー
  • 困ってます

HTMLの表で幅を指定しても折り返すことは無理なのでしょうか?

以下のHTMLの表は横幅を指定していますが、 すごく横長な表になってしまいます。セルの幅を指定してもセル内の文字を折り返す事は不可能なのでしょうか? <html> <head> <title>table</title> </head> <body> <table width="570" border="1"> <tr><td width="130"> test1</td> <td bgcolor="#CCCCCC" width="440"> oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo </td></tr></table> </body> </html>

共感・応援の気持ちを伝えよう!

  • 回答数5
  • 閲覧数7405
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.2
  • loveobo
  • ベストアンサー率48% (102/210)

私も悩みました。(という意味で経験者) お書きのソースでは、<td>内に英数字がスペースなしで並んでいますね。 これを「途中で改行できない単語」と認識するのだと想像してます。 質問欄も、gooから拝見しますと、<table width="100%"><tr><td width="80%"> のソースにも関わらず、表示はウインドウの外にはみだしています。 ところどころに<wbr>を挿入したら改行してくれないでしょうか? cgiとかで受取るなら、連続する1バイト文字を数えて<wbr>を挿入 してから、<td>内に書き出すとか。 URLのように、途中を区切れないなら、 <a href="ooooooooooooooooooooooooooooooooooooooooooo">ooooooo...</a> のように表示分を短縮するとか。(このサイトの「参考URL」のように)

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • htmlを使って表を作っています

    自分でつくった表だとどうしてかうまくいきません。何がいけないのでしょうか?わからないところをまた自分で見つけて修正するのでポイントとソースを書いていただけませんか? 練習問題と自分が作ったソース載せます。 <html> <h4><b>1問<b></h4> <table border="1"width="400"height="400"> <tr><td background="1_4.jpg"width="200">1_4.jpg</td><td></td></tr> </table> <table border="1"width="400"height="400"> <tr><td>aaaa</td><td>aaaa</td></tr> </table> <h4><b>2問<b></h4> <table border="1"width="50"height="50"> <tr bgcolor="#ff0000"><td></tr></td> </table> <h4><b>3問<b></h4> <table border="1"width="150"height="100"> <tr bgcolor="#0000ff"><td></td><td></td><td></td></tr></table> <table border="1"width="150"height="100"> <tr colspan="3"><td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td> </tr> </table> <h4><b>4問<b></h4> <table border="1"width="100"height="100"> <tr><td bgcolor="#00ff00"></td><td></td></tr></table> <table border="1"width="100"height="100"> <tr><td></td><td></td></tr></table> </html> 課題1_7-2 覚えるタグ ・<td background="★">&#65374;</td> ★には画像ファイル名(URL)を入れます。 <td>タグのbackground属性でセルの背景に画像を 貼り込むことができます。 画像の大きさがセルよりも小さい場合は繰り返して タイル状に並べられます。 それでは早速つくってみましょう。 <第一問:幅400、高さ400、上のセルの数が2つ、下のセルの数が2つの テーブルを作り、左上のセルに1_4.jpgを背景に貼り込んでみましょう。> どうですか?うまく表示されましたか? レイアウトをしていく上で大切なタグになっていくので頑張って作ってみましょう。 背景に指定できるのは画像だけではありません。 文字のように、色を指定することもできます。 覚えるタグ ・<table bgcolor="★">&#65374;</table> ・<tr bgcolor="★">&#65374;</tr> ・<td bgcolor="★">&#65374;</td> ★には色指定値(例:#ff0000)が入ります。 bgcolor属性でテーブルの背景色を設定します。 <table>タグに指定した場合はそのテーブル全体に、 <tr>タグに指定した場合はその横一列(一行)に色がつきます。 <td>タグに指定した場合はそのセルにのみ色がつきます。 それでは実際に作ってみましょう。 <第二問:幅50、高さ50、1つのセルのテーブル全体の背景を赤くしてみましょう。      赤→#ff0000> <第三問:幅150、高さ100、上のセルを3つ、下のセルを3つのテーブルを作り、      上3つのセルの背景を青くしてみましょう。      青→#0000ff> <第四問:幅100、高さ100、上のセルを2つ、下のセルを2つのテーブルを作り、      左上のセルの背景を緑にしてみましょう。      緑→自分で見つけて下さい>

  • 表の幅・高さ100%表示が、ブラウザによっては見え方が違う事ついて

    初めまして。お世話になります。 現在、ホームページを作成していますが、 分からない事がありますので、質問させて頂きました。 ホームページビルダーで、表(tableタグ)を使ったレイアウトを作成中です。 表の幅(width)と高さ(height)を共に100%で指定し、 表の中をセル(td)で細かく仕切り、その中に画像やテキストを配置し、 レイアウトしたいと思っています。 表のサンプルソースはこんな感じです。細かくてすみません…。 <TABLE border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <TR> <TD height="20" colspan="5"></TD> </TR> <TR> <TD height="1" bgcolor="#cccccc" colspan="5"></TD> </TR> <TR> <TD height="30" colspan="5"></TD> </TR> <TR> <TD height="1" bgcolor="#cccccc" colspan="5"></TD> </TR> <TR> <TD colspan="5" height="5"></TD> </TR> <TR> <TD rowspan="3"></TD> <TD rowspan="3" bgcolor="#0000ff" width="1"></TD> <TD height="1" width="700" bgcolor="#0000ff"></TD> <TD rowspan="3" bgcolor="#0000ff" width="1"></TD> <TD rowspan="3"></TD> </TR> <TR> <TD width="700"></TD> </TR> <TR> <TD width="700" height="1" bgcolor="#0000ff"></TD> </TR> </TABLE> 上記のソースでは表の中に、幅700pxの青色の四角いスペースを作っています。 しかし、ブラウザで見え方を確認しますと。 InternetExplorer、Opera、Sleipnirではうまく表示できますが、 Firefox、Lunascapeではうまく表示できません。 高さは大丈夫なのですが、 <TD height="1" width="700" bgcolor="#0000ff"></TD> <TD width="700"></TD> <TD width="700" height="1" bgcolor="#0000ff"></TD>等の、 width="700"が無視され、青色の四角いスペースまでもが、100%表示になってしまいます。 どのようなタグを書けば、どのブラウザでも正しく表示できるようになるのでしょうか? また、Firefox、Lunascapeのバージョンが古いのですが、 これらの影響もあるのでしょうか? Firefoxがバージョン1.5.0.2で、Lunascapeがバージョン3.5.4です。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • テーブルの幅をデフォルトに戻すcssがわかりま

    <html> <head> <title>test</title> <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1> <tr><td>No</td><td>table1</td></tr> </table> <table border=1> <tr><td>No</td><td>table2</td></tr> </table> </body> </html> このようなソースで二つ目のテーブルだけ table { width: 100%; } を適用しない方法はありますか? 実際はテーブルが複数あり 基本的には table { width: 100%; } をテーブルに設定したいのですが とあるテーブルのみテーブルの幅をデフォルトのサイズにしたいのです。 table { width: 100%; } で全てのテーブルに適用した後に クラスを使って該当のテーブルのみ デフォルトの値に戻す方法は有りますか? <table border=1 class="デフォルトに戻す"> <tr><td>No</td><td>table2</td></tr> </table> としたいのですが テーブルの幅をデフォルトに戻すcssがわかりません。 2つのテーブルの幅は指定したくありません。

    • ベストアンサー
    • HTML

その他の回答 (4)

  • 回答No.5
noname#45976

スタイルシートで出来ますよ。(ただしInternet Explorer のみ?^^;) <TD>タグの中に、「style="word-break:break-all;"」を追加してみてください。 要するに、こういう↓感じです。^^ ブラウザ(Internet Explorer )で表示させてみてね。 <html> <head> <title>table</title> </head> <body> <table width="570" border="1"> <tr><td width="130"> test1</td> <td bgcolor="#CCCCCC" width="440" style="word-break:break-all;"> oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo </td></tr></table> </body> </html>

共感・感謝の気持ちを伝えよう!

  • 回答No.4

半角英字では1つの単語とみなされるからか 強制改行になりませんが 日本語でしたらきちんと改行されますよ。

共感・感謝の気持ちを伝えよう!

  • 回答No.3
  • MtHill
  • ベストアンサー率68% (17/25)

Internet Explorer なら、スタイルシートで半角文字を強制改行させることができます。 詳細は過去ログ http://www.okweb.ne.jp/kotaeru.php3?q=212651 (No.2) をご覧ください。

参考URL:
http://www.okweb.ne.jp/kotaeru.php3?q=212651

共感・感謝の気持ちを伝えよう!

  • 回答No.1

自信ないですが、%にしてみてはいかがでしょうか。 変更点は 100% 25% 75% だけにしてあります。 うまくいかなかったら、ごめんなさい。 無視してください。 <html> <head> <title>table</title> </head> <body> <table width="100%" border="1"> <tr><td width="25%"> test1</td> <td bgcolor="#CCCCCC" width="75%"> oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo </td></tr></table> </body> </html>

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • テーブルの幅指定について

    <html> <head></head> <body> <table border width="800" align="center"> <tr> <td>1日目</td>  <td width="200">7:00駅集合→8:00新幹線出発→15:00宿着</td> </tr> <tr> <td>2日目</td>  <td>10:00宿出発→12:00新幹線出発→17:00駅着</td> </tr> </table> </body> </html> ・・・というページを作ります。注目して欲しいのは1行目の2番目のセルのwidth="200"です。  ネスケ(7.02)で見た場合、幅は200になりません。指定しないときと変わらない幅になります。  IE6の場合、セルの幅は変わらないままなのですが、どうやら、中の文字は200が効いているらしく、途中で改行になってます。  次に上のファイルにドキュタイプ宣言 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> をつけてみました。  そうすると、ネスケでは、指定通りセル幅200になりましたが、IEは変わった感じがしませんでした。  これは、ドキュタイプ宣言をつけたネスケが正しい動きをし、IEの動きはバグと考えてよいのでしょうか?  普通に考えると、ドキュタイプのネスケの表示が1番正しい気がするのですが・・・

    • ベストアンサー
    • HTML
  • テーブルの幅 余白をなくすことは可能ですか?

    <html> <head> <title>test</title> </head> <style type="text/css"> table { width: 100%; } </style> <body> <table border=1> <tr><th>a</th><th>b</th></tr> <tr><td>1</td><td>2</td></tr> </table> </body> </html> のように テーブルの幅を100%にしても 両端に余白が出来てしまいますが この余白をなくすことは可能ですか? 添付画像はIEで表示させた状態ですが ファイアフォックスなど他のブラウザで表示させても余白が出来ます。

    • ベストアンサー
    • HTML
  • HTML 表の中の表

    趣味でHPを作り始めたのですが表のところがよくわかりません。 大きな表(外枠)の中に2個目の表を作りたいのですが、どうしても2個目の表が大きな表(外枠)の真ん中に来てしまいます。2個目の表が大きな表の一番上にくっつくようにしたいのですがどうしたらいいのでしょうか。宜しくおねがいします。 <html> <body> <table border="1" height="500" width="300"> <tr> <td> <table border="1" width="100%"> <tr > <td colspan="3" > </td> </tr> <tr>   <td colspan="3"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>  </td> </tr> </table> </body> </html>

  • テーブルの横幅を常にブラウザ一いっぱいに表示するに

    テーブルの横幅を常にブラウザ一いっぱいに表示するには? たとえば *********************************************** <HTML> <HEAD> <TITLE>test</TITLE> </HEAD> <BODY> <table border=1 cellspacing=0 cellpadding=0> <caption>キャプション</caption> <tr> <td>内容1</td> <td>内容2</td> </tr> </table </BODY> </HTML> *********************************************** を作ると、画像のようにコンパクトに表示されてしまいます。 やりたい事はブラウザの横幅が 10cmなら画面いっぱいテーブルを表示させて、 20cmなら画面いっぱいにテーブルを表示させたいです。 <table border=1 cellspacing=0 cellpadding=0 width="2000"> するとはみ出してしまうし、 <table border=1 cellspacing=0 cellpadding=0 width="1000"> だと小さすぎます。 誰がどのブラウザで開いても、横幅は画面いっぱいに入るように表示するにはどういうタグを書けばいいのでしょうか?

    • ベストアンサー
    • HTML
  • ●○■□などの文字を含んだ<td>の幅指定について

    Firefoxで表示確認をしています。 <table border="1" width="100"> <tr> <td>あああああああああああ</td> </tr> </table> だと、幅100pxの位置で自動的に改行されるのですが、 <table border="1" width="100"> <tr> <td>●●●●●●●●●●●</td> </tr> </table> だと改行ず、幅がオーバーしてしまいます。●以外にも○■□などでも同じでした。 ●を使いつつ、指定した幅で改行させることはできないでしょうか?

  • テーブルの幅

    tableのwidth指定についての質問です。 同じレイアウトで複数のhtmlファイルを作るのですが、その中のテーブル及びセルの幅をwidthで固定してあるのにも関わらず、セル内のテキストの長さによって各ファイルごとのテーブルのセルの幅が、IEでの表示で変わってしまいます。 <table width="450" cellspacing="0" cellpadding="2" border="1"> <tr> <th bgcolor="#ffcccc" width="150">aaaaaaaaa</th> <th bgcolor="#ffcccc" width="286">\100,000</th> </tr> <tr> <td colspan="2">ここには商品説明が入ります。ああああああああああああああああああああああああああああああああああああ</td> </tr> </table> 上記のaaaaaaaaaの部分がファイルによって長さが違うのですが、それによってセルの幅が変わってしまいます。 IE6でプレビューすると変わりますが、firefoxでは変わりません。 <th>を<td>に変更すると、幅は固定され変わりません。 IEの場合、thでwidth指定が出来ないのでしょうか。 なぜ変わってしまうのでしょうか?どこかに記述の問題があれば教えていただければありがたく思います。

  • 画面サイズを取得し、テーブルの高さ、幅を指定したい

    以下のような方法で、画面に合わせたテーブルを作成したいのですが、 うまくいきません。 幅の変数を単にタグ属性の値にしても動かない事が判りました。 どのようにしたら、値をセットできるのでしょうか。 ご存知の型がおられましたら教えてください。 よろしくお願い致します。 <html> <head> <title>ウィンドウサイズを取得する</title> </head> <body> <script Language="JavaScript"><!-- w = window.outerWidth; h = window.outerHeight; // --></script> <table width="w" height="h"> <tr> <td> test </td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • フレームで、一回しか切り替わらない

    フレームで、一回しか切り替わらない理由が分からずに困っています。 HTMLは、以下のように記述しています。 index.htmlファイルの内容: <html> <head> <title>フレームテスト</title> </head> <frameset cols="230,*"> <frame src="menu.html" name="subFrame"> <frame src="top.html" name="mainFrame"> <noframes> このページはフレーム対応のブラウザでご覧ください。 </noframes> </frameset> </html> menu.htmlの内容: <html> <HEAD> <title>掲示板</title> </HEAD> <body> <table width="100%" border="1" cellspacing="1" cellpadding="1"> <tr> <td bgcolor="#99FF99"><a href="top.html" target="mainFrame"> メイン掲示板</a></td> </tr> <tr> <td bgcolor="#CCCCCC"><a href="aaa" target="mainFrame"> aaa</a></td> </tr> <tr> <td bgcolor="#CCCCCC"><a href="bbb" target="mainFrame"> bbb</a></td> </tr> <tr> <td bgcolor="#CCCCCC"><a href="ccc" target="mainFrame"> ccc</a></td> </tr> <tr> <td bgcolor="#CCCCCC"><a href="top.html" target="mainFrame"> TOPページにもどる</a></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • 表と画面の余白について

    ホームページ作成初心者です。 Yahoo!のフリースペースGeoCitesで、アドバンストHTMLエディタで直接タグを打って作成していますが、表の行を追加すると、追加した行の幅だけ上部に余白ができてしまい、画面の下半分に表が表示されます。 余白はタイトルと表の間にできますが、タイトルを削除したり表の下に移動させても上面の余白は変わりません。不要な余白をなくす方法を教えて下さい。 ソースは以下の通りで、△△△の項目の<tr></tr>は20位あります。 <html> <head> <title>◯◯◯</title> </head> <!--color--> <body bgcolor="#ddfff" text="#000000" link="#0000ff" vlink="#ff0000"> <center> <!--HEAD1--> <h1>タイトル</h1> <table border="1" cellpadding="3" width="700" cellspacing=1 bordercolor="#dddddd"> <tr bgcolor="#ccfff">   <th>◯◯◯</th>   <th>◯◯◯</th>   <th>◯◯◯</th>   <th>◯◯◯</th>   </tr>  <tr>   <td align="center">△△△</td>   <td align="center">△△△</td>   <td align="center">△△△</td>   <td align="center">△△△</td>  </tr> </table> </body> </html>

  • テーブルデザインのテクニックについて教えてください。

    1x2のテーブル(背景色は緑)、 左セルは赤、右セルは薄い青色に指定しました。 <TABLE border="0" width="400" height="200" bgcolor="#009900"> <TBODY> <TR> <TD bgcolor="#ff0000"></TD> <TD bgcolor="#cccccc"></TD> </TR> </TBODY> </TABLE> ブラウザで見てみると、 どうしても下地に指定した緑色が外枠として表示されてしまいます。 これを消すことは出来ますか?

    • ベストアンサー
    • HTML