• ベストアンサー

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
  • 回答数4
  • ありがとう数4

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

  • ベストアンサー
  • teruta
  • ベストアンサー率65% (13/20)
回答No.2

※非推奨です テーブルタグの中に style="word-break: break-all;" を入れれば一応解決できます。つまり <table style="word-break: break-all;" width="380" border="1" cellspacing="0" cellpadding="0"> とするわけです。 ですが、対応していないブラウザも多く、推奨しかねます。 他の方法としては、長い英数字の途中に<wbr>を混ぜておく方法があります。 yyyyyyyyyyyyyyyyyyy<wbr>yyyyyyyyyyyyyyyyyyy<wbr>yyyyyyyyyyyyyyyyyyy このような感じ。 でもこれもあんまり推奨できないな・・ 一番いいのは長い英数字を使わない書き方をすることです。 見る人が非常に限られているような閉鎖的サイトなら問題ないと思いますが、そうでなければ少し作意に反しても安全な書き方(スペースで区切る)を心がけることをお勧めします。

psychesine
質問者

お礼

ありがとうございます そうですね >長い英数字 がレアケースなんですよね

その他の回答 (3)

  • think49
  • ベストアンサー率59% (285/482)
回答No.4

お勧めはしませんが、HTML文字実体参照で「ゼロ幅空白」(&#x200B;) を指定する方法はあります。 ゼロ幅なので空白が入り込むことはないですし、StrictなHTMLのままでいられます。 yyyyyyy&#x200B;yyyyyyy&#x200B;yyyyyyy&#x200B;yyyyyyy&#x200B;yyyyyyy&#x200B;yyyyyyy&#x200B;yyyyyyy&#x200B; Unicode文字のマッピング - Wikipedia http://ja.wikipedia.org/wiki/Unicode%E6%96%87%E5%AD%97%E3%81%AE%E3%83%9E%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0#.E3.82.BC.E3.83.AD.E5.B9.85.E3.81.AE.E5.A2.83.E7.95.8C.E8.A1.A8.E7.A4.BA.E5.AD.90 # 「長すぎる単語にならないようにする」が正攻法だとは思います。

psychesine
質問者

お礼

ありがとうございます ># 「長すぎる単語にならないようにする」が正攻法だとは思います。 そのようにしようと思います

  • abril
  • ベストアンサー率69% (388/560)
回答No.3

No.1様もご指摘の通り、スペースなしで連続するシングルバイト文字列については”1ワード”として捉えられますので改行は入りません。 ですが、実際にそういう文字列を扱わなければならず、且つテーブルの幅をどうしても固定させたいのであれば、文字列が固定幅の中でスクロールして表示される様な仕様にしてはいかがでしょう。見栄えはあまり良くないですが、幅を固定する事はとりあえず実現できます。 ただし、td要素に直接スクロールのスタイルを指定する事はできないので、マークアップを少し変える必要があります。 例えば下記の様にdivをtdの中に入れ子にして、文字列をdiv内に表示させる様にします。 <table border="0" cellspacing="0" cellpadding="0" class="hoge"> <tr> <td> <div>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</div> </td> </tr> <tr> <td> <div>xxxxxxx</div> </td> </tr> </table> その上で、CSSファイルで table.hoge { border-collapse: collapse; } table.hoge td { padding: 1px; border: solid 1px #000; } table.hoge td div { width: 380px; _height: 3em; overflow: auto; } とでも指定しておけば、文字列の長さが380px以上であればセル内にスクロールバーが表示される様になります。 "overflow: auto;"ではなく"overflow: scroll;"にすると、高さに関する指定("_height: 3em;" IE6用のハック)は不要になりますが、スクロールが不要な短い文字列でも常に縦横スクロールバーの領域が表示される事になります。

psychesine
質問者

お礼

ありがとうございます。

  • chie65535
  • ベストアンサー率43% (8481/19299)
回答No.1

>文字列が長いのですが、シングルバイト文字とマルチバイト文字で挙動が異なっています。 >指定している幅で固定したいのですが >どうすれば良いでしょうか? 出来ません。 「英単語」の場合「1単語を途中で切って改行して2単語にしてしまうと、元の意味とは全然違った意味になってしまう可能性がある」ので「どんなに長い単語であろうとも、空白や記号やハイフン以外の所では、絶対に改行しない」と言う仕様になっています。 こういう仕様になってないと「英文が変になってしまう可能性」があるのです。 「どうしても途中で改行したい」というならば、文章の意味がガラリと変わってしまう(読み手が意味を取り違える)のを覚悟した上で「明示的な改行」を入れるしかありません。 なお、普通、1語の単語を複数行に渡って書く時は「Base- ball」のように「ハイフン(-)」を入れ「これは1単語ですよ」と明示します。(ハイフンを入れる場所には法則があり、どこでも入れられる訳ではありません。そして「ハイフン入れ」をコンピュータが自動で行うのは無理です)

psychesine
質問者

お礼

ありがとうございます

関連するQ&A

  • TABLEタグの幅指定

    テーブルの幅を厳密に指定したいのですが、 例えば以下のような1行2列のテーブルがあるとき、 <TABLE CELLSPACING=1 CELLPADDING=4 BORDER=0> <TR> <TD WIDTH=100>***</TD> <TD WIDTH=100>***</TD> </TR> </TABLE> このような場合にテーブルタグにWIDTH属性を加えるとすると、 100*2+4*4+1*3=219で、WIDTH=219が正確な値なのでしょうか? よろしくお願いします。

  • テーブルの位置

    最初からテーブルを一番上に持ってくるにはどうしたら良いですか?CSSで設定するのでしょうか? 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width=\"800\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" height=\"500\"> <tr bgcolor=\"#FFFF00\"> <td valigin=\"top\" valign=\"top\" colspan=\"4\" height=\"64\">  </tr> <tr> <td colspan=\"3\" height=\"2\">  </td> </tr> <tr> 【<td width=\"170\"> <table width=\"170\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"> <tr> <td> </td> </tr> </table>】 </td> <td width=\"238\" height=\"352\"> </td> <td width=\"197\"> </td> </tr> <tr> <td colspan=\"3\"> </td> </tr> </table>

  • テーブルサイズ指定

    こんにちは。 困ったことがあるのですが、 <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
  • テーブルの位置

    最初からテーブルを一番上に持ってくるにはどうしたら良いですか?CSSで設定するのでしょうか? 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width="800" border="1" cellspacing="0" cellpadding="0" height="500"> <tr bgcolor="#FFFF00"> <td valigin="top" valign="top" colspan="4" height="64">  </tr> <tr> <td colspan="3" height="2">  </td> </tr> <tr> 【<td width="170"> <table width="170" border="1" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table>】 </td> <td width="238" height="352"> </td> <td width="197"> </td> </tr> <tr> <td colspan="3"> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • テーブル内のテーブルの高さを揃えたい。

    CGIの表示部分を改造中です。 下のソースをhtmlファイルにして見てもらったら判ると思うのですが、 <TABLE border="0"> <COL span="4" width="50"> <TR> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">こんな風に</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">枠を置いたときに</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD> </TR> </TABLE> </TD> </TR> </TABLE> 高さを100%にしても広がりませんでした。 どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?

    • ベストアンサー
    • HTML
  • テーブル内いっぱいに

    comment: と txt box を配置したいのですが txt box が右側に小さく表示されます どうしたらいいでしょうか? <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr><td> <table width="100%" cellspacing="0" cellpadding="0"> <tr><td>comment:</td><td><input type="text" style="width:100%"/></td></tr> </table> </td></tr> </table>

    • ベストアンサー
    • HTML
  • tableにinclude fileを組み込んだら・・・

    <table cellspacing="0" cellpadding="0"> <tr> <td width="480"> <table width=470" cellspacing="0" cellpadding="0"> <tr> <td width="470">・・・・</td> </tr> </table> </td> </tr> </table> を <table cellspacing="0" cellpadding="0"> <tr> <td width="480"> <!--#include file="head.html"--> </td> </tr> </table> で head.html を <table width=470" cellspacing="0" cellpadding="0"> <tr> <td width="470">・・・・</td> </tr> </table> にした場合、中のtableの上下のスペースが異なってしまいます。 どなたか、解決方法を教えてください。

    • ベストアンサー
    • HTML
  • テーブルの作り方をご教示ください

    図のようなテーブルを作りたいのですがどうすればいいのかわかりません。 図はエクセルで書きました。 ----------------------------------------------- <table border=0 cellspacing=0 cellpadding=0> <tr> <td> <table border=0 bgcolor="#000000" cellspacing=1 cellpadding=1 width="230"> <tr bgcolor="#FFFFFF"> <td> 1 </td> </tr> <tr bgcolor="#FFFFFF"> <td> 2 </td> <tr bgcolor="#FFFFFF"> <td> 3 </td> </table> </td> </tr> </table> ----------------------------------------------- まではわかったのですが、 3と4を区切る方法がわかりません。 ご回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブル内文字列がテーブル幅を超えたとき

    超えた部分の文字を表示しないで テーブル幅の範囲で表示できる部分だけ表示することはできるのでしょうか? 例えば <table border='1' width='100%' CELLPADDING='0' CELLSPACING='0'><tr><td>abc...z</td></tr></table> の abc...z の部分がテーブル幅より長いときには超えた部分はなかったものとして表示するのです

    • ベストアンサー
    • HTML
  • テーブルがWindowの範囲を超えないように

    print "<table border='1' width='100%' CELLPADDING='0' CELLSPACING='0'><tr><td>$str</td></tr></table>"; としたのですが文字列$strが長いとテーブルの幅がWindowの幅を超えて水平スクロールバーが出てしまいます どうしたらテーブルの幅が変わらないでテーブル内の文字列が長いときには自動的に範囲内で文字列が折り返されるようにできるでしょうか?

    • ベストアンサー
    • Perl