• ベストアンサー

テーブルの幅固定について

テーブルの幅固定を以下のように行っているのですが文字が指定した幅を超えると、 幅を指定してるにも関わらず、文字が改行せずに幅が伸びてしまいます。 自動的に改行になるとばかり思っていました。 <br>での改行は考えていないので、テーブルの幅を絶対的に固定する方法ありますでしょうか? <table width="50" border="0" style="background-color: #cecece"> <tbody> <tr> <td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> </tr> </tbody> </table>

  • HTML
  • 回答数4
  • ありがとう数7

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

  • ベストアンサー
  • aqucent
  • ベストアンサー率39% (78/200)
回答No.2

HTMLでは「単語」は改行されないようになっています。 "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" はスペースを含まない英数字ですので、単語と見なされてしまうのです。 CSSの word-break:break-all を使えば、どんな状況でも強制的に改行します。(CSSの規格外でIE限定です) ただし、単語の区切りによる改行が無効になるので、視認性は下がります。

参考URL:
http://pinotan.blog15.fc2.com/blog-entry-106.html

その他の回答 (3)

  • gura_
  • ベストアンサー率44% (749/1683)
回答No.4

>テーブルの幅を絶対的に固定する方法ありますでしょうか?  テーブルの幅を固定するには、table-layout: fixed;を使います↓ <html><head> </head> <body> <table width="200" border="0" style="background-color: #cecece; table-layout: fixed;"> <tbody> <tr> <td>テーブルの幅を絶対的に固定するには、このようにtable-layout: fixed;を使います</td> <td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> </tr> <tr> <td>結果は、このようになります</td> <td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> </tr> </tbody> </table> </body> </html>

参考URL:
http://www.tohoho-web.com/css/reference.htm#table-layout
  • suzuko
  • ベストアンサー率38% (1112/2922)
回答No.3

<td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> のAAAAAAAAAAの部分は英文でしょうか? 日本語ならばキチンと改行されます。 英文は単語の途中で「-」が無い限り改行されません。 (これは英語表記でのお約束です) もちろん、半角の空白が間にはいると「それは単語が終了した」として改行されます。^^

  • STAGE708
  • ベストアンサー率40% (100/249)
回答No.1

下記サイトを参考にしてみてください。 これじゃ、だめですか?

参考URL:
http://www.newcredge.com/IT/www/html/tag/table/table-width-height.html

関連するQ&A

  • テーブルサイズ指定

    こんにちは。 困ったことがあるのですが、 <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170文字</TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TR></TBODY></TABLE> <BR> <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170>文字</FONT></TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TBODY></TABLE> (それぞれの文字の長さは違います。) という2つのテーブルで、 2つともテーブルの幅が異なるんです。 これを、両方とも同じ幅にすることはできないでしょうか? 宜しくお願いします。

    • ベストアンサー
    • HTML
  • table の幅を固定したい

    初心者です。教えて頂けますか? テーブル内に、php pear mdb2 を利用して文字列を入れているのですが、 文字列が長いのですが、シングルバイト文字とマルチバイト文字で挙動が異なっています。 指定している幅で固定したいのですが どうすれば良いでしょうか? 申し訳ありません。よろしくおねがいします。 <table width="380" border="1" cellspacing="0" cellpadding="0"> <tr> <td> あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。... </td> </tr> </table> <table width="380" border="1" cellspacing="0" cellpadding="0"> <tr> <td> yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy... </td> </tr> </table>

    • ベストアンサー
    • HTML
  • テーブル<TD>の幅の固定

    テーブルのTD幅をWIDTHで指定しているのですが、入力するテキストによって幅が動いてしまいます。 例) <table width="50">  <tr>   <td width="10">AAAAAAAAAAAAAAAA</td>   <td width="40">AA</td>  </tr> </table> というような場合、幅の狭い方のセル幅が広くなってしまいます。 また逆に広い方が何度も改行させられて出力されたり、出力させたいテキストによって、いかようにも幅が変更されてしまいます。 他のサイトなども色々調べてみて、半角英数字の場合は特に顕著ということも書かれてあったのですが、半角英数字の出力は必須なんです。 (全角文字の場合でも、完全に固定とはなりませんでした) やっぱり完全にテーブルのセル幅を固定するのはムリなのでしょうか? 何か解決方法はありますでしょうか? よろしくお願いします。

    • ベストアンサー
    • 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
  • テーブルの隙間をなくす

    テーブルの中に作ったテーブルを一番上に配置したいのですが、どうすれば良いでしょうか?テーブルの下で改行すると上に行くのですが、それだとしたがあまります。 HTMLはこれです。よろしくお願いします。 <table width="800" border="0" cellspacing="0" cellpadding="0" height="600"> <tr> <td> <TABLE width="100%"> <TBODY> <TR> <TD width="241" height="2">  </TD> <TD width="511" align="right" valign="bottom" style="font-size : 8pt;" height="2"> </TD> </TR> </TBODY> </TABLE> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • テーブルを作ったんですが…

    はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>

  • 外部スタイルシートを使ってテーブルの幅を固定する方法について(アルファベットの解除?)

    テーブルで幅を固定した場合に、アルファベットの文字を続けて入れると、 それが改行されず、横に終わるまで続き、結果、固定した幅を無視した 状態で表示されてしまいます。 たとえば「aaaaaaaaaaaaaaaa」とう文字を入れた場合でも、 幅が固定されていれば自動的に aaa aaa aaa aaa aaa と改行される方法はないでしょうか? どんな状況でも幅を固定にしたいと思っています。 <table id="tukuttemitayo"> <tr> <th>aa</th> <th>bb</th> <th>dd</th> <th>ee</th> <th>ee</th> <th>gg</th> <th>we</th> <th>sdfsd</th> <th>3ew</th> <th>asf</th> <th>saf</th> </tr> <tr> <td>36</td> <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td> <td>有り</td> <td>無し</td> <td>neko</td> <td>ham</td> <td>表示中</td> <td>ささ</td> <td>ささ</td> <td>ささ</td> <td>ささ</td> </tr> <tr> <td>87</td> <td>こんちわ</td> <td>有り</td> <td>無し</td> <td>2008-03-13 14:33:22</td> <td>sd</td> <td>sfd</td> <td>sfd</td> <td>sdf</td> <td>sdf</td> <td>df</td> </tr> </table> #tukuttemitayo{ border-collapse:collapse; width:330px; background:red; border:none; } #tukuttemitayo th { width:30px; border:solid 3px #00FF66; background:yellow; } #tukuttemitayo td { background:pink; width:30px; } あと、すごく初歩的な事かもしれませんが、 tableに設定するwidthの幅はthやtdのborderの幅も含めて計算しなくてはならないのでしょうか? <table> <tr> <th></th><td></td> </tr> <tr> <th></th><td></td> </tr> </table> table { width:104px } ←borderがあるので100ではなく104にする? tr {width:50px border:1px } td {width:50px border:1px} どんな条件でもテーブルで固定される幅を作りたいです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • tableの幅をがっちり固定

    <table width="500"> <tr> <td> 長い文字列長い文字列長い文字列長い文字列長い文字列.... </td> ... の場合、widthで500ピクセル幅を指定しているにもかかわらず横幅が500以上に成ってしまいます。 文字列に改行を加えればいいのですが、改行をしない方法で指定した500px内に納めることはできないでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 文字サイズ変更でテーブル要素(幅の値を指定済み)の幅が変化しないようにするには?

    宜しくお願いします。 [症状] TABLE・TDタグにて、幅をしているすると、 文字サイズ:小 で見るときは、設定した値の 適正地が反映されるが、文字サイズ:中 以上に 設定すると、TABLEで設定最多幅は有効なままで あるが、TDで設定した値は完全に無視される形で、 テーブルの中のバランスが乱れてしまう。 [ソース] <table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="white" style="border-collapse:collapse "> <tr> <td style="width:250px; ">あ</td> <td style="width:300px; ">い</td> <td style="width:200px;">う</td> </tr> <tr> <td>え</td> <td>お</td> <td>か</td> </tr> </table> [コメント] 特に変哲のないソースだと思います。 あ~か の文字のところには、それぞれもう少し長い 文章が入る形となります。 [質問] 文字サイズをブラウザ上で変更しても、 TDの幅が変わらないようにしたい。 その際に、文字のサイズを固定はしたくないです。 [その他] styleではなく、width指定しても 効果がありませんでした。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • テーブルの幅

    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指定が出来ないのでしょうか。 なぜ変わってしまうのでしょうか?どこかに記述の問題があれば教えていただければありがたく思います。

専門家に質問してみよう